DateTimePicker locale time format

[philmills]

v2022.09

My locale is set to et-EE (Estonian)
Calendar displays months in Estonian correctly, however the timepicker below the calendar shows the time in AM/PM even though the locale settings show HH:mm

also, first day of the week is Sunday rather than Monday
Where can i change this? Shouldn't this be part of the locale settings?

How can I fix this?

[arbei]

That is an issue of the datetime picker, see https://github.com/Eonasdan/tempus-dominus/issues/2510.

[philmills]

According to the thread at the linkl given I can do this:

new tempusDominus.TempusDominus(#dtpicker1, {
    display: {
        components: {
             useTwentyfourHour: true,
        }
    },
}) 

In the context of PHPMaker I have no idea where to place such code.
Adding useTwentyfourHour: true to the options for the extention made no difference at all.

What was so wrong with the old date/time picker in v2021, that it had to be changed for one that doesn't support 24hr out of the box?

Help?

[arbei]

To add options, see Using Extensions, read the notes of the extension, add your options in JSON syntax.

The old date/time picker was v5, the current version is v6, see the developer's blog.

[philmills]

I've never used JSON syntax, so this is a learning curve which I don't mind usually, except I'm on a deadline.
If I add the option according to JSON syntax as described on https://www.w3schools.com/js/js_json_syntax.asp then i have to use curly brackets and both the variable and value have to be double quoted. Like this:

{"useTwentyfourHour":"true"}

When I do this it totally kills all javascript functionality on the page, so pure JSON syntax is clearly NOT what PHPmaker requires.

Can i get clear instruction please on how to formulate JSON syntax in the context of PHPMaker as an option to the DateTimePicker extension?

Can somoene can try to get 24hr timepicker working with multiple options and post instructions?

I need to add options for:
startOfTheWeek : 1
useTwentyfourHour : true
sideBySide : true

Please can such an example (probably the most common options people will need) be added to the Notes for the extension?

[arbei]

You better refer to the structure of the options in the source.

Make sure that you have the correct JSON format (i.e. with "{" and "}").

Something like:
{ localization : { startOfTheWeek: 1 }, ...}

[philmills]

I was using v2022.09 at start of this thread
now upgraded to v2022.11

I referred to the source and changed the sidebyside value to true

{ components: { useTwentyfourHour: true }, localization: { startOfTheWeek: 1 }, display: { sideBySide: true} }

and pasted it into:
Tools > Extensions > Date/Time Picker > Advanced > Project tab > Options
so it should apply the code globally across my project

I'm testing this on a page that has two date/time fields - start, end

If I apply the code, only the calendar icon for the 'start' field is displayed, and it doesn't function at all.
If i do not apply any code to the Options, The calendar icons display as expected, and they function fine, but with time in AM/PM and first day of the week is Sunday.
Neither of these is correct according to my site's locale settings.

[mobhar]

You may press F12 in your browser, and check whether any Javascript error message in Console section.

[philmills]

tempus-dominus.js:428 Uncaught Error: TD:: ".components" in not a known option.Did you mean "display.components.calendar"?
at ErrorMessages.unexpectedOptions (tempus-dominus.js:462:27)
at l (tempus-dominus.js:1587:45)
at Function.mergeOptions (tempus-dominus.js:1617:13)
at TempusDominus.initializeOptions (tempus-dominus.js:3347:38)
at new TempusDominus (tempus-dominus.js:3142:34)
at Object.jQueryHandleThis (tempus-dominus.js:3539:16)
at S.fn.init.jQueryInterface [as tempusDominus] (tempus-dominus.js:3524:30)
at Object.ew.createDateTimePicker (js\ewdatetimepicker.js:67:12)
at SchoolTripsAdd:4383:8
at o (ewcore.js:85:90)

This is how the options are being rendered in the page:
ew.createDateTimePicker("fSchool_Tripsadd", "x_Trip_Start", jQuery.extend(true, {"useCurrent":false}, options, { components: { useTwentyfourHour: true }, localization: { startOfTheWeek: 1 }, display: { sideBySide: false } }));

[mobhar]

philmills wrote:

tempus-dominus.js:428 Uncaught Error: TD:: ".components" in not a known option.Did you mean "display.components.calendar"?

If you read the error message above, as a matter of fact, it has recommended you to correct the syntax by adding display before component. And if you see your code as follows:
{ components: { useTwentyfourHour: true }, localization: { startOfTheWeek: 1 }, display: { sideBySide: true} }

you missed display before components section.

So, the solutions is you may simply put this code in Options global of DateTimePicker extension:

{ display: { components: { useTwentyfourHour: true } } }, { localization: { startOfTheWeek: 1 } }, {display: {sideBySide: true}}

[philmills]

I'm happy to finally have a solution, and I hope it helps others.

Thank-you

Please can this example be added to the Notes in extension and/or to the manual

[arbei]

mobhar wrote:

{ display: { components: { useTwentyfourHour: true } } }, { localization: { startOfTheWeek: 1 } }, {display: {sideBySide: true}}

1. The JSON syntax is incorrect, it might be better/simpler to provide the extra options as one single object as in the source,
2. The "display" option should be combined as one object,
3. Your approach (multiple objects separated by comma) also works because PHPMaker uses jQuery.extend() which supports merging multiple objects.

[mobhar]

Agreed, and thanks to jQuery.extend(), since we may merge the options both globally from Project level, and also from Fields level.