我正在尝试利用tempusdominus-datetimepicker-3在我的html表单中创建日期时间选择器。
但是，我需要能够从中获取所选日期。该插件有一个名为date的选项，根据文档应该返回一个时刻对象或null。以下是该文件对此选项的说法
返回组件的模型当前日期，
moment对象或nullif 没有设置
但是，我正在努力访问date选项。
同样来自doc
注意所有选项均可通过
data属性访问，例如$('#datetimepicker').datetimepicker(OPTION, ARGUMENT)
所以我尝试了以下方法来访问日期选项。
from = $('#datetimepicker').datetimepicker('date');
from = $('#datetimepicker').datetimepicker('data', 'date');
from = $('#datetimepicker').datetimepicker('data').date;
from = $('#datetimepicker').datetimepicker(function(e){
return e.date;
});
但以上都没有返回对象。如何访问日期对象？
我认为像这样的好插件会有更可读的选项，例如getDate()，setDate(date)，getFomat()和setFormat(...)等;或事件的例子，这应该消除像这样的问题，但不幸的是它没有。
答案 0 :(得分：8)
以下是访问事件的正确代码：
$(function() {
$('#datetimepicker').datetimepicker();
$('#datetimepicker').on("change.datetimepicker", function (e) {
console.log(e.date);
});
});
你也可以使用它来获取日期：
var date = $('#datetimepicker').datetimepicker('viewDate')
答案 1 :(得分：2)
如果有人遇到与我相同的麻烦（使用bootstrap v4 https://tempusdominus.github.io/bootstrap-4/），并且想要关闭选择器时的日期，请输入以下代码：
$(function () {
$('#datetimepicker').datetimepicker();
$('#datetimepicker').on("datetimepicker.hide", function (e) {
console.log(moment(e.date).format('YYYY-MM-DD HH:mm'));
});
});
请注意，在这种情况下，datetimepicker位于hide之前，与change之前的datetimepicker不同。使用hide.datetimepicker将无效。
答案 2 :(得分：1)
也许我错了，但我解释的方式＆＃34;注意所有选项都是通过数据属性访问的，它表示以下列格式访问这些功能
$("#YOU_SELECTOR").data('DateTimePicker').FUNCTION();
如果您尝试console.log($("#YOU_SELECTOR").data('DateTimePicker'));
您会看到它会通过are accessible属性打印所有显示data的功能，我将在下面打印一些
{
"destroy": function () {
H(), I(), i.widget.remove(), i.element.removeData("DateTimePicker"), i.component && i.component.removeData("DateTimePicker")
},
"show": function (a) {
if (!l().prop("disabled")) {
if (i.options.useCurrent && "" === l().val()) {
if (1 !== i.options.minuteStepping) {
var c = b(),
d = i.options.minuteStepping;
c.minutes(Math.round(c.minutes() / d) * d % 60).seconds(0), i.setValue(c.format(i.format))
} else i.setValue(b().format(i.format));
o("", a.type)
}
a && "click" === a.type && i.isInput && i.widget.hasClass("picker-open") || (i.widget.hasClass("picker-open") ? (i.widget.hide(), i.widget.removeClass("picker-open")) : (i.widget.show(), i.widget.addClass("picker-open")), i.height = i.component ? i.component.outerHeight() : i.element.outerHeight(), n(), i.element.trigger({
type: "dp.show",
date: b(i.date)
}), G(), a && B(a))
}
},
"disable": function () {
var a = l();
a.prop("disabled") || (a.prop("disabled", !0), H())
},
"enable": function () {
var a = l();
a.prop("disabled") && (a.prop("disabled", !1), F())
},
"hide": function () {
var a, c, d = i.widget.find(".collapse");
for (a = 0; a < d.length; a++)
if (c = d.eq(a).data("collapse"), c && c.transitioning) return;
i.widget.hide(), i.widget.removeClass("picker-open"), i.viewMode = i.startViewMode, E(), i.element.trigger({
type: "dp.hide",
date: b(i.date)
}), I()
},
"setValue": function (a) {
b.locale(i.options.language), a ? i.unset = !1 : (i.unset = !0, K()), a = b.isMoment(a) ? a.locale(i.options.language) : a instanceof Date ? b(a) : b(a, i.format, i.options.useStrict), a.isValid() ? (i.date = a, K(), i.viewDate = b({
y: i.date.year(),
M: i.date.month()
}), t(), x()) : p(a)
},
"getDate": function () {
return i.unset ? null : b(i.date)
},
"setDate": function (a) {
var c = b(i.date);
i.setValue(a ? a : null), o(c, "function")
},
"setDisabledDates": function (a) {
i.options.disabledDates = O(a), i.viewDate && q()
},
"setEnabledDates": function (a) {
i.options.enabledDates = O(a), i.viewDate && q()
},
"setMaxDate": function (a) {
void 0 !== a && (i.options.maxDate = b.isMoment(a) || a instanceof Date ? b(a) : b(a, i.format, i.options.useStrict), i.viewDate && q())
},
"setMinDate": function (a) {
void 0 !== a && (i.options.minDate = b.isMoment(a) || a instanceof Date ? b(a) : b(a, i.format, i.options.useStrict), i.viewDate && q())
}
.............. and more,
请点击下面的链接，在演示中调用getDate()。您可以在更改日期后进行检查以进行验证。
$(document).ready(function() {
var picker = $('#datetimepicker7').datetimepicker();
//console.log(picker.datetimepicker('data-view-date'));
//console.log($('#datetimepicker7').datetimepicker('data-show'));
$("#tog").on('click', function() {
//console.log($('#datetimepicker7').data('DateTimePicker'));
console.log($('#datetimepicker7').data('DateTimePicker').getDate());
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class="input-group date" id="datetimepicker7" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" />
<span class="input-group-addon" data-target="#datetimepicker7" data-toggle="datetimepicker">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<a href="#." id="tog">toggle</a>
</div>