javascript - 清除日期时间选择器字段中的值

Question

我确信这很简单，但我对 jquery/javascript 的理解阻碍了我 - 但我无法让它工作。

我需要做的就是 - 当点击屏幕上的按钮时，将表单上的一些输入字段清除回它们的原始值。

这对于除 datetimepicker 字段之外的所有字段都工作正常。

这是定义输入字段的相关代码位:

<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

我正在初始化 datetimepicker 如下:

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

要清除输入字段，我有:

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.

}

所以，有人可以给我需要插入 clearActionForm() 的代码行，以便将 START_DATE 字段清除为 null。

谢谢。

Answer 1

如果您使用的是 eonasdan datetimepicker使用以下内容:

// 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);

下面是使用不同类型更改的演示。

$(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'>