Vuetify: [Bug Report] v-date-picker new month is started at the end of previous month in FA-local

[MustafaHussaini]

Steps to reproduce

Versions

Vuetify 0.15.7 and vue2.4

What is expected ?

In date picker month should be started with its first day. which is not working for 'FA' locals.

What is actually happening ?

for current date 26 SEP 2017, correct value in FA local is مهر ۴, ۱۳۹۶
۴ means 4 in English and مهر is the month 7th in Persian and ۱۳۹۶ means 1396.
but in the date picker white space header it is showing ۱۳۹۶ شهریور .
شهریور is the month 6 in FA local.
on the other hand for blue space it is showing مهر ۴ means 4th day of month 7 which is correct one.

Another problem is date picker table. in codepen month 7 is started at the end of month 6. ۱ or 1 in English is the first day of month 7 in FA local which should be in the first row of table but now it is on the last row after ۳۱ or 31 of month 6 in FA local.

### Reproduction Link
https://codepen.io/MUHU/pen/QqdVLP

[nekosaur]

@jacekkarczmarczyk Is this fixed with VDatePicker refactor?

[jacekkarczmarczyk]

No, that's a completely different issue

[miladmeidanshahi]

it's so important to be fix

[mhf-ir]

Wrong date time showing, It's actually a bug not an enhancement, i hope it's fix soon.

[amirhoseinsalimi]

Same issue here... Can't be used in a production level web app!

[mhf-ir]

Quasar already implemented: https://codepen.io/rstoenescu/pen/wOGpZg

[mhf-ir]

As i mentioned we need aggregate cldr data for get correct date time information base on locale:
https://github.com/vuetifyjs/vuetify/issues/6881

Best date time picker approach is many countries has multiple calendar system and fortunately Intl.Datetime format is good.

I think best approach for date time picker will be good if:

• Remove hard coded parts use variable base on locales, use CLDR.

• Component data must be Date object not an string, sees both Vuetify and Quasar Dont use this method, String manipulation is not great.

// bad practices:
new Vue({
  el: "#app",
  data: () => ({
    picker: '2018-06-17'
  })
})

// good one
new Vue({
  el: "#app",
  data: () => ({
    picker: new Date(),
  })
})

:1st_place_medal:
Notice If you work as backend developer consider clients always send UnixTimeStamp and you always send UnixtTimeStamp though. It's hard this process to carry on backend, browser knows about intl and client timezone lets client process this one.

• Date only data is not valid cause of timezone different, date depened of client timezone
  Maybe you send order from USA at '2019/01/01' but consider witch time and which timezone, Users in india might see as their local time as result of order so Date only it's not valid.
  so it's always came with time and timezone, Using UTC solved the problem via time.

Notice For date only we can use UTC 12:00:00 not 00:00:00 or 23:59:59 for timezone diff.

• Date time picker must support multiple calendar system, primary and secondaries are optional
  https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/calendarPreferenceData.json

Sample for FA-IR:

I could help with this algorithm for process but i'm not Vuejs or Vuetify expert.

Conclusion:

• Remove hard coded parts
• Use CLDR (aggregated just needed info)
• Use Date object instead of string
• Multiple calendar systems

[mhf-ir]

https://moment.github.io/luxon/docs/ might be good tools for i18n date time

[hopefeda]

OMG it's been 2 years and this is not fixed yet! This problem also exists in the 'ar-sa' locale.

[phtyrant]

same problem... hope they fix this issue

[amirhoseinsalimi]

I'm using vue-persian-datetime-picker component for the Jalali calendar and I'm happy with it; It supports both Jalali and Gregorian calendars with an easy API. Give it a try and if you want to deploy it as an inline date picker check this issue out, solved by the author.

[johnleider]

@jacekkarczmarczyk Any update on this?

[jacekkarczmarczyk]

That would require a big refactor of the internals.
There's also a question how do we treat the model. If it's a ISO date string then I don't see how we should implement a month picker where the model is never an ISO date as it spans over 2 months. If we treat it as a string what should be the behaviour when the calendar is switched from persian to other one (for example in some multilang app)? Should it automatically change? Should the dev be responsible for converting the persian string to ISO when saving value in database?
So many questions so few answers

[vahidForughi]

I have the same problem, we have a big problem in persian when we want use every date packages. we should search and find version which support Jalali . for example when use moment we should import moment-jalali too. so you can just add is-jalali prop in calendar and datepicker component.
we don't want put or get converted date or etc. just correct displaying is enough.

[Al00X]

I agree that fixing the display is enough. It's been years since this problem issued. I really appreciate if this problem gets fixed soon.

[artmarydotir]

Any plan for fixing this in vuetify roadmap ?
will it be fix at v3.0 (Titan) ?

@jacekkarczmarczyk

[johnleider]

After talking with the team, we haven't been able to nail this one down. I'm moving this to the Vuetify 3 project so that we can re-evaluate it once we get to Phase 3 of the development process (The one where we put v-date-picker together), to see if it can happen naturally or at least have some sort of path forward.

Once we get to that point I will update this thread and see what options we have available. Thank you for your patience.

If you have any questions, please reach out to us in our Discord community.