bootstrap-datepicker简单使用
粗略整理,可能存在其他的方式请大家多多指教
选择年份
html
1 2 3 4 5 6 | <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
1 2 3 4 5 6 7 8 | $( '.yearpicker' ).datepicker({ startView: 'decade' , minView: 'decade' , format: 'yyyy' , maxViewMode: 2, minViewMode:2, autoclose: true }); |
只选择月份:
html
1 2 3 4 5 6 | <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
1 2 3 4 5 6 7 8 | $( '.monthPicker' ).datepicker({ language: "zh-CN" , format: 'mm' , autoclose: true , startView: 'months' , maxViewMode: 'months' , minViewMode: 'months' }); |
另一种是:亲测有效
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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是月 那么也肯定是不可以的
日期时间选择器最高能展示的选择范围视图。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步