引导 datetimepicker 动态更改格式

Question

我有一个函数，用于在某些事件发生时更新 Bootstrap 日期时间选择器的格式。我第一次单击 datetimepicker 时，它使用新格式来呈现选择器。例如，如果我将格式设置为YYYY，它只会显示年份。但是，如果我关闭日期选择器并再次打开它，那么它会呈现完整的日历。我做错了什么，还是日期时间选择器的错误？

function updateInterval(interval) {
    $('#interval').val(interval);
    if (interval === 'LAST24') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss');
    } else if (interval === 'HOURLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'DAILY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'WEEKLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY');
    } else if (interval === 'MONTHLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY');
    }
}

根据文档，它看起来很简单，所以不确定我做错了什么。

Answer 1

您的代码很好，它是 Eonasdan 的 bootstrap-datetimepicker 的最新版本的 known bug。您可以尝试按照 github 链接中的建议在组件代码中设置 currentViewMode = 0; 或使用旧版本，例如 4.17.37，如下面的工作 sn-p 所示：

var jq182 = $;
function updateInterval(interval) {
    $('#interval').val(interval);
    if (interval === 'LAST24') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss');
    } else if (interval === 'HOURLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'DAILY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'WEEKLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY');
    } else if (interval === 'MONTHLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY');
    }
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date" id="endDatePicker">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

<button type="button" class="btn btn-default" onclick="updateInterval('LAST24')">LAST24</button>
<button type="button" class="btn btn-default" onclick="updateInterval('HOURLY')">HOURLY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('DAILY')">DAILY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('WEEKLY')">WEEKLY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('MONTHLY')">MONTHLY</button>

<input type="text" id="interval" class="form-control" readonly>

Here 和 here 遇到相同问题的人。