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:       "今天"  
};

日期初始化

遇到的坑是什麼呢？

一、初始化的日期firstDay和lastDay必須寫在$("#XXX").datetimepicker({});的外面，固然啦這是由於裏面是JSON格式的配置聲明。

二、這個算真的坑，就是自定義的初始化日期的激活，$('#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);