daterangepicker时间插件控制起始和截至日期的选择范围

一、时间插件使用方式
1、daterangepicker.js依赖于 Bootstrap 、 jQuery 、 Moment.js 这三个库。页面中必需包含的脚本和样式文件有

<!-- 需要引用的依赖库 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- 引用 daterangepicker 相关文件-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

2、html代码如下

<input type="text" class="minDate" placeholder="请选择起始日期">
<input type="text" class="maxDate" placeholder="请选择结束日期">

3、js控制时间范围

<script>
    ($(function () {
        /**
         * date时间往后延迟hour个小时和min分钟 的时间
         * @param {Object} min 分钟
         * @param {Object} hour 小时
         * @param {Object} date 日期
         */
        function delay(min, hour, date) {
            var oldTime=date.getTime();
            oldTime += min * 60 * 1000;
            oldTime += hour *60 * 60 *1000;
            return new Date(oldTime);
        }
        var endPicker = null;
        //开始日期
        $('.minDate').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoUpdateInput: false,
            timePicker24Hour : true,
            timePicker : false,
            //minDate:startDate,
            maxDate: new Date(),
            //drops:"up",
            "locale": {
                format: 'YYYY-MM-DD HH:mm',
                applyLabel: "确定",
                cancelLabel: "取消",
                resetLabel: "重置",
                daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]

            }
        }, function (start, end) {

        });
        //开始日期选择按钮的点击事件监听
        $('.minDate').on('apply.daterangepicker', function (ev, picker) {
            $('.minDate').val(picker.startDate.format('YYYY-MM-DD '));
            //初始化结束日期的空件
            if(!endPicker){
                $('.maxDate').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    autoUpdateInput: false,
                    timePicker24Hour: true,
                    timePicker: false,
                    minDate: delay(0,24,new Date($('.minDate').val())),
                    maxDate: new Date(),
                    //drops:"up",
                    "locale": {
                        format: 'YYYY-MM-DD HH:mm',
                        applyLabel: "确定",
                        cancelLabel: "取消",
                        resetLabel: "重置",
                        daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                    }
                }, function (start, end, label) {
                });
                endPicker = $('.maxDate').data('daterangepicker')
            }else{
                $('.maxDate').val('');
                endPicker.setMinDate(delay(0, 24, new Date($('.minDate').val())));
                //console.log(delay(0, 24, new Date($('.minDate').val())));
                //console.log($('.minDate').val())
               // endPicker.setEndDate(delay(0, 24, new Date($('.minDate').val())));
            }

        });
        //结束日期的监听
        $('.maxDate').on('apply.daterangepicker', function (ev, picker) {
            //console.log("apply:"+picker.startDate.format('YYYY-MM-DD HH:mm'));
            $('.maxDate').val(picker.startDate.format('YYYY-MM-DD'));
        });
        //结束日期的限制
        $(".maxDate").click(function () {
            var start = $('.minDate').val();
            if (!start || start.length == 0) {
               alert("请先选择开始时间");
                return;
            }
        });
    }));
</script>

5、效果图如下

具体相关使用方法请访问网址 http://bsify.admui.com/daterangepicker/