Clear value in datetimepicker field

Question

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

All I need to do is - When the button on the screen is pressed, clear part of the form input field to their original values.

This works fine for all fields except the datetimepicker field.

Here are 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 initialize the 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:

 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 anyone give me the lines (codes) of code that I need to insert in clearActionForm () to clear the START_DATE field to zero.

Thanks.

Answer 1

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

Demo

Answer 2

If you are using 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); 

The following is a demonstration of the use of various 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 3

Assuming you are using the datetimepicker plugin from xdsoft.net/jqplugins/datetimepicker , one quick way to clear the current datetimepicker value would be this:

 $('.form_date').val(''); 

Alternatively (this sets the datetimepicker value at the current time):

 $('.form_date').datetimepicker({ value: (new Date()).toLocaleString() }); 

This value does not match the datetimepicker format, but will be automatically converted to the correct format if datetimepicker is used.

Answer 4

If you are using eonasdan datetimepicker, use the following:

 // clears $j(".form_date").data("DateTimePicker").setDate(null); // updates to now $j(".form_date").data("DateTimePicker").setDate(new Date()); // or update to a given date var myCoolDate = "05/27/1975"; $j(".form_date").data("DateTimePicker").setDate(myCoolDate); 

Answer 5

An easy way to relax the selected date as well as the highlighted date below the concept

 $('#txtWQApprovalDate').datepicker('setDate', null).datepicker('fill');