bootstrap-datetimepicker双日历动态设置日期可选范围（可切换成月、日）

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');
});　

　　

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

 

posted @ 2020-06-18 10:50  Marydon  阅读(2642)  评论(0)  编辑  收藏  举报