Bootstrap Datepicker - 仅限月份和年份

时间:2013-02-20 07:24:00

标签: jquery twitter-bootstrap

我正在使用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'
    });

上面的代码工作正常,但我要做的是允许用户只选择几个月和几年。

你能告诉我怎么做吗?

9 个答案:

答案 0 :(得分:242)

这个怎么样:

$("#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

答案 1 :(得分:6)

请注意,在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

答案 2 :(得分:5)

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

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

答案 3 :(得分:4)

对于最新的bootstrap-datepicker(撰写本文时为1.4.0),您需要使用:

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

来源:Bootstrap Datepicker Options

答案 4 :(得分:1)

我正在使用bootstrap日历用于将来的日期,不允许在几个月内允许更改&amp;一年只有..

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

答案 5 :(得分:1)

您必须在日期选择器功能中添加minViewMode: "months"

答案 6 :(得分:0)

实际的视觉障碍,视觉障碍和视觉障碍。坦比斯旅游咨询公司

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

答案 7 :(得分:0)

你好,如果你只想得到一年,这对你有帮助

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

答案 8 :(得分:-2)

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