When applying value binding, the value won't apply display format option set in options.

[chateauv]

When applying value binding, has below: on thise fiddle example: http://jsfiddle.net/W75rx/38/, the value won't apply display format option set in options when we select a different time. If we "re"select the time previously selected, the display format option is then applied. Please advice on how to fix this issue, Thank you!

[wvega]

@chateauv, I'm not sure I understand the problem you are describing. The selected value and the bound value are always in sync for me:

The value bound is always a Date object, so the format is never applied. Sun Dec 31 1899 19:50:35 GMT-0600 (CST) is the representation of the Date object that corresponds to the selected value in the TimePicker.

Do you want Sun Dec 31 1899 19:50:35 GMT-0600 (CST) to show like 19:50:35 PM? If not, could you please try to give me a bit more information about what you expect and how is the plugin doing it wrong? A screenshot would help.

[chateauv]

Hi Willingteon, thanks for the quick reply. To see the issue I am referring to, you can cut-and-paste the following code : into your fiddle example (of course you need to replace by the code I just provided above). You can notice that I just added ", value: time" right after "timepicker: time " in your code. Once you do this modification to your fiddle example, test your dropdown select button and change time selection and look at how the input field bahave.

Hope this clarify how to reproduce the behaviour, but creatnly feel free to let me know if you need more details. Thank you

[wvega]

@chateauv thank you. I see the issue now. Although I'm not sure how to solve it right now.

Can I ask you why do you need to use value binding? The TimePicker plugin already updates the value of the input field, and the timepicker binding already updates your model. Perhaps there is a different approach to get the result you want.

[chateauv]

We want to be able to totally clear the value of hte observable when we delete it. Currently when the value is deleted within the input field, the observable is not cleared but set to false, while there are no value in the input.

[wvega]

I understand. I think the fact that the plugin passes false to the time-change event when the input is empty, is a bug. I'll have to think about a solution, but since there may be users that rely on that behaviour, solving the problem outside the TimePicker's code is better for now.

I have updated code in the JSFiddle: http://jsfiddle.net/wvega/W75rx/39/, so that you can control the value of the observable when the input field is empty.

The relevant section is shown below:

                if ( time === false ) {
                    observable( 'enter the value when input is empty here!' );
                } else if (current - time !== 0) {
                    observable(time);
                }

Change 'enter the value when input is empty here!' to an empty string, null, or the value you want to store in the observable when the input field is empty.

I hope it helps. Let me know if I understood your situation correctly.

[chateauv]

Yes you got it right. thanks for the workaround it works well.

[chateauv]

Would it be possible to change or add the possibility for the observable to get the value in a time format instead of a date type. Its get complicated to retrieve the time outside the custom binding, since we lose access to the object options such as timeFormat, ..... Would be nice to actually have the displayed value as the current value of the observable.

[wvega]

@chateauv: having the formatted time as the value of the observable makes sense. To be honest, I created that fiddle to show that it was possible to use the TimePicker with Knockout.js, but didn't spend too much time thinking about usage escenarios. That's why all the feedback I've received from you today is very important.

I think this new fiddle does what you want: : http://jsfiddle.net/wvega/W75rx/40/. You can see the diff of the modifications I made here: https://www.diffchecker.com/2f6j2pyq.

Right now I don't have a solution to pass both the Date object and the string representation of the selected time entry to the view model. However, I would like to have that possibility in an official Knockout.js binding for the TimePicker.

[chateauv]

Glad to help in some way! ;) The modifications to the latest fiddle work perfectly.
Thank you for your support, it works great!

[chateauv]

another question...your documentation refer to an option called "defaultTime", but not sure if its working correctly. We tried to set it up in the options but it doesn't seems to be working. Can you clarify how to use this option ?

[wvega]

@chateauv you need to use version 1.3.2 to have access to that option. Which version are you using?

The idea is to pass a Date object, a time string such as '8:20am' or the special string 'now' as the defaultTime option. However, setting the default time using that option won't update the initial value on your view model.

In this case, I think the best approach to set a default time is to pass a value to the observable bound to the TimePicker (time in the fiddle above). The code in fiddle already pass a default value to the observable, which is why the input always starts at 14:20:35 PM.

Let me know if that helps.