Forums

Hi! We use a datepicker on a form field. We can format the days/months on the datepicker by using this in the extra attributes field of the datepicker:

data-days:Z, M, D, W, D, V, Z
data-monthsShort:Jan, Feb, Mar, Apr, Mei, Jun, Jul, Aug, Sep, Okt, Nov, Dec
data-months:Januari, Februari, Maart, April, Mei, Juni, Juli, Augustus, September, Oktober, November, December

But how do we change the date and time settings on the next calendar screen after we pick a date? See attached screenshot. We would like to change the date above the list with times, and also change the time formatting to 24 hour with no AM/PM.

Can we do this by adding some extra attributes?

In general: What datepicker is used in CF6? Is there some online documentation for this datepicker and all the options? Or is this a custom datepicker for CF?

Kind regards,
Jip

Hi Jip,

Chronoforms v6 uses this datepicker:
https://github.com/mdehoog/Semantic-UI-Calendar

I think both are possible but this will need some customization!

best regards

Thanks Max. I took a look at the repository bit do not find any parameters I can use to get what I need...

Do you have any suggestions how to get this done? Maybe I need to change the calendar JS somewhere? Where can I find this?

Any help is very much appreciated.

Kind regards,
JIp

Hi Max, I decided to not use the time, only the date in the form I am working on. So we'll save this issue for a next time ;-) Thanks anyway.

Kind regards,
Jip

Hii Max, it turns out I do need the time to be filled out....

I found out there is an option to set the time to am/pm or not. In the calendar.min.js script there is a setting 'ampm:!0'. When I cange this to 'ampm:!1' the AM.PM is not shown and the 24 hours are shown.

I believe this option can be set like with this option parameter:

ampm: false

I think this is set to true by default.

Would it be possible to change this setting using javascript at the top of the form? Or maybe you could add this to the datepicker form element?

Kind regards,
Jip

Hi! I can add extra parameters to the datepicker. I tried

data-ampm="false"

But that did not work.

I used these lines to get the coorect date formatting and names:

data-days:Z, M, D, W, D, V, Z
data-monthsShort:Jan, Feb, Mar, Apr, Mei, Jun, Jul, Aug, Sep, Okt, Nov, Dec
data-months:Januari, Februari, Maart, April, Mei, Juni, Juli, Augustus, September, Oktober, November, December

That works OK but data-ampm="false" of data-ampm=false does not do the trick.

Maybe there is a way to add some js to the form to trigger this setting?

I see this post is labeled with a 'Connectivity v6' label. Tha t should have been 'Chronoforms V6'.

Hi! To cahnge the parameters of the calendar popup I got this suggestion from someone at the fatepicket Gothub


.calendar({
ampm: false,
monthFirst: false
});

The thing is... I don't know if I can use this somewhere in a CF6 form? Could this be added to the top of the form using a custom code field? How?

Or could you make it possible to add these settings to the datepicker field itself?

I am mostly interested in the 'ampm' setting and the 'monthFirst' setting.

But other users might need to add other available configuration options / parameters to the datepicker.

If this is not possible I hav figured out where to change the default settings in the calendar.min.js file (libraries/cegcore2/assets/semantic-ui/calendar/calendar.min.js). Just search for 'ampm' and 'monthFirst' and you'll find 'ampm:!0' and 'monthFirst:!0'. Then change the 0 to 1 and the default is changed to not use AM/PM and show the month after the date in the 'hour' view of the datepicker.

But any updates to the cegcore2 library (including this file) will override this 'hack'. So this is not a very desirable solution. But it will do the trick if there are no other options to set this in CF6.

If there are suggestions how to get this done in the CF6 Form, please let me know. A great solution would be if Max could add some kind op parameter field to the datepicker field. Similar to the field where we can add day and month names. But if this can also be done using custom code at the to of the form, that would also be an good solution.

Kind regards,
Jip

Hi Jip,

Apologizes for the late reply and thank you for posting the solutiom!

starting from the next update you should be able to add:

data-ampm:false
data-monthfirst:false

To to the "Extra attributes" box in the calendar field to change this in the field settings itself

Best regards