Issues with moment.js and localization
Issues with moment.js and localization
rf1234
Posts: 3,028Questions: 88Answers: 422
Hi Allan,
I am using moment.js to format dates. I have included the MomentJS-2.13.0 Javascript. In addition I am using two locales:
<!-- Locales for moment.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/de.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/en-gb.js"></script>
To initialize moment.js I do this:
//Moment.js (date time) location settings
if (lang === 'de') {
moment.locale('de');
} else {
moment.locale('en-gb');
}
// Return today's date and time
var currentTime = new Date();
The Data Table uses this - and it works perfectly fine. For German (lang === 'de') it returns 'DD.MM.YYYY' else it returns the English Version of 'DD/MM/YYYY'.
{ data: "rfp.start_date",
render: function ( data, type, row ) {
return moment(new Date(data)).format('L');
}
},
My problem is with Editor. The only thing that works here is the default unfortunately which correctly returns the current date in the German or English format.
fields: [ {
label: "Start Date:",
name: "rfp.start_date",
type: "datetime",
def: function () { return moment(currentTime).format('L');},
format: 'DD.MM.YYYY',
opts: {
showWeekNumber: true,
momentLocale: 'de'
}
}, {
label: "End Date:",
name: "rfp.end_date",
type: "datetime",
def: function () { return moment(currentTime).format('L');}
} ]
"Start Date" in this fashion only works for German because Editor forced me to hard code the format to be 'MM.DD.YYYY'. Editor does not accept the format 'L' which is a moment.js standard format used with localization. You can also see it in the respective moment locale scripts mentioned above. I tried to use a global variable predefined with one of the two formats but that produced an error. So how can I localize this? How can I preset the format so that is used correctly by Editor since it does not acceopt 'L'?
And there is another issue: Editor ignores "momentLocale: 'de'". "showWeekNumber" works however. For that reason my date picker is only in English and not shown in German.
Let's assume I get "momentLocale" working: How do I dynamically set the locale to either German or English?
"End Date" is even worse: Only the default works fine in German or English. Once you start editing the date it shows it in 'YYYY-MM-DD'. For the German language setting it starts with the default of '03.02.2017'. Then I open the date picker which is in English only and if I select February 4th the date picker returns '2017-02-04' which is a problem ...
Please help!
This question has accepted answers - jump to:
Answers
That's odd. I'm not sure why that would be the case as there is no special handling for that code. One thing, your
defshould really just return aDateobject, not a formatted value.I'll try to replicate the issue with
Llocally, or if you have a page you can link me to that would be useful.Allan
Thanks, Allan! Sorry I can't provide you with a page ...
I tried this now in Editor:
Now the 'L' works and even the locale works! It returns 03.02.2017.
If I change the locale to 'en' it returns 02/03/2017. And if I use 'en-gb' it returns
03/02/2017. PERFECT!
There is only ony thing unfortunately:
Using 'L' instead of e.g. 'DD-MM-YYYY' makes the datepicker freeze! That is quite an issue. "freeze" means you cannot even open it.
So I tried this:
03-02-2017 is being returned. So the format overwrites the locale.In this case the datepicker works almost normally since it is in English while it should be in German.
I now tried this to get closer to the problem:
This returns an empty field and you can't open the datepicker due to some error which is caused by the 'L'.
Now my next guess:
Result: Empty field, datepicker opens and then I click on today's date. It returns: 03-02-2017. ok!
In summary these are the issues:
- solution for the datepicker using 'L' instead of e.g. 'DD-MM-YYYY'
- making the datepicker respect the locale instead of only returning English
- dynamic setting of locale (right now it is hard coded in "momentLocale: 'de'" and my global settings for moment.js (see above) are ignored in Editor but NOT in datatables which is amazing ..
I also had trouble on the server side but I could figure it out myself like this:
This code does the job dynamically - and I don't have to do any rendering in the data table display any longer. The German or English date formats are displayed on the screen depending on the language set ...
I also would need such a solution for Java Script ... Please.
In
dataTables.editor.jscould you find the line:and add an
Linto that regex (e.g./[YMDL]/). I think that should resolve that issue.What is happening there is that the code is trying to determine what parts of the picker should be shown.
Allan
Thanks a lot Alan! That worked.
I could also resolve the dynamic "momentLocale" setting. I had messed up global variable definition ... and fixed it in the meantime.
Now the code looks like this:
This works fine! There is only one issue left:
- making the datepicker respect the locale instead of only returning English
Good to hear that helped.
If you provide a format of
Lshouldn't that automatically mean that the date format returned is the localised format?Allan
Yes, the format is the localized format. That is fine. But the date picker itself is always in English, never in German. "February" should be "Februar" for example.
Is there a solution for this?
If so, is there a similar solution for Quill? The menu bar is only in English as well ...
I found this: http://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html
How could I use this with Editor?
I am using the plugin for Bootstrap DateTimePicker (2)
Here is another good hint, but I don't know how to use this with Editor:
http://stackoverflow.com/questions/19382189/change-language-for-bootstrap-datetimepicker
Oh I see what you mean. You need to use the
languageoptions to set the language information for the date picker (such as the month name). That doesn't come from Moment, but rather from the initialisation options.Allan
p.s. For Quill - you'd need to use the initialisation options for Quill to set its language options. Which you can access using that plug-in's
optsparameter.Allan
also found a solution for quill now.
1. Translated the toolbar from your plugin
The solution for the datepicker was to translate the i18n Editor defaults. That fixed the issue. I translated all of these options into German now: