Datetime default format

sebastien.roul

Hi,

How can I set a default date format ?

I read the http://quasar-framework.org/guide/app-troubleshoot-and-tips.html#Configuring-Momentjs-Localization

My code

import moment from 'moment'

// ...

// Set de moment
moment.locale('fr')
console.log(moment(1316116057189).fromNow())
// => Display : "il y a 6 ans" => French

config.Quasar.start(() => {
  /* eslint-disable no-new */
  new Vue({
    el: '#q-app',
    router,
    render: h => h(require('./component/layout/root/app'))
  })
})

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

Quasar 0.14

druppy

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.

sebastien.roul

@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, …” : http://beta.quasar-framework.org/components/datetime.html

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”

0_1501605481966_upload-7a305e80-b344-4a2a-9771-9c139529bf81

spectrolite

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):
http://beta.quasar-framework.org/components/handling-js-date.html

sebastien.roul

@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

sebastien.roul

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, https://github.com/quasarframework/quasar/blob/dev/src/utils/date.js, there’s no way to inject it… at the moment

Bye

No More Posting New Topics!

Datetime default format