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

使用此行$('.form_date').data("DateTimePicker").clear()

Demo

Answer 2

如果您使用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'>

Answer 3

假设您使用xdsoft.net/jqplugins/datetimepicker中的datetimepicker插件，清除datetimepicker当前值的一种快速方法如下：

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

作为替代方法（这会将datetimepicker的值设置为当前时间）：

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

此值与datetimepicker的格式不匹配，但在使用datetimepicker时会自动转换为正确的格式。

Answer 4

如果您使用的是eonasdan datetimepicker，请使用以下命令：

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

通过以下概念轻松休息所选日期以及突出显示的日期

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

清除datetimepicker字段中的值

5 个答案: