Bootstrap 3 Datepicker Months 仅查看答案

【问题标题】：Bootstrap 3 Datepicker Months View OnlyBootstrap 3 Datepicker Months 仅查看
【发布时间】：2017-03-31 16:26:52
【问题描述】：

我有一个 ASP.NET MVC Web 应用程序并尝试将Bootstrap 3 Datepicker 用于我的“月/年”字段，就像这里演示中的那个： 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>

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap-3 datepicker

【解决方案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。

【讨论】：

在他们的演示 (eonasdan.github.io/bootstrap-datetimepicker/#min-view-mode) 中，它不仅适用于初始视图，而且适用于成功。感谢您建议替代库。如果一切都失败了，我可能会尝试。
之所以选择当前库，是因为它有这个灵活的时间选择器，我也在应用程序的其他 DateTime 字段中使用它。所以我对你建议的替代日期选择器有点犹豫。
我猜是各有各的。我其实更喜欢其他图书馆的时间选择器。
仔细查看您的库，他们确实调用了一个使用 Min View Mode 的示例，但其代码实际上与通常仅使用 viewMode 没有什么不同。它似乎取决于format 的值，如果格式字符串中未包含部分，则这些部分不可用。但是，这对我的口味来说似乎有点太神奇了，而且您可能只是遇到了逻辑错误。我会联系开发人员和/或在 github 项目上创建问题。
我会尝试联系开发人员。感谢您的帮助。

【解决方案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的回复。

【讨论】：

【解决方案3】：

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

【讨论】：