Datetime default format

  • Hi,

    How can I set a default date format ?

    I read the

    My code

    import moment from 'moment'
    // ...
    // Set de moment
    // => Display : "il y a 6 ans" => French
    config.Quasar.start(() => {
      /* eslint-disable no-new */
      new Vue({
        el: '#q-app',
        render: h => h(require('./component/layout/root/app'))

    Result : Display in UI is in english - any idea ?

    Quasar 0.14

  • Try to look at datetime under doc, you will also find a references to the format it uses.

    The point is that in 0.14 Quasar removes moment from its dependencies, and uses native JavaScript Date class to make it possible to slim down the size of a build (tree shaking).

    I will recommend you to read this it will tell you what you need to know.

  • @druppy , thanks for reply, but :

    • remove of moment : good news
    • only JS date aboard : We have this till many month : it’s perfect 🙂
    • your link : It explains how to manipulate date (format, add, …) : But my question was not about this exactly

    So, my question is “How to set a default format for all the Quasar UI Component : date, datetime, …” :

    I’d guess that Quasar would detect the locale of the browser and would present a french or german calendar if I’m with a french or german browser locale…
    So I tried to set it manually (see code above), but it doesn’t work

    I can set the format attr of each component : it works, but when I open the calendar, I have a beautyful “Monday” instead of “Lundi” or “Montag”


  • In quasar 0.14 you can pass strings and string arrays to the datetime component for all the localizable pieces (months, days, ok/clear/cancel) as well as set a custom display format. You can either plug this with your i18n solution, or handle it manually, you’re free to do whatever you want, but there’s no out of the box global componentsLocale = 'fr'. Nothing stops you from making that happen if it fits your needs though.

    BTW you will probably want to use these helpers (they replace many useful moment tools):

  • @spectrolite : OK, locale info and format are already in the i18n…

    So if I understand well, we must add the locales infos to “instance” of component in my app (wathever is the solution) ?
    I can understand that Quasar is not providing all the locales, but letting the developer provide is own “globaly” is very important for pro apps team IMHO
    Ex : componentsLocale = {months: [ ], ...}

    Let me know

  • OK, I done it, I wrote a small q-date component on the top of q-datetime that’s will make the job for 90% of the hundred dates we have in our app. For the 10% more specific needs, we will write byhand.

    PS : I read the code,, there’s no way to inject it… at the moment 😄


Log in to reply