DateTimePicker always start with the TimePicker on 00:00

[tatjana19]

Hello @sebfz1 i try to set the value(for instance 14:00) from the TimePicker but it always start at 00:00.

The same behavior is on the demo. Is this behavior known, or do i something wrong?

[sebfz1]

Hi Tatjana,

I need some more details/clarifications: you say you changed the value (the model then) but that the TimePicker starts at 0:00 (this is the range, with min and max option [1]). That's 2 different things, or I did not understand you properly...

Thanks, Sebastien.

[1] http://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker#configuration-min

[tatjana19]

With value i mean that whats documented in the Kendo ui and here.

In wicket i set the value over the Options for set the value of the TimePicker to 10:30:

IModel<Date> dateModel = Model.of(new Date(2017, 2, 8, 10, 30, 0));

DateTimePicker dp = new DateTimePicker("dp", dateModel, "dd.MM.yy", "HH:mm") {

    @Override
    protected TimePicker newTimePicker(String id,
            IModel<Date> model, Locale locale,
            String timePattern, Options options) {
        options.set("value", "new Date(2017, 2, 8, 10, 30)");
        TimePicker timePicker = super.newTimePicker(id, model, locale, timePattern, options);
        return timePicker;
    }

}

but the TimePicker starts on '00:00' and not as expected ad '10:30'. Is this the wright

[sebfz1]

Hi Tatjana,

You don't have to deal with the value option, but with the Model object. But your code snippet looks good and should display/select 10:30 (don't have to override #newTimePicker then)

But still, I don't understand what you mean by "the TimePicker starts on '00:00'". Do you mean 0:00 is the selected time? Or it is the first time available in the selection (the range, then) ? You can copy/paste a screenshot here, so I better see? Also note that if the selected time is not part of the selection slots (ie 10:35, it will not be visually selected)

http://www.7thweb.net/wicket-jquery-ui/kendo/datetimepicker/KendoDateTimePickerPage

Thanks, Sebastien.

[tatjana19]

Hi Sebastien but in the Model object it is already set. On the demo site is the same behavior.

[sebfz1]

Tatjana, I've updated the previous comment (sent it too quickly) with some questions for you

[sebfz1]

Here is what I've in the demo, which looks normal to me:

[tatjana19]

Here some answers for the questions you asked:

Do you mean 0:00 is the selected time? The selected time is right. But when you click the button you expect that the time will be shown, not even the first but it start always on 00:00 when you click the button.

Or it is the first time available in the selection (the range, then) ? It doesnt matter what the selected time is the starting point when the dropdown starts is 00:00.

You can copy/paste a screenshot here, so I better see?

[sebfz1]

Thanks for the answer Tatjana, I think I've got what you mean now.

As I said in my previous answer, when the selected date (ie: the value/model object) is not a date available in the choice list (ie: 14:28), it will not be selected (because it does not exists) and then the list of choice is displayed, starting from the top/first, ie 0:00. But if the model object is 14:00 then it should be selected in the choice list (as in my screenshot).

Now you can argue that it would have been great that the displayed range of time on open is around the current the time value. But it is actually not in my hands, the kendo demo behave the same way: http://demos.telerik.com/kendo-ui/timepicker/index

[tatjana19]

In the docs stands:

value

Gets or sets the value of the TimePicker. Parameters value Date |String

The time value to set for a TimePicker, expressed as a Date object or as a string. Returns

Date The time value of a TimePicker.

This method does not trigger change event. This could affect MVVM value binding. The model bound to the widget will not be updated. You can overcome this behavior trigerring the change event manually using trigger("change") method.

<input id="timepicker" />
<script>
$("#timepicker").kendoTimePicker();

var timepicker = $("#timepicker").data("kendoTimePicker");
timepicker.value(new Date(2016, 10, 1));
timepicker.trigger("change");
</script>

So how you can call this Trigger in the wicket component if the value Option is set

[sebfz1]

Tatjana, I'm confused. I think this is an attempt to overwhelm my brain... :)

So, let's recap, and please tell me where you disagree: 1/ you set the date/time through the model object. 2/ the date/time appear correctly in the textbox 3/ if the time corresponds to one in the choice list (like 14:30), that time is selected in the choice list, likely in the middle of the visible time-range (screenshot 1) 4/ if the time do not corresponds to one in the choice list (like 14:32), the time is not (and cannot be) selected in the choice list, and then the visible time-range start at the begining, ie: 0:00. (screenshot 2)

Are we clear with the points above? If yes, what do you expect by setting the value and triggering the change event? Changing the behavior of point 4/ ?

Screenshot 1:

Screenshot 2:

[tatjana19]

Sebastien first of all i want to tell you that a great project and thank you for your fast response.

1/ yes i set the model object over a PropertyModel and at the start it is null. 2/ yes the date/time appear correctly in the textbox. yes correctly. 3/ at the start not cause its null but when the PropertyModel changes (like 14:30) and the component is shown i want that if i open the choice list that the value(14:30) is selected. 4/ this is not the case.

Are we clear with the points above? yes

If yes, what do you expect by setting the value and triggering the change event? yes how do i trigger the change event?

Changing the behavior of point 4/ ? How can i do this? Im new with wicket-jquery-ui.

One question more. Which is the best way to set the min and the max option in the TimePicker?

[sebfz1]

You're welcome, Tatjana! The most important is that we success in understanding each other... :)

Your model should be up-to-date and maintained server side. So, if your model is null at the beginning, when does it change to 14:30? Is it client side only (in that case, it's wrong) or server side in an onInitialize/onConfigure for instance, before the page rendering? Or even set after an ajax call by another component?

In general to set options in widget components, there is 2 ways:

• either the component provides an Options argument (quite all widget components)
• and/or you can set the option(s) in onConfigure(JQueryBehavior behavior) { behavior.setOption... }. This is valid for all widget components, and allows to override an exiting/previously-set option.

Now, for the time-picker of the datetime-picker it's a little bit different because the datetime-picker is an association of 2 widgets components (date-picker and time-picker), so to supply options to the time-picker widget you have to override #newTimePicker, and set the options here:

@Override
protected TimePicker newTimePicker(String id, IModel<Date> model, Locale locale, String timePattern, Options options)
{
    options.set("min", Options.asString("14:00"));
    // eq to options.set("min", "'14:00'"); 

    return super.newTimePicker(id, model, locale, timePattern, options);
}

[tatjana19]

I see the Options is final and have no get method. Is there a reason why?

[sebfz1]

You never have to reinstanciate the options object, either you supplied an options object to a widget component, or a default options will be created. Then, just use that existing object (in #newTimePicker, #onConfigure(JQueryBehavior), etc), like the code snippet I provided in my last comment...