mardi 21 mars 2023

Different ways of using custom Time zone select option in ROR

Different ways of using custom Time zone select option in ROR

1. Using TZInfo::DataTimezone
2. Using TZInfo::Timezone
3. Customize priority in select option using time_zone_select
4. Select option to get "GMT +.." Time zone option using ActiveSupport::TimeZone

Note:
1. I have used gem 'bootstrap-select-rails' for class= selectpicker.
2. Search option is introduced in options

"data-live-search": "true"

3.prompt: '--Select timezone--' is added for user prompt.

Different ways of using custom Time zone in ROR1. Using TZInfo::DataTimezone

slim code snippet

= select_tag 'country[time_zone]', options_for_select(TZInfo::DataTimezone.all_country_zone_identifiers {|c| TZInfo::DataTimezone.get(ActiveSupport::TimeZone[c]) }), class: 'form-control'

Output of above
<select name="country[time_zone]" id="country_time_zone" class="form-control"> <option value="Europe/Andorra">Europe/Andorra</option> <option value="Asia/Dubai">Asia/Dubai</option>..... </select>

  1. Using TZInfo::Timezone
    slim code snippet
= select_tag 'country[time_zone]', options_for_select(TZInfo::Timezone.all {|c| Time.zone(c.offset)}), class: 'form-control'

Output of above
<select name="country[time_zone]" id="store_time_zone" class="form-control"><option value="Africa - Abidjan">Africa - Abidjan</option><option value="Africa - Accra">Africa - Accra</option>..........</select>

3. Customize priority in select option using time_zone_select

= time_zone_select("country", :time_zone,[ActiveSupport::TimeZone['Singapore'],ActiveSupport::TimeZone['Beijing'],ActiveSupport::TimeZone['Chongqing'],ActiveSupport::TimeZone['Hong Kong'],ActiveSupport::TimeZone['Irkutsk'],ActiveSupport::TimeZone['Kuala Lumpur'],ActiveSupport::TimeZone['Perth'],ActiveSupport::TimeZone['Taipei'],ActiveSupport::TimeZone['Ulaanbaatar']],options = {prompt: '--Select timezone--', value: :id}, html_options = {class:'form-control selectpicker', required: true, "data-live-search": "true"})

output

<select class="form-control selectpicker" required="required" data-live-search="true" name="country[time_zone]" id="country_time_zone" tabindex="-98"><option value="">--Select timezone--</option><option value="Singapore">(GMT+08:00) Singapore</option>.........</select>

4. Select option to get "GMT +.." Time zone option using ActiveSupport::TimeZone

= select_tag 'country[time_zone]', options_for_select(ActiveSupport::TimeZone.all{ActiveSupport::TimeZone['Singapore']}, f.object.time_zone), class: 'form-control selectpicker', "data-live-search": "true", prompt: '--Select timezone--'

output
<select name="country[time_zone]" id="store_time_zone" class="form-control selectpicker" data-live-search="true" required="required" tabindex="-98"><option value="">--Select timezone--</option><option value="(GMT-12:00) International Date Line West">(GMT-12:00) International Date Line West</option><option value="(GMT-11:00) American Samoa">(GMT-11:00) American Samoa</option></select>

Aucun commentaire:

Enregistrer un commentaire