问题描述
两个表单元素:开始日期和结束日期,先汉化。然后把开始日期的初始化时间设置为当月第一天,结束日期的初始化时间为当月最后一天。
我的JSP源码
<div class="row">
<div class="col-md-6 form-group">
<label>开始日期</label>
<input type="text" class="form-control" name="startDate" id="startDate" />
</div>
<div class="col-md-6 form-group">
<label>结束日期</label>
<input type="text" class="form-control" name="endDate" id="endDate" />
</div>
<div class="col-md-1 pull-center"></div>
</div>
datetimepicker中文化说明
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六","日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六","日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
meridiem: ["上午", "下午"],
today: "今天"
};
日期初始化
遇到的坑是什么呢?
1、初始化的日期firstDay和lastDay必须写在$("#XXX").datetimepicker({});的外面,当然啦这是因为里面是JSON格式的配置声明。
2、这个算真的坑,就是自定义的初始化日期的激活,$('#XXX').datetimepicker('update', XXX);必须写在声明配置的下面,不然配置声明就会部分失效。
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
$("#startDate").datetimepicker({
format: 'yyyy-mm-dd', //显示格式
initialDate: firstDay,
todayBtn: true,
language: "zh-CN",
minView: "month",//设置只显示到月份
todayHighlight: 1,//今天高亮
startView:2,
autoclose: 1//选择后自动关闭
});
$("#endDate").datetimepicker({
format: 'yyyy-mm-dd',//显示格式
initialDate: lastDay,
todayBtn: true,
language: "zh-CN",
minView: "month",//设置只显示到月份
todayHighlight: 1,//今天高亮
startView:2,
autoclose: 1//选择后自动关闭
});
$('#startDate').datetimepicker('update', firstDay);
$('#endDate').datetimepicker('update', lastDay);