How can I set the format of the JQuery-UI date picker custom binding in KnockoutJS ?

Question

I'm trying to bind an HTML input element with a ISO 8601 formatted date and that needs to show up in the 'dd/mm/yyyy' format.

How can I specify that format when the date picker is a custom binding in KnockoutJS ?

Answer 1

If you have the correct binding handler for integrating JQuery DatePicker into KnockoutJS, all options should be put inside a "datepickerOptions" binding like this:

<span data-bind="datepicker: myDate, 
                 datepickerOptions: { 'dateFormat': 'dd/mm/yy' }"></span>

Additionally, if you are to use this formatting at multiple places, you may want to think about putting this date format string inside an observable property in your view model, which you could then use like this:

<span data-bind="datepicker: myDate, 
                 datepickerOptions: { 'dateFormat': $root.config.dateFormat }"></span>

... which means that the format string is bound in the config.dateFormat property starting from the root.