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

如果您使用此引导程序组件：https://github.com/Eonasdan/bootstrap-datetimepicker 您可以通过以下方式参考日期：

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

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

将值设置为时间戳（24/11/2017 11:41:41 ==＆gt;时间戳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>

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

1 个答案: