单击按钮时切换 DateTimePicker 视图

Question

我在我的项目中使用 DateTimePicker 3 Bootstrap 作为我的日历。如果单击某些按钮，我需要将日期时间选择器视图从 'month to date' 或 'date to month' 切换。我尝试使用 jQuery 但它根本不起作用。请检查我是否在代码中有错误。

我当前的标记和脚本代码：

<script>
$(document).ready(function(){
    $("#Month").click(function () {
        $('#datetimepicker3').datetimepicker({
            format: 'M-YYYY',
            maxDate: 'now'
        });
    });
    $("#Date").click(function () {
        $('#datetimepicker3').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: 'now'
        });
    });
});
</script>

<div class="form-group">
    <div class='input-group date' id='datetimepicker3'>
        <input type='text' class="form-control" name="date" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
</div>

我想要的结果：

Answer 1

要更改视图模式，您只需使用 viewMode 选项即可。

您可以使用默认配置（天或月）初始化日期选择器，然后使用 viewMode and format 函数更改选项。

您可以使用以下代码作为示例：

// Init datetimepicker with default config
// (if you want date config change format: 'DD-MM-YYYY' and viewMode: 'days')
var picker = $('#datetimepicker3').datetimepicker({
  format: 'M-YYYY',
  maxDate: 'now',
  viewMode: 'months'
});

$("#Month").click(function () {
  picker.data("DateTimePicker").format('M-YYYY');
  picker.data("DateTimePicker").viewMode('months');

});
$("#Date").click(function () {
  picker.data("DateTimePicker").format('DD-MM-YYYY');
  picker.data("DateTimePicker").viewMode('days');

});

<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"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.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.13.0/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="form-group">
  <div class="input-group date" id="datetimepicker3">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
  </div>
</div>
<div class="form-group">
  <button id="Month" class="btn btn-default">Month</button>
  <button id="Date" class="btn btn-default">Date</button>
</div>

单击按钮时切换 DateTimePicker 视图

Switch DateTimePicker view when button is clicked

jquery

twitter-bootstrap

bootstrap-datetimepicker