Bootstrap Datepicker - 仅限月份和年份

Posted 2023-05-08

【中文标题】Bootstrap Datepicker - 仅限月份和年份

【英文标题】：Bootstrap Datepicker - Months and Years Only

【发布时间】：2013-02-05 03:10:17

【问题描述】：

我正在使用引导日期选择器，我的代码如下，jsfiddle上的代码演示

<div class="input-append date" id="datepicker" data-date="02-2012" 
     data-date-format="mm-yyyy">

 <input  type="text" readonly="readonly" name="date" >    
 <span class="add-on"><i class="icon-th"></i></span>      
</div>      


$("#datepicker").datepicker(
        viewMode: 'years',
         format: 'mm-yyyy'
    );

上面的代码运行良好，但我想做的是只允许用户选择月份和年份。

你能告诉我怎么做吗？

【问题讨论】：

我只使用两个选择框...这比使用日历小部件并尝试隐藏实际日历更有意义。

即使有jsfiddle.net/Kz2sW/1 这样的选项，你还会使用两个选择框吗？ :)

【参考方案1】：

这个怎么样：

$("#datepicker").datepicker( 
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
);

参考：Datepicker for Bootstrap

---

对于 1.2.0 及更新版本，viewMode 已更改为 startView，因此请使用：

$("#datepicker").datepicker( 
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
);

另见the documentation。

【讨论】：

谢谢，但我不得不用 format: "mm-yyyy" 替换 format: " mm" 。它现在工作:)

如果您在format: " mm-yyyy", 中的mm-yyyy 之前保留一个空格，它不会在几个月和几年之间显示-，您能否再次编辑您的答案？

完美。非常感谢。

根据文档，我认为 viewMode 不是一个有效的选项。但其他选项允许所需的显示工作。

有自动关闭选项吗？

【参考方案2】：

请注意，在 1.2.0 版本中，viewMode 已更改为 startView。

例如：

$('#sandbox-container input').datepicker(
  startView: 1,
  minViewMode: 1
);

http://eternicode.github.io/bootstrap-datepicker/?markup=component&format=yyyy&weekStart=&startDate=&endDate=&startView=2&minViewMode=2&todayBtn=false&language=zh-CN&orientation=auto&autoclose=on&forceParse=on#sandbox

【参考方案3】：

我使用的是版本 2（同时支持 bootstrap v2 和 v3），对我来说这是可行的：

$("#datepicker").datepicker( 
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
);

【讨论】：

将minView更改为minViewMode

【参考方案4】：

对于最新的bootstrap-datepicker（撰写本文时为1.4.0），您需要使用这个：

$('#myDatepicker').datepicker(
    format: "mm/yyyy",
    startView: "year", 
    minViewMode: "months"
)

来源：Bootstrap Datepicker Options

【讨论】：

在引导程序中单击月份，它显示日期，然后以 mm/yy 格式输入文本

【参考方案5】：

我将引导日历用于未来日期，不允许更改月份和年份..

var j = jQuery.noConflict();
        j(function () 
            j(".datepicker").datepicker( dateFormat: "dd-M-yy" ).val()
        );

        j(function () 
            j(".Futuredatenotallowed").datepicker(
                changeMonth: true,
                maxDate: 0,
                changeYear: true,
                dateFormat: 'dd-M-yy',
                language: "tr"
            ).on('changeDate', function (ev) 
                $(this).blur();
                $(this).datepicker('hide');
            ).val()
        );

【参考方案6】：

您应该只需要在 datepicker 函数中添加 minViewMode: "months"。

【参考方案7】：

要查看当年的月份，并且只查看月份，请使用这种格式 - 它只需要当年的月份。它也可以被限制，以便显示一定数量的月份。

<input class="form-control" id="txtDateMMyyyy"  autocomplete="off" required readonly/>

<script>
('#txtDateMMyyyy').datetimepicker(
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
).datetimepicker("setDate", new Date());
</script>

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

Se agrego una pequeña decripcion de lo que hace el codigo

【参考方案8】：

您好，如果您只想获得年份，这将对您有所帮助

  $('.date-own').datepicker(
     minViewMode: 2,
     format: 'yyyy'
   );

【参考方案9】：

为什么不调用$('.input-group.date').datepicker("remove");当更改SELECT语句时，将DESPICKER视图设置为$('.input-group.date').datepicker("update");