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

it’s so important to be fix

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.

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

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

Same issue here… Can’t be used in a production level web app!

Any updates? @jacekkarczmarczyk

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

@jacekkarczmarczyk

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

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(),
  })
})

🥇 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

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

This bug is related to an earlier version of Vuetify. If this is still present in v3 of the framework, please create a new issue. Thank you!

@jacekkarczmarczyk @johnleider, simple implentation using https://github.com/moment/luxon:

• All input will be JavaScript Date not the stupid string
  • User might use different calendar but how to store or process then when multiple calendar? You always set standard Date in your database or etc. Database dosnt support special calendar process.
  • You can convert Date to any calendar and locale base.
• Using CLDR json for get required info (https://github.com/vuetifyjs/vuetify/issues/6881)
• Many Calendars, Many Countries, Many Locales

I said before input string is not valid approach. Most of date time pickers use this way, and it’s wrong.

Open with latest Desktop chrome or latest Nightly firefox (Problem is for DisplayName)

• polyfills added for older browser Demo: https://github.com/mhf-ir/test-gha https://mhf-ir.github.io/test-gha/test.html

Older version using moment : https://github.com/artmarydotir/aasaam-vuetify-datetime https://github.com/aasaam/date-time

When we switch to fa local, If there is no day specified in date string just (2020-01) then we will convert firt day of month (2020-1-1) to persian which is (1399-10-11). then the selected month in FA will be 10. Did you got it?

@MustafaHussaini do you have some idea how it should behave when you have set month to 2020-01 in en locale and then you switch to fa?

edit: in month picker

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.