Bootstrap Datepicker-仅限月份和年份


122

我正在使用bootstrap datepicker,我的代码如下所示,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'
    });

上面的代码工作正常,但是我想做的是允许用户仅选择月份和年份。

您能告诉我该怎么做吗?


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

6
即使您有类似jsfiddle.net/Kz2sW/1这样的选项,您仍然会使用两个选择框吗?:)
black_belt

Answers:


271

这个怎么样 :

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

参考:Bootstrap的Datepicker


对于1.2.0及更高版本,viewMode已更改为startView,因此请使用:

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

另请参阅文档


1
谢谢,但我不得不替换format: " mm"format: "mm-yyyy"。它现在正在工作:)
black_belt

1
它不显示的-几个月和几年间,如果你之前保持一个空间mm-yyyyformat: " mm-yyyy",,你能不能再请编辑您的答案吗?
black_belt

完善。非常感谢你。
Tigin

根据文档,我认为viewMode不是有效的选项。但是其他选项允许所需的显示起作用。
Prathamesh Datar

有自动关闭的选项吗?
Alauddin Ahmed


4

我正在使用版本2(同时支持bootstrap v2和v3),对我来说,这可行:

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

更改minViewminViewMode
Raghavendra N

3

对于最新版本bootstrap-datepicker(在撰写本文时为1.4.0),您需要使用以下代码:

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

来源:Bootstrap Datepicker选项


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

1

我正在为将来的日期使用引导式压光机,不允许仅在月份和年份中进行更改。

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()
        });


0

视觉上的视觉上的真实性,视觉上的视觉上的个性,视觉上的自我形像。坦比斯旅游学院

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

5
感谢您提供此代码段,它可能会提供一些有限的即时帮助。通过说明为什么这是一个很好的解决方案,正确的解释将大大提高其长期价值,对于其他有类似问题的读者来说,这样做将更为有用。请编辑您的答案以添加一些解释,包括您所做的假设。
Ismael Padilla

马可

-1

为什么$('.input-group.date').datepicker("remove");在select语句更改后不调用,然后设置日期选择器视图,然后调用$('.input-group.date').datepicker("update");

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.