javascript - 未将日期时间值设置为 Bootstrap DatetimePicker

Question

我有更新表格。这个更新表单有引导日期时间选择器，它有如下 html 代码:

<div class="input-group date" id="startdateandtime" value="Thu Jul 25 1997 00:00:00">
  <input required="" type="text" class="form-control">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

我想在打开编辑表单时设置此选择器的任何日期和时间。 但是我的 jquery 函数不起作用。并且未为此日期时间选择器设置值。我像下面这样使用 jquery:

$('#startdateandtime').datetimepicker({
    date: new Date(1434544882775)
});

$("#startdateandtime").datetimepicker("update", new Date(1434544882775));

$("#startdateandtime").datepicker("setValue", "02-17-2012");

$('#startdateandtime').datepicker({
   onSelect: function () {
       $('#startdateandtime').text(new Date(1434544882775));
   }
});

所有上述 jquery 函数都不起作用。所以我不能设置任何 日期时间到编辑表单中的选择器。

我使用 Bootstrap 日期时间选择器。 Bootstrap DateTimePicker css 和 js 源文件。他们的版本是 4.7.14。

打开编辑表单时如何将任何日期时间设置为日期时间选择器？

Answer 1

如果您正在使用此 Bootstrap 组件:https://github.com/Eonasdan/bootstrap-datetimepicker 您可以通过这种方式引用date 函数:

将选择器中的值设置为当前日期时间:

$("#startdateandtime").data("DateTimePicker").date(new Date());

将值设置为时间戳(24/11/2017 11:41:41 ==> 时间戳 1511520101020):

$("#startdateandtime").data("DateTimePicker").date(new Date(1511520101020));

将值设置为日期字符串:

$("#startdateandtime").data("DateTimePicker").date("30/11/2017 11:30");

参见 http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date

---

这是一个工作片段:

$('#datetimepicker1').datetimepicker(
  {
    format: "DD/MM/YYYY HH:mm:ss", 
    toolbarPlacement: 'top',
    showClear: true, 
    showClose: true, 
    sideBySide: true
  }
);

$(document).ready(function() {
  $("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
})

function setTs() {
  $("#datetimepicker1").data("DateTimePicker").date(new Date(1511520101020));
}

function setNow() {
  $("#datetimepicker1").data("DateTimePicker").date(new Date());
}

function setDateStr() {
  $("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css">

<div class="row">
    <div class="col-md-4">
      <div class="panel-body">
        <form id="srcForm" data-toggle="validator">
          <div class="row">
            <div class="form-group col-xs-12">
              <label>Date</label>
              <div id="datetimepicker1" class="input-group">
                <input type="text" class="form-control" name="from">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
        </form>
        <div class="search-footer">
          <button type="button" class="btn btn-primary btn-search" onclick="setTs()">Set Date To TS</button>
          <button type="button" class="btn btn-primary btn-search" onclick="setNow()">Set Date To Now</button>
          <button type="button" class="btn btn-primary btn-search" onclick="setDateStr()">Set Date To Date String</button>
        </div>
      </div>
    </div>
</div>