FR: Separate store and display formats support.

[afanasy]

Hi,

Would be great to have an option to store date in one format (my db format YYYY-MM-DD, mysql) but display the picker to the user in the local format 'M/D/YY' (US). And when he changes the date I want input.val() become YYYY-MM-DD again (so I can save it to the db).

Thanks for the great lib!

[kevin-brown]

👍

We were looking to use this as a drop-in polyfill for the native date input type, but that requires ISO 8601 dates. And those look terrible when displaying them to users.

[Eonasdan]

there's an option for extraFormats which allows users to input d/t without being so strict. You could also listen for the change event and format that value to however you need it.

[kevin-brown]

extraFormats is useful if we want to accept an alternate format from the server or user and submit the displayed format (as generated by bootstrap-datetimepicker) back, and it's currently how we are getting around the issue. But it's not actually a solution.

With extraFormats, you can allow for multiple formats to be accepted by the user (or the default value), but format still determines what is displayed to the user and sent to the server.

I'm looking for a serverFormat (or displayFormat) option that controls how the value is sent to the server, so the user can see their localized times but the server still gets ISO 8601 (or some other format) sent to it. This would also allow the user to modify the value of the displayed date to match what they are looking for, and have the converted format sent to the server.

Right now we would have to do this with a hidden input that is sent to the server, but this breaks our original plan of using this only for when the browser didn't support the native date (Firefox/Edge) and datetime (everyone) input formats.

[afanasy]

Yes, exactly, it's just separating localized/displayed (which is different from country to country) date format from internal date format (which is database specific). Of course this can be worked around either by reformatting the date on the client or on the server, but this is very inconvenient.

[Eonasdan]

so again, if you had serverFormat or something similar how is that different from getting the change event or accessing .data(...').date()?

[afanasy]

No difference, just shortcut method.

[kevin-brown]

It's important to note that bootstrap-datetimepicker isn't always used in a JS-only environment, where the data is retrieved from the form ahead of time and sent to the server outside of the standard HTML form submission flow. Sometimes the data is actually sent to the server through a form submission, which is where I think this becomes important.

how is that different from getting the change event or accessing .data(...').date()?

Right now, even when using the change event or .data('').date() to get the current date, it doesn't change the fact that once the form data is submitted to the server it uses the display format.

The difference here is that the server would be receiving a specific format, possibly different from the format displayed to the user. In order to do this right now one would have to hook into the submit event emitted by the form and normalize the date sent to the server before the data was sent.

[afanasy]

Yes, that's how I'm doing it now, I hook in on the submit event.

[Fruchtgummi]

I had already tried with extraFormats, but doesn't work!

Here my Option:

$('.datepicker').datetimepicker({
locale: 'de',
format: 'YYYY-MM-DD LT',
extraFormats:['DD.MM.YYYY LT'],
});

MY HTTP-POST REGUEST

myArray[von]:2015-06-25 23:00 <-- why?

If extraFormats would have worked, would have to request it to be so:

myArray[von]:25.06.2015 23:00

Yeah, well, what's wrong?

[Eonasdan]

@Fruchtgummi extraFormats allows for multiple formats to be valid from the user. It will not change the format you get on post.

@afanasy it wouldn't be a shortcut method, you'd just be looking for a different function name

@kevin-brown I use this picker in my .Net MVC apps all the time.

You'll have to hook into the submit event, set the primary format to the way you need it to be server side, or you'll have to convert it server side to the format you need. You're asking me to force a hook into a form submit event.

I don't know what else to tell you.

[afanasy]

There should be another way, other than hooking in the form submit.

[ChrisHacker]

I was looking for the same requested feature and found this thread. Here's the use case for us. We store all dates in ISO format. We want to display in a variety of human readable formats which i'm clear the format option allows us to do. However, the datepicker instance doesn't both persistently store the converted ISO value as the actual input value and make both the display and submit value formats available to the DOM for calculations and printing.

[MatTheCat]

I'm facing the same issue. You don't need to listen to the form submit event; see jQueryUI altField and altFormat. Could this be implemented?

[afanasy]

Thanks @MatTheCat , altFormat is exactly what is needed!

[MatTheCat]

Just to be clear, altFormat requires altField. The trick is to instantiate the datepicker on a visible field (which name attribute is optional) and to make altField reference a hidden input which will be sent to the server.

[afanasy]

Hm, with altField it's still nice, but not as attractive, since you'll need to create additional field to manage this. But it's better than form submit hook probably.

[MatTheCat]

I think it's better too, and the main point is that it can be managed by the datepicker.

EDIT: maybe altField isn't needed after all. The datepicker would have to remove the current field's name and add a hidden field with this name?

[mtozlu]

Adding to use cases;
I display the dates in localized format, so there are utf8 strings and all. And these values get posted to server when the users submits the form. I manually have to parse these utf8 display strings into dates and believe me, its a real pain.

However, if; "displayFormat" and "valueFormat" parameters were different, i would simply set valueFormat to iso8601 standart and displayFormat to my localized moment strings.

I hope i am clear.
Thanks.

[afanasy]

@1dot44mb, the problem is that there is no easy way to implement this, without hooking into form submit. Otherwise the use case seems to be very frequent.

[Eonasdan]

@1dot44mb I don't want to touch your form anymore then I have. If you want to post a different format then the input, grab the .date() from the picker and format it however you'd like with a form submit hook.

It shouldn't be up to this library to do that for you.

[MatTheCat]

You don't need to listen to the form submit event; see jQueryUI altField and altFormat. Could this be implemented?

[Eonasdan]

Once again, but why? Why do I need to duplicate functions that already exist? If you want a different format to a different field, listen to the change event and set the input value to whatever you want.