datetimerpicker插件实现只选择当天、当月
好些时候,我们会用到时间插件,如datetimeroicker,基本的初始化官方文档都有详细介绍http://www.bootcss.com/p/bootstrap-datetimepicker.
这里简单的介绍下基本用法:
$('#timer').datetimepicker({ format: 'yyyy-mm-dd',//时间格式 language: 'zh-CN', weekStart: 1,//周几开始 // todayBtn: 0,//显示今天 autoclose: 1,//自动关闭 todayHighlight: 0,//高亮显示今天 startView: 2,//开始视图 minView: 0,//最小视图 maxView: 2,//最大视图 minuteStep: 10,//分钟步进值 forceParse: 0,//强制解析输入框的值 initialDate: false })
当我们不需要全部时间,对时间进行限定时,在初始化时我们需要对startDate,endDate进行处理,得到我们想要的时间节点,
1、限定当天
$('#timer').datetimepicker({ format: 'hh:ii', language: 'zh-CN', weekStart: 1, // todayBtn: 0, autoclose: 1, todayHighlight: 0, startView: 1, minView: 0, maxView: 1, minuteStep: 10, forceParse: 0, initialDate: false, startDate: (function () { var date = (new Date().toLocaleDateString() + '/0/0').split('/'); return new Date(date[0],date[1],date[2],date[3],date[4]); })(),//初始值设定当天的零点零分 endDate: (function () { var date = (new Date().toLocaleDateString() + '/23/59').split('/'); return new Date(date[0], date[1], date[2], date[3], date[4]); })()//结束时间设定当天的23:59分 })
2、限定当月
$('#timer').datetimepicker({ format: 'dd-hh:ii', language: 'zh-CN', weekStart: 1, // todayBtn: 0, autoclose: 1, todayHighlight: 0, startView: 2, minView: 0, maxView: 2, minuteStep: 10, forceParse: 0, initialDate: false, startDate: (function () { var date = (new Date().toLocaleDateString() + '/0/0').split('/'); return new Date(date[0],date[1]-1); })(), endDate: (function () { var date = (new Date().toLocaleDateString() + '/23/59').split('/'); return new Date(date[0], date[1],0,date[3],date[4]); })() })
此处感谢前端朋友圈南京的朋友,开拓视野。
码农随笔防失忆,只为记录风雨路上的脚丫印印~