Clear the value in a datetimepicker field

Question

I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.

All I need to do - is - When a button on the screen is clicked, clear some of the input field on the form back to their original values.

This is working fine, for all fields except a datetimepicker field.

Here is the relevant bits of code, that defines the input field :

<div class='form-group' id='START_DATEFormGroup'>    
<label for='START_DATE' class='col-sm-2 control-label' data-toggle='tooltip' data-placement='top' title=''>Start Date</label>
<div class='col-sm-8'>
<div class='input-group date form_date col-sm-3'  data-date-format='dd M yyyy' data-link-field='START_DATE' data-link-format='yyyy-mm-dd'>
<input class='form-control' size='16' type='text'  />
<input type='hidden' id='START_DATE' name='START_DATE' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'>
</span> // group-addon
</span> // calendar
</div> // form_date
</div> // col-sm-8
</div> // form-group

I am initializing datetimepicker as follows :

function enableDatepicker(){
    $( document ).ready(function() { 
         $('.form_date').datetimepicker({
            format: 'dd M yyyy',
            minView: 2,
            autoclose: 1,
            })
    });
} 

To clear the input fields down I have :

function clearActionForm(){
     // code here to clear the various input fields to null or their initial values.
     // Need statements to clear the datetimepicker field to null.

}

So, can someone give me the line(s) of code I need to insert into clearActionForm() in order to clear the START_DATE field to null.

Thanks.

Answer 1

If you are using the eonasdan datetimepicker use the following:

// clears
$("#form_date").data("DateTimePicker").date(null);

// updates with date
$("#form_date").data("DateTimePicker").date(new Date());

// or update with string
var myCoolDate = "27 05 1975";
$("#form_date").data("DateTimePicker").date(myCoolDate);

// or update with a moment
 var moment = moment().add(2, 'd');
$("#form_date").data("DateTimePicker").date(moment);

Below is a demo of using different types of changes.

$(function() {
  $('#datetimepicker1').datetimepicker({
    format: 'dd M YYYY',
  });
});

$('#clear').click(function() {
  $("#datetimepicker1").data("DateTimePicker").date(null);
})

$('#date').click(function() {
  var sysdate = new Date();
  $("#datetimepicker1").data("DateTimePicker").date(new Date());
})

$('#string').click(function() {
  var myCoolDate = "27 05 1975";
  $("#datetimepicker1").data("DateTimePicker").date(myCoolDate);
})

$('#moment').click(function() {
  var now = moment().add(2, 'd');
  $("#datetimepicker1").data("DateTimePicker").date(now);
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>



<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<input type='button' id='clear' Value='Clear Date'>
<input type='button' id='date' Value='Set with date'>
<input type='button' id='string' Value='Set with string'>
<input type='button' id='moment' Value='Set with moment'>

Answer 2

use this line $('.form_date').data("DateTimePicker").clear()

Demo