Clear the value in a datetimepicker field

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.

Answers:

Answer

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

Demo

Answer

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

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

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

As an alternative (this sets the value of the datetimepicker to the current time):

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

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

Answer

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

Easy way to rest the selected date as well as highlighted date by below concept

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.