Question

我有一个函数，当一些事件发生时，我用它来更新Bootstrap datetimepicker的格式。我第一次点击datetimepicker，它利用新格式渲染选择器。例如，如果我将格式设置为YYYY，则仅显示年份。但是，如果我关闭日期选择器并再次打开它，那么它将呈现完整的日历。我做错了什么，或者这是datetimepicker的错误？

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，如以下工作代码段所示：

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有同样问题的人。

Bootstrap datetimepicker动态更改格式

1 个答案: