Set datepicker value to empty

Question

I have a list of form for user to input. All the form have the same input that user need to fill in. And there is a next button to go to the next form. So basically the flow is like this: User fill in the first form, click next button will go to second form and so on. So i just reuse the input for all the form. I do a save first after that reset the input field for the next form.

Everything work fine except the datepicker field, I'm using Kendo Datepicker. I reset it like this:

$('#datepicker').data('kendoDatePicker').value("");

Even thought the field show nothing, but when i save, it always set the previous input date into it.

So anyone know how to solve this?

Answer 1

Simply use $("#datepicker").val('');

See JsFiddel http://jsfiddle.net/x4dA9/775/

ADD: Using Model: jsFiddel

Answer 2

<input type="text" name="datefilter" value="" />

<script type="text/javascript">
$(function() {

  $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

Answer 3

After resetting the Kendo UI jquery datepicker with the line...

datepicker.value('')

the input mask is lost. To keep the input mask, reset the format option on the control...

$("#clearSystemUsageToBtn").click(function (e) {
    var datepicker = $("#DateToK").data("kendoDatePicker");
    datepicker.value('');
    datepicker.setOptions({ format: "dd/MM/yyyy" });
});