bootstrap datetimepicker、bootstrap datepicker日期組件對範圍的簡單封裝

1.bootstrap datepicker 使用

    <div class="row form-group">
                    <label class="control-label col-md-2">Log Date</label>
                    <div class="col-md-3">
                        <div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd">
                            <input id="ModifyDateStart" name="ModifyDateStart" class="form-control" style="font-size: 13px;" type="text" value="">
                            <span class="input-group-addon">~</span>
                            <input id="ModifyDateEnd" name="ModifyDateEnd" class="form-control" style="font-size: 13px;" type="text" value="">
                        </div>
                    </div>
            </div>

　　

  <script type="text/javascript">
        $(function () {
            $(".date-picker").datepicker({
                language: "zh-EN",
                //autoclose: true,//選中以後自動隱藏日期選擇框
              //clearBtn: true,//清除按鈕
                format: "yyyy-mm-dd"//日期格式

            });
        });
    </script>

　　2.bootstrap datetimepicker的使用

  <label class="control-label col-md-2">Access Time</label>
                    <div class="col-md-4">
                        <div class="input-group input-medium">
                            <input id="AccessTimeStart" name="AccessTimeStart" class="form-control" style="font-size: 13px;" type="text" value="">
                            <span class="input-group-addon">~</span>
                            <input id="AccessTimeEnd" name="AccessTimeEnd" class="form-control" style="font-size: 13px;" type="text" value="">
                        </div>
                    </div>

　　

 <script type="text/javascript">
        $(function () {
            setTwoDateTimePicker('#AccessTimeStart', '#AccessTimeEnd');
            bandDatapicker();
        });

        function bandDatapicker() {
            debugger;
            batchSetDateTimePicker(".date-picker", "YYYY-MM-DD HH:mm", null, moment());
        };

        //將兩個輸入框設置爲日期時間段控件
        function setTwoDateTimePicker(beginId, endId, dateFormat) {
            var newDateFormat = dateFormat || 'YYYY-MM-DD HH:mm';
            $(beginId).datetimepicker({
                format: newDateFormat,
            });
            $(endId).datetimepicker({
                format: newDateFormat,
                useCurrent: false
            });
            $(beginId).on("dp.change", function (e) {
                var value = e.date ? convertToMoment(e.date, newDateFormat) : false;
                $(endId).data("DateTimePicker").minDate(value);
            });
            $(endId).on("dp.change", function (e) {
                var value = e.date ? convertToMoment(e.date, newDateFormat) : false;
                $(beginId).data("DateTimePicker").maxDate(value);
            });
        }


        //批量將輸入框設置爲日期時間控件，批量的時候必須遍歷單獨設置，不然最大最小值會無效
        function batchSetDateTimePicker(id, dateFormat, minDate, maxDate, changeFunc) {
            $(id).each(function (index, element) {
                value = $(element).val();
                setDateTimePicker(element, dateFormat, minDate, maxDate, value, changeFunc);
            });
        }

        //將輸入框設置爲日期時間控件
        function setDateTimePicker(id, dateFormat, minDate, maxDate, defaultValue, changeFunc) {
            var newDateFormat = dateFormat || 'YYYY-MM-DD';
            $(id).datetimepicker({
                format: newDateFormat,
                // useCurrent: false
            });
            if (minDate) {
                var value = convertToMoment(minDate, newDateFormat);
                $(id).data("DateTimePicker").minDate(value);
            }
            if (maxDate) {
                var value = convertToMoment(maxDate, newDateFormat);
                $(id).data("DateTimePicker").maxDate(value);
            }
            //賦初始值，不然當設置了最大最小值時可能會將當天日期賦給輸入框
            if (defaultValue) {
                var value = convertToMoment(defaultValue, newDateFormat);
                $(id).data("DateTimePicker").date(value);
            } else {
                $(id).data("DateTimePicker").date(null);
            }
            if (changeFunc) {
                $(id).on("dp.change", changeFunc);
            }
        }

        //將日期時間字符串或者moment對象按照指定格式轉換爲新的moment對象
        function convertToMoment(datetime, dateFormat) {
            if (!datetime) { return null; }
            if (moment.isMoment(datetime)) {
                return moment(datetime.format(dateFormat), dateFormat);
            } else {
                return moment(datetime, dateFormat);
            }
        }
</script>