Calendar only supports US style date format

[brian-d]

Repro:

1. Change your browser's calendar settings to something besides en-US (e.g.: de-DE for German)
2. Set up a basic Calendar component (or just visit the one at [whatsock.com])(http://whatsock.com/bootstrap/)
3. Select a date from the calendar

Expected: Date is formatted according to the user's locale Actual: Date is stuck in US style date format

I believe the problem here lies in accdc_bootstrap.js. This line:

targ.value = ('0' + (dc.range.current.month + 1)).slice(-2) + '/' + ('0' + dc.range.current.mDay).slice(-2) + '/' + dc.range.current.year;

That's going to slice things up MM/DD/YYYY without a real nice way of overriding it. I can think of a couple solutions.

One, instead of setting targ.value, create a new Date object from those values. Then you can call toLocaleDateString and set that on targ.value.

Second, Allow an optional override function somehow instead. For instance...

targ.value = $A.dateParse
        ? $A.dateParse(dc.range.current)
        : ('0' + (dc.range.current.month + 1)).slice(-2) + '/' + ('0' + dc.range.current.mDay).slice(-2) + '/' + dc.range.current.year;

And let the user set $A.dateParse to their method of choice.

[accdc]

Hi,

That’s an excellent idea! I’m ccing @dannyakakong here too since he is helping out with some significant improvements to the calendar module and he might find this of interest as well.

From: Brian Dahl [mailto:notifications@github.com] Sent: Tuesday, February 20, 2018 4:56 PM To: WhatSock/bootstrap-jquery bootstrap-jquery@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Subject: [WhatSock/bootstrap-jquery] Calendar only supports US style date format (#5)

Repro:

1. Change your browser's calendar settings to something besides en-US (e.g.: de-DE for German)
2. Set up a basic Calendar component (or just visit the one at [whatsock.com])(http://whatsock.com/bootstrap/)
3. Select a date from the calendar

Expected: Date is formatted according to the user's locale Actual: Date is stuck in US style date format

I believe the problem here lies in accdc_bootstrap.js. This line:

targ.value = ('0' + (dc.range.current.month + 1)).slice(-2) + '/' + ('0' + dc.range.current.mDay).slice(-2) + '/' + dc.range.current.year;

That's going to slice things up MM/DD/YYYY without a real nice way of overriding it. I can think of a couple solutions.

One, instead of setting targ.value, create a new Date object from those values. Then you can call toLocaleDateString https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString and set that on targ.value.

Second, Allow an optional override function somehow instead. For instance...

targ.value = $A.dateParse ? $A.dateParse(dc.range.current) : ('0' + (dc.range.current.month + 1)).slice(-2) + '/' + ('0' + dc.range.current.mDay).slice(-2) + '/' + dc.range.current.year;

And let the user set $A.dateParse to their method of choice.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/WhatSock/bootstrap-jquery/issues/5 , or mute the thread https://github.com/notifications/unsubscribe-auth/ABx1aEuvdIMhQF4G9A9YcnL7c5b1_orXks5tW2mkgaJpZM4SM6je . https://github.com/notifications/beacon/ABx1aH3IJDARGm5MOPBKd1mtoT8BtMiZks5tW2mkgaJpZM4SM6je.gif

[dannya]

@brian-d @accdc I actually already have a solution for this locally (in a wrapper I wrote around the AccDC Calendar module to make integration into my own project easier.

I'm considering integrating it into the AccDC module itself in my current changes (which will drop in the next couple of weeks). In its current form, you can set the following parameters:

dateFormatSeparator: '/', inputDateFormat: 'DD/MM/YYYY', regexDateFormat: '^[0-9]{2}[/][0-9]{2}[/][0-9]{4}$', audibleDateFormat: 'D, MMMM YYYY (dddd)'

then, I've added some plumbing inside the callback that takes the format specified in inputDateFormat and formats the values into it:

targetElementObj.value = myWrapper.formatDate({ 'YYYY': dc.range.current.year, 'MM': ('00' + (dc.range.current.month + 1)).slice(-2), 'DD': ('00' + dc.range.current.mDay).slice(-2) });

This way, we can extend it very easily with new tokens to even enable formats like "Wednesday 22nd January 2018" etc.

I'm not a fan of using the browser-native functions like toLocaleDateString because: a) it's not guaranteed between browsers if they are available or what their output will be b) websites usually want to provide a consistent experience to users (ie. output the same date format across the site)

...so doing it in my proposed way above provides for this.

[accdc]

That sounds great to me!

I’ll be happy to pull it in when complete, plus please edit the ReadMe file as needed within the TSG Coding Arena so that general usage instructions are available, then I can port this into all of the mirror projects such as the live pages at whatsock.com/tsg amongst others. Plus I’ll be adding credit information within each of these sections referencing you as the author of these updates.

The more these projects evolve with beneficial contributions from others, the more widely it will be possible for integrated accessible technologies to propagate, so thank you again for all of your work! :)

From: Danny Allen notifications@github.com Sent: Monday, March 05, 2018 1:28 AM To: WhatSock/bootstrap-jquery bootstrap-jquery@noreply.github.com Cc: Bryan Garaventa bryan.garaventa@whatsock.com; Mention mention@noreply.github.com Subject: Re: [WhatSock/bootstrap-jquery] Calendar only supports US style date format (#5)

@brian-d https://github.com/brian-d @accdc https://github.com/accdc I actually already have a solution for this locally (in a wrapper I wrote around the AccDC Calendar module to make integration into my own project easier.

I'm considering integrating it into the AccDC module itself in my current changes (which will drop in the next couple of weeks). In its current form, you can set the following parameters:

dateFormatSeparator: '/', inputDateFormat: 'DD/MM/YYYY', regexDateFormat: '^[0-9]{2}[/][0-9]{2}[/][0-9]{4}$', audibleDateFormat: 'D, MMMM YYYY (dddd)'

then, I've added some plumbing inside the callback that takes the format specified in inputDateFormat and formats the values into it:

targetElementObj.value = myWrapper.formatDate({ 'YYYY': dc.range.current.year, 'MM': ('00' + (dc.range.current.month + 1)).slice(-2), 'DD': ('00' + dc.range.current.mDay).slice(-2) });

This way, we can extend it very easily with new tokens to even enable formats like "Wednesday 22nd January 2018" etc.

I'm not a fan of using the browser-native functions like toLocaleDateString because: a) it's not guaranteed between browsers if they are available or what their output will be b) websites usually want to provide a consistent experience to users (ie. output the same date format across the site)

...so doing it in my proposed way above provides for this.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/WhatSock/bootstrap-jquery/issues/5#issuecomment-370359072 , or mute the thread https://github.com/notifications/unsubscribe-auth/ABx1aDMy_46W0GhpipnpWxjsKFVcBf4Zks5tbQUrgaJpZM4SM6je . https://github.com/notifications/beacon/ABx1aLynlenL6L79SdxgEkA5oxzeIJFlks5tbQUrgaJpZM4SM6je.gif

[dannya]

@accdc @bryan-d my solution for this is in pull request: https://github.com/WhatSock/bootstrap/pull/6/commits/2ce2c4387279827afaa7d25d444a5387887a6a24

[accdc]

Awesome! Sorry for the delay, I was gone all last week at the CSUN conference and have been dealing with the backlog this week. I’ll pull all of these changes in by Friday and begin conversions for porting these into all of the other projects!

From: Danny Allen notifications@github.com Sent: Wednesday, March 21, 2018 4:01 AM To: WhatSock/bootstrap-jquery bootstrap-jquery@noreply.github.com Cc: Bryan Garaventa bryan.garaventa@whatsock.com; Mention mention@noreply.github.com Subject: Re: [WhatSock/bootstrap-jquery] Calendar only supports US style date format (#5)

@accdc https://github.com/accdc @bryan-d https://github.com/bryan-d my solution for this is in pull request: WhatSock/bootstrap@ https://github.com/WhatSock/bootstrap/commit/2ce2c4387279827afaa7d25d444a5387887a6a24 2ce2c43

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/WhatSock/bootstrap-jquery/issues/5#issuecomment-374900572 , or mute the thread https://github.com/notifications/unsubscribe-auth/ABx1aHTCfrTc4syZb8KFntQL6t3IeFC7ks5tgjLzgaJpZM4SM6je . https://github.com/notifications/beacon/ABx1aEyj48OwGHHN4rxtjkLkjLSzai6Bks5tgjLzgaJpZM4SM6je.gif