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]);
})()
})
此处感谢前端朋友圈南京的朋友,开拓视野。
码农随笔防失忆,只为记录风雨路上的脚丫印印~

浙公网安备 33010602011771号