1.情景展示
如上圖所示，既有開始日期和結束日期，又可以隨意切換成日和月，還能控制可選范圍，使用bootstrap日期插件如何實現？
2.原因分析
控件限制最大值，需要用到setEndDate；最小值控制，要用setStartDate；
結束日期的最小值不能小於開始日期；開始日期的最大值不能大於結束日期；
切換控件的格式化格式，需要重置日期插件：起初，我以為重新調用$(".form_datetime").datetimepicker({})就可以了，但是，調用之后，日期會變成1899年，
后來查到重新初始化前，需要將原來的插件引用移除掉，也就是調用remove屬性。
3.解決方案
第一步：引入CSS和JS文件
<link type="text/css" rel="stylesheet" href="<c:url value="/commons/js/bootstrap/bootstrap.css"/>" /> <link type="text/css" rel="stylesheet" href="<c:url value="/commons/js/bootstrap/bootstrap-datetimepicker.min.css"/>" /> <script type="text/javascript" src="<c:url value="/commons/js/bootstrap/bootstrap.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/commons/js/bootstrap/bootstrap-datetimepicker.min.js"/>"></script>
第二步：HTML片段
日期類型：
<select style="width: 80px" onchange="selectDateType(this.value)">
<option value="day" selected>天</option>
<option value="month">月</option>
</select> 開始日期：
<input class="form_datetime" style="width: 120px;" name="STARTTIME"
id="startDate" required readonly>
結束日期：
<input class="form_datetime" style="width: 120px;" name="ENDTIME"
id="endDate" required readonly>
<input id="SearchImage" type="button" class="Button" value=" 查 詢 "
onclick="javascript:search()"
onmouseover="this.className='ButtonOver'"
onmouseout="this.className='Button'" />
第三步：JAVASCRIPT
插件重置
/**
* 日期插件初始化
* @explain 兩種初始化方式
* @param dateType
* day-天
* month-月
*/
function InitDatetimepicker(dateType) {
// 先移除后重新初始化
$(".form_datetime").datetimepicker('remove');
// 漢化設置
$.fn.datetimepicker.dates['zh-CN'] = {
days : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ],
daysShort : [ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ],
daysMin : [ "日", "一", "二", "三", "四", "五", "六" ],
months : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月" ],
monthsShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月" ],
today : "今天",
suffix : [],
meridiem : [ "上午", "下午" ]
};
var format = '';
var startView = '';
var maxView = '';
var minView = '';
var todayBtn = '';
if ('day' == dateType) {
format = 'yyyy-mm-dd';
startView = 'month';
maxView = 'year';
minView = 'month';
todayBtn = true;
} else if ('month' == dateType) {
format = 'yyyy-mm';
startView = 'year';
maxView = 'decade';
minView = 'year';
todayBtn = false;
}
// 日期控件屬性設置（相當於初始化）
$(".form_datetime").datetimepicker({
format : format,
startView : startView,
maxView : maxView,
minView : minView,
pickerPosition : "bottom-left",
language : 'zh-CN',
todayBtn : todayBtn,
autoclose : true,
endDate : new Date()// 最大值
});
};
日期取值范圍限制
/**
* 結束日期取值范圍設置
* @explain 根據不同的日期類型，設置不同的日期可選范圍
* 綜合效果就是：（可自定義設置）
* 選擇開始日期后，結束日期的值會被清空，結束日期有最大值和最小值限制；
* 開始日期沒有最小值限制，最大值為系統當前日期
* @param dateType
* day-天
* month-月
*/
function minMaxDateLimit(dateType) {
// 相差29天，實際總共30天；相差11個月，實際總共12月
var days = ("day" == dateType) ? 29 : 11 * 30;
/**
* 設置endDate的最小值和最大值
* @explain
* 1.結束日期的最小值， 不能小於開始日期
* 2.結束日期的最大值為startDate+days/sysdate
* 3.清空結束日期（避免endDate-startDate>days）
*/
$("#startDate").on('change', function(){
var inputValue = $(this).val();
inputValue = inputValue.replace(/-/g,'/');
var inputDate = new Date(Date.parse(inputValue));
// 結束日期的最小值
$('#endDate').datetimepicker('setStartDate', inputDate);
// 最大值設置
// 推算最大值
var calculateDate = new Date(inputDate.setDate(inputDate.getDate() + days));
var endDate = calculateDate > new Date() ? new Date() : calculateDate;
$('#endDate').datetimepicker('setEndDate', endDate);
// 清空結束日期
$('#endDate').val('');
});
/**
* 設置startDate的最大值
* @explain
* 1.開始日期的最大值， 不能大於結束日期
* 2.不能設置開始日期的最小值限制（否則，開始日期將不能自由選擇endDate-days以前的日期作為開始日期）
*/
/*$("#endDate").on('change', function(){
var inputValue = $(this).val();
inputValue = inputValue.replace(/-/g,'/');
var inputDate = new Date(Date.parse(inputValue));
$('#startDate').datetimepicker('setEndDate', inputDate);
});*/
};
設置默認值
/**
* 開始日期、結束日期input文本框默認值
* @explain 根據不同的日期類型，設置不同的默認值
* @param dateType
* day-天
* month-月
*/
function startEndTimeDefaultValue(dateType) {
// 開始時間默認值
var start_date_default = "";
// 結束時間默認值
var end_date_default = "";
// 獲取系統當前時間：年、月、日
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = (month <= 9) ? "0" + month : month;
var day = date.getDate();
day = (day <= 9) ? "0" + day : day;
if ("day" == dateType) {// 月初-系統當前天
start_date_default = year + "-" + month + "-01";
end_date_default = year + "-" + month + "-" + day;
} else {// 年初-系統當前月
start_date_default = year + "-01";
end_date_default = year + "-" + month;
}
// 設置默認值
// 沒有觸發onchange事件，手動觸發
$("#startDate").val(start_date_default).change();
$("#endDate")[0].value = end_date_default;
};
切換日期類型，需要執行的操作
/**
* 選擇日期類型
* @param dateType
* day-可選擇到天，最多可選30天
* month-可選擇到月，最多可選12月
*/
function selectDateType(dateType) {
// 日期插件重置
InitDatetimepicker(dateType);
// 日期可選范圍
minMaxDateLimit(dateType);
// 文本框默認值
startEndTimeDefaultValue(dateType);
};
頁面加載完畢執行
// 頁面加載完畢
$(function() {
// 日期控件初始化並默認選擇天
selectDateType('day');
});