我有更新表格。此更新表单具有引导日期时间选择器,它具有如下所示的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。
如何在打开编辑表单时将日期时间设置为日期时间选择器?
答案 0 :(得分: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>