Clear TimePicker display

[Taras]

I have a timepicker defined as follows

@(Html.Kendo().TimePickerFor(model => model.VitalsTime1)
    .Interval(5)
    .Format("HH:mm")
    .Min(DateTime.Now.AddMinutes(-15))
    .Max(DateTime.Now.AddMinutes(15))
    .Events(e =>
    {
        e.Open("vitals1Open");
)
function vitals1Open(e) {
    var vm = window.viewModel;
    var currentDate = new Date();
    var currentTime = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
    vm.set('vitalsTime1', currentTime);
}

The ViewModel is public DateTime? VitalsTime1 { get; set; } while the table definition is Time(7).

I have a button that is supposed to clear a number of fields including the time.  The button click function in part is 

	function clearVitals1(e) {
		var vm = window.viewModel;

                vm.set('vitalsTime1', null);

All of the other fields are cleared but the TimePicker continues to display the time that was previously there.

I tried a couple of things to change the TimePicker but keeping getting the error You cannot override component name when bound to a model expression.

How do I get the TimePicker to clear the value?

[Mihaela]

Hi Taras,

Thank you for the shared code snippets.

To clear the value of the TimePicker control when the button is clicked, I would suggest the following approach:

function clearVitals1(e) {
  var timepickerControl = $("#VitalsTime1").data("kendoTimePicker"); //get an instance of the TimePicker
  timepickerControl.value(""); //set its value to null
}

Would you please give this example a try and let me know if it works for you?

 

Regards, Mihaela Progress Telerik

[Taras]

That worked, thanks.