在 DateTimePicker 上设置 defaultDate，在事件触发时使用 dtp 中的函数

Question

我正在使用 Bootstrap Datetimepicker 在我的页面上显示日历以及 select 天和小时。

我是这样设置的：

var $dtp = $("#datetimepicker1");
$(function () {
    $dtp.datetimepicker({
        format: 'DD-MM-YYYY HH:00',
        locale: 'pt',
        defaultDate: d,
        minDate: dMin,
        maxDate: dMax
    });
});

我有触发器 "dp.change":

$dtp.on("dp.change", function(e) { 
    d = $dtp.data("DateTimePicker").date().toDate();
});

dMin、dMax 和 d 是日期对象：

var d = new Date(); //actual Date
var dMin = new Date(2012, 0, 1, 0);
var dMax = new Date(); dMax.setDate(dMax.getDate()+2); dMax.setHours(0); //more 2 days

嗯，我需要设置defaultDate，因为有时d会改变，而且不是当前日期，而是dMin和dMax之间的另一个日期。

问题是，无论 d 是否当前，在 datetimepicker 的初始化设置中使用 defaultDate，日历不起作用。

检查错误，在控制台上，当第一个 "dp.change" 出现时，我得出结论 $dtp.data("DateTimePicker") 是 undefined，但只有当我在初始化设置时有 defaultDate 时。

我在解决这个问题时遇到了一些问题。

Answer 1

您可以简单地检查 $dtp.data("DateTimePicker") 是否不是 undefined，在 dp.change listner. You can also use event parameter, as the docs 中使用类似 if( $dtp.data("DateTimePicker") ) 的内容说：

Fired when the date is changed.

Parameters:

e = {
    date, //date the picker changed to. Type: moment object (clone)
    oldDate //previous date. Type: moment object (clone) or false in the event of a null
}

这是一个活生生的例子：

var d = new Date(); //actual Date
var dMin = new Date(2012, 0, 1, 0);
var dMax = new Date();
dMax.setDate(dMax.getDate()+2);
dMax.setHours(0); //more 2 days

var $dtp = $("#datetimepicker1");
$(function () {
    $dtp.datetimepicker({
        format: 'DD-MM-YYYY HH:00',
        locale: 'pt',
        defaultDate: d,
        minDate: dMin,
        maxDate: dMax
    });
});

$dtp.on("dp.change", function(e) {
    // Solution 1: simply check for undefined
    //if( $dtp && $dtp.data("DateTimePicker") ) d = $dtp.data("DateTimePicker").date().toDate();
    if( e.date ){
        d = e.date.toDate();
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<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>

此外，由于组件使用 momentjs，您可以像这样初始化 d、dMin 和 dMax：

var d = moment(); //actual Date
var dMin = moment([2012, 0, 1]);
var dMax = moment().add(2, 'days').startOf('day');

请参阅 moment(), moment(Number[]), add() and startOf() 以获取更多参考。

在 DateTimePicker 上设置 defaultDate，在事件触发时使用 dtp 中的函数

Setting defaultDate on DateTimePicker, with use of functions from dtp on event firing

javascript

jquery

twitter-bootstrap

eonasdan-datetimepicker