[Bug Report][3.4.8] Bugs and problems in date picker in Solar and Lunar calendars (used for Persian/Farsi and Arabic locales)

[mahozad]

Environment

Vuetify Version: 3.4.8
Vue Version: 3.3.13
Browsers: Chrome 120.0.0.0
OS: Windows 10

Steps to reproduce

Open the reproduction link and see the date picker in it (it is using Persian/Farsi locale which uses Solar Hijri calendar). Read on to see what problems exist in it.

Expected Behavior

Many other related issues were closed and were referred to #1892.
The issue #1892 was closed and the authors requested a new issue for new versions of Vuetify.

These bugs and problems are for Jalali/Solar/Persian calendar used for Persian/Farsi (fa) locale and also for Lunar calendar used for Arabic (ar-SA) locale.

1. The "year month" label should be concatenated in reverse order for fa locale (instead of ‏۱۴۰۲ دی should be دی ۱۴۰۲)
2. The previous/next month buttons should be swapped (reversed) for RTL layouts (including fa locale)
3. The month labels in the month selection section are off by one for fa locale (the default selected month is one less than what it should be and selecting a month selects the month after it)
4. The year numbers (labels) in the year selection section are off by one (one less than what they should be)

The following problems are less serious:

5. The title and header have not been localized (translated) for fa locale
6. The days in the picker do not start from 1 (they start from 9 or 10 or 11) (because the first day of month in Solar Hijri calendar corresponds to 9th or 10th or 11th day of a Gregorian month)
7. The months in the month selection section do not start from فروردین (they start with دی)
   (because the first month of Solar Hijri calendar corresponds to March in Gregorian calendar)

Actual Behavior

It was hard to separate expected and actual functionality. Please see the expected section above.

Reproduction Link

https://play.vuetifyjs.com/#...

[SoheilHasankhani]

I've been following this discussion and I believe there might be a different approach to using the Jalali calendar with Vuetify's date picker. According to the Vuetify documentation, it's recommended to use date-io adapters for handling different date formats and locales.

I've created a sample to demonstrate this approach, which you can find here.

However, I've noticed two small issues in the date picker code implementation:

1. Text Computed Value: In the current implementation, the text is a computed value that counts the first day of the month but it doesn't use the adapter abstraction to modify the date. So when using the Jalali adapter, the computation is incorrect.

const text = computed(() => {
  return adapter.format(
    adapter.date(new Date(year.value, month.value, 1)),
    'monthAndYear',
  )
})

it should be:

const text = computed(() => {
  let _date = adapter.date()

  _date = adapter.setYear(_date, year.value)
  _date = adapter.setMonth(_date, month.value)
  _date = adapter.setDate(_date, 1)

  return adapter.format(
    _date,
    'monthAndYear',
  )
})

2. Header Computed Value:
   When we are passing the date value to v-model in the header, it's passing the model value to adapter.format without using the adapter abstraction to create adapter compatible date object, which results in an error.

const header = computed(() => {
  return props.multiple && model.value.length > 1
    ? t('$vuetify.datePicker.itemsSelected', model.value.length)
    : model.value[0] && adapter.isValid(model.value[0])
      ? adapter.format(model.value[0], 'normalDateWithWeekday')
      : t(props.header)
})

it should be:

const header = computed(() => {
  return props.multiple && model.value.length > 1
    ? t('$vuetify.datePicker.itemsSelected', model.value.length)
    : model.value[0] && adapter.isValid(model.value[0])
      ? adapter.format(
        adapter.date(model.value[0]),
        'normalDateWithWeekday')
      : t(props.header)
})