bootstrapdatetimepicker插件汉化、日期初始化等使用记录

问题描述

两个表单元素：开始日期和结束日期，先汉化。然后把开始日期的初始化时间设置为当月第一天，结束日期的初始化时间为当月最后一天。

我的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);