bootstrap-datepicker简单使用

粗略整理,可能存在其他的方式请大家多多指教

选择年份

html

<div class="dropdown">
                    <label class="search-label">选择年份</label>
                    <div class="input-daterange input-group">
                        <input type="text" class="input-sm yearpicker" name="year" />
                    </div>
                </div>

　js　

 $('.yearpicker').datepicker({
            startView: 'decade',
            minView: 'decade',
            format: 'yyyy',
            maxViewMode: 2,
            minViewMode:2,
            autoclose: true
        });

只选择月份：

html

<div class="input-group col-md-4">
                        <span class="input-group-addon">月份</span>
                        <div class="input-daterange input-group">
                            <input type="text" class="form-control input-sm monthPicker" name="month12"/>
                        </div>
                    </div>

js

$('.monthPicker').datepicker({
        	language: "zh-CN",
            format: 'mm',
            autoclose: true,
            startView: 'months',
            maxViewMode:'months',
            minViewMode:'months'  
        });

　　另一种是：亲测有效

 <div class="input-group">
                <span class="input-group-addon">月份</span>
                <input type="text" class="input-sm form-control monthPicker" name="startTime"/>
            </div>
 
$('.monthPicker').datepicker({
        	language: "zh-CN",
        	 format: "yyyy-mm",
        	 autoclose: true,
        	 startView:2,
        	 minView:2,
        	 maxViewMode:4,
        	 minViewMode:1
        });

　　另外有几个属性要解释一下：

format

String. 默认值: 'mm/dd/yyyy'

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

• p : meridian in lower case ('am' or 'pm') - according to locale file
• P : meridian in upper case ('AM' or 'PM') - according to locale file
• s : seconds without leading zeros
• ss : seconds, 2 digits with leading zeros
• i : minutes without leading zeros
• ii : minutes, 2 digits with leading zeros
• h : hour without leading zeros - 24-hour format
• hh : hour, 2 digits with leading zeros - 24-hour format
• H : hour without leading zeros - 12-hour format
• HH : hour, 2 digits with leading zeros - 12-hour format
• d : day of the month without leading zeros
• dd : day of the month, 2 digits with leading zeros
• m : numeric representation of month without leading zeros
• mm : numeric representation of the month, 2 digits with leading zeros
• M : short textual representation of a month, three letters
• MM : full textual representation of a month, such as January or March
• yy : two digit representation of a year
• yyyy : full numeric representation of a year, 4 digits

 

weekStart

Integer. 默认值：0

一周从哪一天开始。0（星期日）到6（星期六）

startDate

Date. 默认值：开始时间

The earliest date that may be selected; all earlier dates will be disabled.

endDate

Date. 默认值：结束时间

The latest date that may be selected; all later dates will be disabled.

autoclose

Boolean. 默认值：false

当选择一个日期之后是否立即关闭此日期时间选择器。

startView

Number, String. 默认值：2, 'month'

日期时间选择器打开之后首先显示的视图。 可接受的值：

• 0 or 'hour' for the hour view
• 1 or 'day' for the day view
• 2 or 'month' for month view (the default)
• 3 or 'year' for the 12-month overview
• 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值：0, 'hour'  1, 'day'  2, 'month'  3,'year'  4 ,'10-year'

日期时间选择器所能够提供的最精确的时间选择视图。

maxView

Number, String. 默认值：4, 'decade' 表示最大的视图 比如最大可以看到10年的视图 最大可以看到一年的视图  如果你设置为年 而你希望开始展示的视图是十年 那么肯定就不行 如果你设置为天  而你希望你的minView是月 那么也肯定是不可以的

日期时间选择器最高能展示的选择范围视图。