Question

我正在使用Bootstrap Datetimepicker在我的页面上显示日历，并选择日期和时间。

我正在这样设置：

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，日历都不起作用。

在控制台上检查错误，我在$dtp.data("DateTimePicker")出现undefined时得出"dp.change"，但只有在defaultDate初始化设置时才会这样做。

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

Answer 1

您只需在dp.change列表器中使用$dtp.data("DateTimePicker")之类的内容检查undefined是否if( $dtp.data("DateTimePicker") )。您还可以使用事件参数，docs说：

更改日期时触发。

参数：

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()和startOf()。

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

1 个答案: