Display a date and send another

[Vadorequest]

Hi. I'm wondering if there is a way to display a date with a format 'dd/mm/yyyy' and send a date with 'yyyy/mm/dd' when the form is submitted.

[johnallers]

I would find this feature useful as well.

There was a very brief discussion here: https://groups.google.com/d/topic/bootstrap-datepicker/ncKfpwEjXpQ/discussion

[Vadorequest]

Thanks for the workaround until this is featured.

[mansouralex]

@johnallers does this feature available now?

[acrobat]

Yes, in the formatoption you have a toFormat and toDisplay method to alter dislay and save format of the date

See the formatoption docs

[mansouralex]

@acrobat Thanks, that's great.

[mansouralex]

@acrobat could you provide an example for formatting?

For example: toDisplay dd-mm-yyyy
toValue yyyy-mm-dd

Thank you.

[acrobat]

@abibell can you give some support on how to implement this usecase with the toDisplay and toValue options?

[mansouralex]

I'm trying the example in the docs but I noticed that both the displayed and submitted value are the toDisplay one. @acrobat any thoughts on this?

[mansouralex]

@acrobat @abibell my first query has been solved using what is suggested here: 1622#issuecomment-217636379

[abibell]

Great. Let me know if you need further help @acrobat

[mansouralex]

@abibell any suggestion for the issue that submitted value are the toDisplay value? Thanks.

[abibell]

I am not sure if I understand your question exactly @mansouralex. Say we have a date DT and this is the date we want to store in API/DB. However you want the date to be displayed to user in different format, then you use toDisplay(dt) to convert to string.

To convert back to DT we write a toValue()

What is your particular situation. If the date is DT, how do you want it to be displayed? How do you want it to be persisted (API/DB)? Maybe i can do a code snippet for you.

P.S: in the docs the example shows two different functions (+ & -) for toDisplay() and toValue() indicating that user will always be shown a week behind than what is stored

[mansouralex]

@abibell Thanks for your reply. What I'm looking for is to display the date in this format dd-mm-yyyy which I have already done using toDisplay(). What I need is that the sent to the server date format to be in yyyy-mm-dd.

The following is my code

$.fn.datepicker.defaults.format = ({
            toDisplay: function (date, format, language) {
                var date = new Date(date),
                        month = '' + (date.getMonth() + 1),
                        day = '' + date.getDate(),
                        year = date.getFullYear();
                if (month.length < 2) month = '0' + month;
                if (day.length < 2) day = '0' + day;
                return [day, month, year].join('-');
            },
            toValue: function (date, format, language) {
                var date = new Date(date),
                        month = '' + (date.getMonth() + 1),
                        day = '' + date.getDate(),
                        year = date.getFullYear();
                if (month.length < 2) month = '0' + month;
                if (day.length < 2) day = '0' + day;
                return [year, month, day].join('-');
            }
        });

At the moment the sent value to the server is the same as displayed value which is in dd-mm-yyyy

[abibell]

Your toValue() has code new Date(date) which will take dd-mm-yyyy and attempt to create date object. Depending on browsers regional settings it will convert it based on dd-mm-yyyy or mm-dd-yyyy. I think you need to fix this. I would use momentjs library to do this work for us (I prefer reuse over redo).

[mansouralex]

@abibell I got your point. Thanks for clarifying this.

Could you help on this - on how to use momentjs to fix this issue?

[abibell]

toDisplay(dt) { return moment(dt).format("dd-MM-yyyy"); } toValue(dt) { return moment(dt, "dd-MM-yyyy").to date(); }

Lookup momentjs on google for the API and to get started.

[mansouralex]

@abibell Thanks for your help. Will be trying it shortly.

[mansouralex]

@abibell Still the same result.

Both displayed and sent date are in the same format which is DD-MM-YYYY

