rails-datepicker 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 315e9fa4e066249f3553a386327bc3412e5cc84f83ad760392b23fe96e957b64
-  data.tar.gz: ace2e203b08484b807965bec231301a59fa219f0d47f413e2d15f912b7151337
+  metadata.gz: 523ca48f16f2917290c2bf4adb263db610a2ecb4c0aaac9682354bdc807a3a9c
+  data.tar.gz: 58c1383d56385c1813c93fb130d75e354fd1009820d67dc60dee01183ae47e6d
 SHA512:
-  metadata.gz: 489fdedc95b3c29921bffa26ba6e7edb39941b8e5868118ab2e9363254fb6e6aee3bf341e38fff0f5685b8f148dd292629dba13ee88703bce33893f27b5fbbb0
-  data.tar.gz: 42af843bd420fb1492897b0161c05c13f8664f4dfe2b372d4d2d5c9c74bd60cd8bd431295afd1ccd4720b5554c69d071be4fc1e2329949b34ca4cfbb400b4a58
+  metadata.gz: 444a42426714561f3c2b3f077880d3e142d13db34adccf592be862768a659f4388ce081fcb2cb0e6cfd5921fa6870bd21481ef55bd3c905fffbf889129526e12
+  data.tar.gz: '089601cf0c5ff55244dfa539d8c1828616175b2cd8b6889cdc1ed9c42ee974734d6b076eadcccfed7a897ea214ef98cdc6a20aecca9b7f348095db5c45ce07a8'

data/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes follow [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## 0.2.2 - 2026-11-01
+
+### Added
+
+- `locale_follows_calendar` field option and configuration setting that shows the Ethiopian calendar in Amharic and the Gregorian calendar in English, hiding the separate language switch.
+
+### Changed
+
+- The calendar switch is now a segmented control showing the Ethiopian and British flags with the active calendar highlighted.
+
 ## 0.2.1 - 2026-11-01
 
 ### Changed

data/README.md

@@ -52,6 +52,7 @@ RailsDatepicker.configure do |config|
   config.theme = :auto
   config.week_start = :sunday
   config.dual_dates = false
+  config.locale_follows_calendar = false
 end
 ```
 
@@ -96,6 +97,7 @@ Nested `fields_for` names and IDs are generated by the Rails builder. Standard H
   theme: :auto,
   ethiopic_numerals: true,
   dual_dates: true,
+  locale_follows_calendar: true,
   min: Date.current,
   max: 2.years.from_now.to_date,
   disabled_dates: holidays,
@@ -105,7 +107,9 @@ Nested `fields_for` names and IDs are generated by the Rails builder. Standard H
   years_after: 20 %>
 ```
 
-`display_calendar: :gregorian` keeps the visible result and manual input Gregorian while the popup can use either calendar. Omit it to display the result in the active calendar. The popup has independent calendar and English/Amharic switches.
+`display_calendar: :gregorian` keeps the visible result and manual input Gregorian while the popup can use either calendar. Omit it to display the result in the active calendar. The popup has a flag-based calendar switch and, unless `locale_follows_calendar` is set, an independent English/Amharic switch.
+
+`locale_follows_calendar: true` ties the language to the calendar: the Ethiopian calendar is shown in Amharic and the Gregorian calendar in English. The calendar switch is a segmented control with the Ethiopian and British flags, and the separate language switch is hidden. Any `locale` option is ignored.
 
 `dual_dates: true` shows the other calendar's day number beneath each day (for example, the Gregorian day under each Ethiopian day). The first day of the other calendar's month is highlighted, and screen readers hear both dates.
 

data/app/assets/stylesheets/rails_datepicker.css

@@ -93,22 +93,22 @@
   }
 
   /* Header */
-  .rdp__header { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; gap: .375rem; align-items: center; }
+  .rdp__header { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem; gap: .375rem; align-items: center; }
   .rdp__nav {
-    display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 9999px;
+    display: grid; width: 1.75rem; height: 2rem; place-items: center; border-radius: 9999px;
     color: var(--rdp-muted); font-size: 1.25rem; line-height: 1; padding-bottom: .125rem;
     transition: background-color .15s ease, color .15s ease;
   }
   .rdp__nav:hover:not(:disabled) { background: var(--rdp-hover); color: var(--rdp-accent); }
   .rdp__nav:active:not(:disabled) { transform: scale(.94); }
   .rdp__nav:disabled { opacity: .3; }
