web-dev-qa-db-ja.com

datetimepickerフィールドの値をクリアします

これは単純で、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.

}

したがって、START_DATEフィールドをnullにクリアするために、clearActionForm（）に挿入する必要のあるコード行を誰かに教えてもらえますか。

ありがとう。

javascriptjquerydatetimepicker
5
RagD

この行を使用してください$('.form_date').data("DateTimePicker").clear()

デモ

7
J Santosh

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'>
2
Whitecat

xdsoft.net/jqplugins/datetimepicker のdatetimepickerプラグインを使用しているとすると、datetimepickerの現在の値をクリアする簡単な方法の1つは次のとおりです。

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

別の方法として（これにより、datetimepickerの値が現在の時刻に設定されます）：

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

この値はdatetimepickerの形式と一致しませんが、datetimepickerが使用されると自動的に正しい形式に変換されます。

1
Pi Programs

選択した日付と強調表示された日付を以下の概念で休める簡単な方法

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

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);
0
tibc-dev