$.fn.datepicker.defaults.format = ({ toDisplay: function (dt) { return moment(dt).format("DD-MM-YYYY"); }, toValue: function (dt) { //return moment(dt).format("MM-DD-YYYY").toDate(); return moment(dt, "MM-DD-YYYY").toDate(); } });

Any suggestions?

[abibell]

Then you must be sending toDisplay to your server side API. You should send the toValue.

Place a working plunkr somewhere. So someone can help.

On Wed, 18 May 2016, 1:43 AM mansouralex notifications@github.com wrote:

@abibell https://github.com/abibell Still the same result.

Both displayed and sent date are in the same format which is DD-MM-YYYY

$.fn.datepicker.defaults.format = ({ toDisplay: function (dt) { return moment(dt).format("DD-MM-YYYY"); }, toValue: function (dt) { //return moment(dt).format("MM-DD-YYYY").toDate(); return moment(dt, "MM-DD-YYYY").toDate(); } });

Any suggestions?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/eternicode/bootstrap-datepicker/issues/888#issuecomment-219759963

[castamir]

this should be working (according to docs), but it is NOT. http://jsfiddle.net/shhb5La2/15/

this issue is duplicated in #1622 and #1679

[abibell]

Design of Datepicker component contains

1. HTML textbox with value which displays the date in human readable format.
2. There is a date value (aka parseDate()) internally represented in the Datepicker component

When we say $('#out').val($('#myDate').val());, we said take the HTML textbox value and assign it to out textbox value using jQuery. So it is doing as expected, just copy the value. What you probably wanted to do was to display the date value in out textbox. You can do that by correcting the DD.MM.YYYY conversion to ISO function and using it in onchange

$('#myDate').on('change', function() {
  $('#out').val(moment($('#myDate').val(), 'DD.MM.YYYY').toISOString());
});

See Updated JSFiddle

P.S Your toValue() didn't appear to be executed as you don't seem to have a use case for it. ISO does convert to UTC/ISO timezone too.

[castamir]

@abibell thanks for your response, but it isn't the answer. It's just a workaround for this issue (or maybe bug).

I used another input just for value visualization. I could use alert() or document.white() or console.log() as well, but it won't change the result. What I actually need is different format for display and different format for real value of the input and that is exactly what I've defined in datepicker options (according to docs).

How can I call toValue()? I've expected $('#myDate').val() to be working...

[abibell]

1. You need to display the date in user friendly format. - variable 1.
2. You want to store the value - variable 2.

Sounds like you are hoping one simple type variable will do that job. For now use two variables. I will enhance the documention so we can avoid the misinterpretation that you currently have.

[castamir]

So format.toValue() is not working right now (or the way I've expected). I'll call custom format function toValue() explicitly, then. It's clear now, thanks.

P.S. updating documentation would be nice

[cloudcaptain]

@castamir Can you post a complete example of how you got this to work? That is, how did you display one value and submit another? Thanks.

[castamir]

Right now, I'm using angular2 custom form component that uses datepicker's api to open and hide a datepicker and retrieve its value. I could create a plunker, but not now, because I am on my way to the work right now.

Maybe tonight or tomorrow morning

[castamir]

http://plnkr.co/edit/2B6j1l9kkVsWrb1QCY6H?p=preview

It's simplified than I actualy use it (complete use-case would contain a lot of other stuff that is not related to this). I did not fixed styles or checked if date is valid.

[Azaret]

Well actually the documentation is not wrong, but the implementation does not make much sense. To sum up easily, toValue is for handling date from outside to the js core (a parse function in another words), toDisplay is from the js core to the outside (a format function).

Where the implementation fail is that the plugin when something is written in the input, it goes through toValue, because it needs to be parsed. But at the same time, when a date is selected and the date need to be displayed in the picker and on the input, it needs to be formatted, so it goes through toDisplay.

Meaning that if you have different format between toValue and toDisplay the picker will only work once, the second time toValue will fail to parse your date.

This will be completely makeover in the 2.0 which would come hopefully soon. In the meantime what I suggest anyone to do if to use 2 inputs, one for display/typing, one for storing the format you truly desire. Use toValue and toDisplay, but let them have the same format, and into toDisplay you can add a line to set the date in the required format inside your secondary hidden input.