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=" 80px" onchange="selectDateType(this.value)">
<option value="day" selected>天</option>
<option value="month">月</option>
</select> 开始日期：
<input class="form_datetime" style=" 120px;" name="STARTTIME"
id="startDate" required readonly>
结束日期：
<input class="form_datetime" style=" 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');
});