在没有刷新页面，jquery，ajax的ajax发布成功后重置datepicker

Question

I have html like this

<div class="col-md-3">
<div id="date" data-date-format="dd-mm-yyyy"> </div>
</div>
<input id="datehidden" type="text" name="berlaku" value="">

and javascript like this

var day = new Date();
   $('#date').datepicker({
     inline: true,
     sideBySide: true,
     startDate: day,
    }).on('changeDate',function (e) {
      value = e.format('yyyy-mm-dd');
      $('#datehidden').val(value);
    });

when i finished input a data to database i need to reset the form blank even my datepicker, i just try this

$('#date').datepicker({setDate: null});

it doesn't work, i search with google and stackoverflow still didn't see best answer. would you help me?

Answer 1

You should use the datepicker's event to update the date to empty or some specific value: $('#date').datepicker("update", '');

In case you want to destroy the datepicker you can use : $('#date').datepicker("destry");

Answer 2

I haven't found a simple and nice way to do it, so what I actually do is this:

When I call the jQuery function from my HTML, I actually erase the content within the div (where the date input is located) and then I insert it once again with a jQuery .append() and well that works actually good!

//erase the content of div date1
var div = document.getElementById('date1');
while(div.firstChild){
    div.removeChild(div.firstChild);
}

//erase the content of div date2
var div = document.getElementById('date2');
while(div.firstChild){
    div.removeChild(div.firstChild);
}

$("#date1").append("<span class='input-group-addon' data-toggle='tooltip' title='Fecha fin de la movilidad'><b>FF</b></span><input type='text' name='fecha_1_reg' id='fecha_1_reg' placeholder='Ej: 2017-01-31'/>");
$("#date2").append("<span class='input-group-addon' data-toggle='tooltip' title='Final date'><b>FF</b></span><input type='text' name='fecha_2_reg' id='fecha_2_reg' placeholder='Ej: 2017-01-31'/>");

In the HTML:

<td align='center'>
    <div id="date1" class='input-group col-xs-3'>
        <span class='input-group-addon' data-toggle='tooltip' title='First date'><b>FI</b></span>
        <input type='text' name='fecha_1_reg' id='fecha_1_reg' placeholder='Ej: 2017-01-01' />
    </div>
</td>
<td align='center'>
    <div id="date2" class='input-group col-xs-3'>
        <span class='input-group-addon' data-toggle='tooltip' title='last date'><b>FF</b></span>
        <input type='text' name='fecha_2_reg' id='fecha_2_reg' placeholder='Ej: 2017-01-31' />
    </div>
</td>