-  .rdp__selectors { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .375rem; }
+  .rdp__selectors { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: .375rem; }
   .rdp__select {
     appearance: none; -webkit-appearance: none; min-width: 0; height: 2rem; border: 1px solid var(--rdp-border);
-    border-radius: .5rem; background: var(--rdp-bg); color: var(--rdp-fg); padding: 0 1.375rem 0 .5rem;
-    font-size: .8125rem; font-weight: 600; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
+    border-radius: .5rem; background: var(--rdp-bg); color: var(--rdp-fg); padding: 0 1.125rem 0 .5rem;
+    font-size: .75rem; font-weight: 600; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right .5rem center;
+    background-repeat: no-repeat; background-position: right .375rem center;
     transition: border-color .15s ease, background-color .15s ease;
   }
   .rdp__select:hover:not(:disabled) { border-color: color-mix(in srgb, var(--rdp-accent) 50%, var(--rdp-border)); background-color: var(--rdp-hover); }
@@ -169,6 +169,16 @@
   }
   .rdp__locale-toggle:disabled, .rdp__calendar-toggle:disabled { opacity: .4; }
   .rdp__locale-toggle { margin-inline-start: auto; }
+  .rdp__locale-toggle[hidden] { display: none; }
+  .rdp__locale-toggle[hidden] ~ .rdp__calendar-toggle { margin-inline-start: auto; }
+  .rdp__calendar-toggle { gap: .125rem; padding: .125rem; }
+  .rdp__flag {
+    display: inline-grid; place-items: center; width: 1.75rem; height: 1.375rem; border-radius: 9999px;
+    opacity: .45; filter: saturate(.5); transition: opacity .15s ease, filter .15s ease, background-color .15s ease;
+  }
+  .rdp__flag svg { width: 1.25rem; height: .875rem; border-radius: .1875rem; box-shadow: 0 0 0 1px rgb(15 23 42 / .12); }
+  .rdp__flag--active { opacity: 1; filter: none; background: var(--rdp-hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rdp-accent) 45%, transparent); }
+  .rdp__calendar-toggle:hover:not(:disabled) .rdp__flag:not(.rdp__flag--active) { opacity: .75; }
 
   /* Dark theme */
   .rdp--dark, .dark .rdp--auto {

data/app/javascript/controllers/rails_datepicker_controller.js

@@ -21,6 +21,7 @@ export default class extends Controller {
     weekStart: { type: String, default: "sunday" },
     ethiopicNumerals: { type: Boolean, default: false },
     dualDates: { type: Boolean, default: false },
+    localeFollowsCalendar: { type: Boolean, default: false },
     inline: { type: Boolean, default: false },
     min: String,
     max: String,
@@ -163,10 +164,13 @@ export default class extends Controller {
     if (this.inputTarget.disabled) return
     const anchor = partsToGregorian({ ...calendarParts(this.viewDate, this.calendarValue), day: 1 }, this.calendarValue)
     this.calendarValue = this.calendarValue === "ethiopian" ? "gregorian" : "ethiopian"
+    if (this.localeFollowsCalendarValue) this.localeValue = this.calendarValue === "ethiopian" ? "am" : "en"
     this.viewDate = anchor
     if (this.selectedDate) this.inputTarget.value = this.formatSelection(this.selectedDate)
     this.render()
     this.announceView()
+    if (this.inputTarget.validationMessage) this.validate()
+    this.reposition()
   }
 
   switchLocale(event) {
@@ -295,6 +299,7 @@ export default class extends Controller {
       element.textContent = copy[element.dataset.railsDatepickerText]
     }
     if (this.hasLocaleToggleTarget) {
+      this.localeToggleTarget.hidden = this.localeFollowsCalendarValue
       this.localeToggleTarget.textContent = this.localeValue === "am" ? "English" : "አማርኛ"
       this.localeToggleTarget.setAttribute("aria-label", copy.switchLanguage)
     }
@@ -303,8 +308,12 @@ export default class extends Controller {
   renderToggle() {
     const next = this.calendarValue === "ethiopian" ? "gregorian" : "ethiopian"
     const copy = labels(this.localeValue)
-    this.calendarToggleTarget.textContent = copy[next]
-    this.calendarToggleTarget.setAttribute("aria-label", copy[`switchTo${next[0].toUpperCase()}${next.slice(1)}`])
+    const label = copy[`switchTo${next[0].toUpperCase()}${next.slice(1)}`]
+    for (const flag of this.calendarToggleTarget.querySelectorAll("[data-rdp-flag]")) {
+      flag.classList.toggle("rdp__flag--active", flag.dataset.rdpFlag === this.calendarValue)
+    }
+    this.calendarToggleTarget.setAttribute("aria-label", label)
+    this.calendarToggleTarget.title = label
   }
 
   renderSelectors() {

data/lib/generators/rails_datepicker/templates/initializer.rb.tt

@@ -8,4 +8,7 @@ RailsDatepicker.configure do |config|
   config.week_start = :sunday
   # Show the other calendar's day number beneath each day in the popup.
   config.dual_dates = false
+  # Tie the language to the calendar: Ethiopian in Amharic, Gregorian in English.
+  # The calendar switch shows flags and the separate language switch is hidden.
+  config.locale_follows_calendar = false
 end

data/lib/rails_datepicker/configuration.rb

@@ -7,7 +7,8 @@ module RailsDatepicker
     THEMES = %i[auto light dark].freeze
     WEEK_STARTS = %i[sunday monday].freeze
 
-    attr_reader :default_calendar, :default_locale, :date_format, :theme, :week_start, :dual_dates
+    attr_reader :default_calendar, :default_locale, :date_format, :theme, :week_start, :dual_dates,
+      :locale_follows_calendar
 
     def initialize
       @default_calendar = :ethiopian
@@ -16,12 +17,19 @@ module RailsDatepicker
       @theme = :auto
       @week_start = :sunday
       @dual_dates = false
+      @locale_follows_calendar = false
     end
 
     def dual_dates=(value)
       @dual_dates = !!value
     end
 
+    # When true the language follows the calendar: Ethiopian uses Amharic and
+    # Gregorian uses English, and the separate language switch is hidden.
+    def locale_follows_calendar=(value)
+      @locale_follows_calendar = !!value
+    end
+
     def default_calendar=(value)
       @default_calendar = validate!(:calendar, value, CALENDARS)
     end

data/lib/rails_datepicker/form_helper.rb

@@ -4,9 +4,14 @@ require "json"
 
 module RailsDatepicker
   module FormHelper
+    FLAGS = {
+      ethiopian: '<svg viewBox="0 0 20 14" focusable="false"><rect width="20" height="14" fill="#078930"/><rect y="4.67" width="20" height="4.67" fill="#FCDD09"/><rect y="9.33" width="20" height="4.67" fill="#DA121A"/><circle cx="10" cy="7" r="3.7" fill="#0F47AF"/><path d="M10 4.2l1.65 5.07-4.31-3.14h5.32l-4.31 3.14z" fill="#FCDD09"/></svg>',
+      gregorian: '<svg viewBox="0 0 20 14" focusable="false"><rect width="20" height="14" fill="#012169"/><path d="M0 0l20 14M20 0L0 14" stroke="#fff" stroke-width="2.8"/><path d="M0 0l20 14M20 0L0 14" stroke="#C8102E" stroke-width="1"/><path d="M10 0v14M0 7h20" stroke="#fff" stroke-width="4"/><path d="M10 0v14M0 7h20" stroke="#C8102E" stroke-width="2.2"/></svg>'
+    }.freeze
+
     FIELD_OPTIONS = %i[
       calendar display_calendar locale date_format format theme week_start ethiopic_numerals
-      dual_dates inline min max disabled_dates readonly years_before years_after
+      dual_dates locale_follows_calendar inline min max disabled_dates readonly years_before years_after
     ].freeze
 
     def rails_datepicker_field(object_name, method, options = {})
@@ -91,11 +96,15 @@ module RailsDatepicker
       years_after = Integer(options.delete(:years_after) || 20)
       raise ArgumentError, "year ranges must be non-negative" if years_before.negative? || years_after.negative?
 
-      calendar = options.delete(:calendar) || config.default_calendar
+      calendar = picker_enum!(:calendar, options.delete(:calendar) || config.default_calendar, Configuration::CALENDARS)
+      locale_follows_calendar = options.key?(:locale_follows_calendar) ? !!options.delete(:locale_follows_calendar) : config.locale_follows_calendar
+      requested_locale = options.delete(:locale) || config.default_locale
+      locale = locale_follows_calendar ? locale_for_calendar(calendar) : picker_enum!(:locale, requested_locale, Configuration::LOCALES)
       {
-        calendar: picker_enum!(:calendar, calendar, Configuration::CALENDARS),
+        calendar: calendar,
         display_calendar: (picker_enum!(:display_calendar, options.delete(:display_calendar), Configuration::CALENDARS) if options[:display_calendar]),
-        locale: picker_enum!(:locale, options.delete(:locale) || config.default_locale, Configuration::LOCALES),
+        locale: locale,
+        locale_follows_calendar: locale_follows_calendar,
         date_format: date_format,
         theme: picker_enum!(:theme, options.delete(:theme) || config.theme, Configuration::THEMES),
         week_start: picker_enum!(:week_start, options.delete(:week_start) || config.week_start, Configuration::WEEK_STARTS),
@@ -146,6 +155,7 @@ module RailsDatepicker
         rails_datepicker_week_start_value: picker[:week_start],
         rails_datepicker_ethiopic_numerals_value: picker[:ethiopic_numerals],
         rails_datepicker_dual_dates_value: picker[:dual_dates],
+        rails_datepicker_locale_follows_calendar_value: picker[:locale_follows_calendar],
         rails_datepicker_inline_value: picker[:inline],
         rails_datepicker_min_value: picker[:min].to_s,
         rails_datepicker_max_value: picker[:max].to_s,
@@ -187,7 +197,7 @@ module RailsDatepicker
           @template.content_tag(:div, "", class: "rdp__weekdays", aria: { hidden: "true" }, data: { rails_datepicker_target: "weekdays" }),
           @template.content_tag(:div, "", class: "rdp__grid", role: "grid", data: { rails_datepicker_target: "grid" }),
           @template.content_tag(:div, "", class: "rdp__sr-only", role: "status", aria: { live: "polite" }, data: { rails_datepicker_target: "status" }),
-          calendar_footer(picker[:locale], disabled)
+          calendar_footer(picker, disabled)
         ])
       end
     end
@@ -207,17 +217,33 @@ module RailsDatepicker
       end
     end
 
-    def calendar_footer(locale, disabled)
+    def calendar_footer(picker, disabled)
+      locale = picker[:locale]
       @template.content_tag(:div, class: "rdp__footer") do
         @template.safe_join([
           @template.button_tag(translate("today", locale), type: "button", class: "rdp__footer-button", disabled: disabled, data: { rails_datepicker_text: "today", rails_datepicker_target: "todayButton", action: "rails-datepicker#today" }),
           @template.button_tag(translate("clear", locale), type: "button", class: "rdp__footer-button", disabled: disabled, data: { rails_datepicker_text: "clear", action: "rails-datepicker#clear" }),
-          @template.button_tag("", type: "button", class: "rdp__locale-toggle", disabled: disabled, data: { rails_datepicker_target: "localeToggle", action: "rails-datepicker#switchLocale" }),
-          @template.button_tag("", type: "button", class: "rdp__calendar-toggle", disabled: disabled, data: { rails_datepicker_target: "calendarToggle", action: "rails-datepicker#switchCalendar" })
+          @template.button_tag("", type: "button", class: "rdp__locale-toggle", disabled: disabled, hidden: picker[:locale_follows_calendar],
+            data: { rails_datepicker_target: "localeToggle", action: "rails-datepicker#switchLocale" }),
+          @template.button_tag(calendar_flags(picker[:calendar]), type: "button", class: "rdp__calendar-toggle", disabled: disabled,
+            data: { rails_datepicker_target: "calendarToggle", action: "rails-datepicker#switchCalendar" })
         ])
       end
     end
 
+    # Segmented flag control: Ethiopia for the Ethiopian calendar and the United
+    # Kingdom for the Gregorian calendar, with the active calendar highlighted.
+    def calendar_flags(active)
+      @template.safe_join(RailsDatepicker::Configuration::CALENDARS.map do |calendar|
+        classes = ["rdp__flag", ("rdp__flag--active" if calendar == active)].compact.join(" ")
+        @template.content_tag(:span, RailsDatepicker::FormHelper::FLAGS.fetch(calendar).html_safe, class: classes, data: { rdp_flag: calendar }, aria: { hidden: "true" })
+      end)
+    end
+
+    def locale_for_calendar(calendar)
+      calendar == :ethiopian ? :am : :en
+    end
+
     def nav_button(label, action, glyph, locale, disabled, target)
       @template.button_tag(glyph, type: "button", class: "rdp__nav", disabled: disabled, aria: { label: translate(label, locale) }, data: { rails_datepicker_label: label, rails_datepicker_target: target, action: "rails-datepicker##{action}" })
     end

data/lib/rails_datepicker/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsDatepicker
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rails-datepicker",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "type": "module",
   "exports": {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-datepicker
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Tamiru Hailu