引导程序 3 日期选取器月视图

Question

我有一个 ASP.NET 的MVC Web应用程序，并尝试将Bootstrap 3 Datepicker用于我的"月/年"字段，就像这里的演示一样：https://eonasdan.github.io/bootstrap-datetimepicker/#min-view-mode

在该演示中，它只允许用户选择"年"和"月"。不是"天"。我希望我的应用程序中具有相同的功能。但是，在我的应用程序中，它在第一次点击时的工作方式相同，但在后续点击时它会显示"天"选择视图。将视图模式设置为"年"并不能解决问题。

我的模型如下：

public class FilterViewModel
{
    public DateTime? StartMonthYear { get; set; }
    ...

我的观点如下：

<div class="col-sm-3">
    @Html.TextBoxFor(model => model.StartMonthYear, new { @class = "month-picker" })
    ...
<script type="text/javascript">
    $(function () {
        $('.month-picker').datetimepicker({
            viewMode: 'months',
            format: 'MM/YYYY',
            useCurrent: false
        });
    });
</script>

Answer 1

问题是viewMode只设置初始视图。但是，这个特定的库似乎没有提供任何方法来实际限制哪些视图可用。

我个人使用了一个替代库，它确实为您提供了能力。它实际上是一个直接的替代品，因此您不必进行太多更改即可切换。但是，重要的是，它提供了您可以使用的minView/maxView选项：

$(function () {
    $('.month-picker').datetimepicker({
        startView: 'month',
        minView: 'month',
        format: 'mm/yyyy'
    });
});

如您所见，有一些细微的区别：

1. viewMode变得startView.视图名称也是单数的 month vs. months .

2. 格式字符串更类似于 C# 格式，因此应使用小写mm和 yyyy 。

3. 此库的默认值是使用当前日期/时间，因此不需要单独的useCurrent选项。如果要指定不同的开始日期/时间，请使用 initialDate 。

Answer 2

我找到了一个解决方法，效果很好：

$(function () {
    $('.month-picker').datetimepicker({
        viewMode: 'months',
        format: 'MM/YYYY',
        useCurrent: false
    });
    $('.month-picker').on("dp.show", function (e) {
        $(e.target).data("DateTimePicker").viewMode("months");
    })
});

这是基于此处找到的回复。

Answer 3

这是库中的一个错误，现已解决。我遇到了同样的问题，只需下载最新版本即可解决。