Question

我有一个ASP.NET MVC网络应用程序并尝试使用Bootstrap 3 Datepicker作为我的“月/年”字段，就像这里的demo中的那个： https://eonasdan.github.io/bootstrap-datetimepicker/#min-view-mode

在该演示中，它只允许用户选择“年”和“月”。不是“天”。我想在我的应用程序中使用相同的功能。但是，在我的应用程序中，它在第一次单击时的工作方式相同，但是在成功点击后，它会显示“天数”选择视图。将viewMode设置为'years'并不能解决问题。

我的模型如下：

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仅设置初始视图。但是，似乎这个特定的库没有提供任何方法来实际限制哪些视图可用。

我个人使用了alternate libary，这确实可以帮助你。它实际上是一个替代品，所以你不必改变太多来切换。但重要的是，它提供了您可以使用的minView / maxView选项：

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

正如您所看到的，存在一些细微差别：

viewMode变为startView。视图名称也是单数month与months。
格式化字符串更类似于C＃格式，因此您使用小写mm和yyyy。
此库的默认设置是使用当前日期/时间，因此不需要单独的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");
    })
});

这是基于找到的回复here。

Answer 3

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

Bootstrap 3 Datepicker Months仅查看

3 个答案: