bootstrap的日历插件datetimepicker可以下回调函数中设置显示的视图吗?

Question

我的日历现在是嵌在网页当中,我现在再年视图上选中一个年份,他就会直接跳转到日视图,,,,我
不想让他跳转,看了一下datetimepicker的API,貌似有一个viewSelcet可以进行设置,
于是就设置了一下,可是还是不行,没有办法实现我的需求,,,,

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使用Bootstrap的datetimepicker来改变其默认行为并使其仅在特定年份下选择时才切换至月/日视图，请遵循以下步骤：

1. 首先，在您的HTML文件中添加<script>标签以引入Bootstrap和jQuery库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

1. 在HTML模板中包含datetimepicker：

<div class="form-group">
    <label for="exampleDateInput">Select a year:</label>
    <input type="text" class="form-control datetimepicker-input" id="exampleDateInput" placeholder="Select a year">
</div>

请注意，这里我们已经为datetimepicker设置了输入框类名，并且使用了datetimepicker-input作为自定义ID。

1. 接下来，在JavaScript中创建事件处理程序来监听用户对日期的选择。当用户点击输入框时，调用showDateTimePicker方法并将year参数设置为当前年份。

$(document).ready(function() {
    $('#exampleDateInput').on('change', function() {
        var selectedYear = $(this).val();
        showDateTimePicker(selectedYear);
    });
});

function showDateTimePicker(year) {
    // 按照需要修改这些参数
    $('.datetimepicker').datetimepicker({
        locale: 'zh-CN',
        format: 'YYYY-MM-DD',
        todayBtn: true,
        autoclose: true,
        startView: 2,
        minView: 2,
        viewMode: 0,
        todayHighlight: true,
        language: 'zh-CN'
    });

    // 设置年选择器的值
    $('select#year-selector').val(year);

    // 如果选择了年，那么切换到月/日视图
    if (selectedYear !== '') {
        $('select#month-day-view').prop('checked', true);
    }
}

以上代码将根据所选年份更改datetimepicker的显示方式。如果未指定年份，则会保持当前的月份/日视图。通过这种方式，您可以确保只在用户选择年份时才会触发转换。