bootstrap-datepicker插件設置一個開始時間一個結束時間,結束時間不能小於開始時間

首先頁面是如下:

<form style="display: inline-block;vertical-align: middle;margin-top: 10px;">
                <div style="display: inline-block;vertical-align: middle;width: 180px;" class="input-group  date starttime1">
                    <input id="starttime" type="text" style="width: 180PX;" placeholder="起始時間" data-msg-required="請輸入起始時間" data-field="starttime" data-formatter="starttime" class="form-control ">

                </div>
                -
                <div style="display: inline-block;vertical-align: middle;width: 180px;" class="input-group  date endtime1">
                    <input id="endtime" type="text" data-field="endtime" style="width: 180PX;" placeholder="結束時間" data-msg-required="請輸入結束時間" data-formatter="endtime" class="form-control ">
                </div>
                <div style="display: inline-block;vertical-align: middle;" class="input-group">
                    <span style="width: 50px;" class="input-group-btn">
                        <button id="btn_Search" type="button" class="btn default">
                            <i class="fa fa-search"></i>查詢</button>
                    </span>
                </div>
                <div style="display: inline-block;vertical-align: middle;" class="input-group">

                </div>
            </form>

js代碼如下:

///開始時間
            $("#starttime").datepicker({
                autoclose: true,
                language: "zh-CN",
                // startDate: new Date(),
                // endDate: $(this).data("end"),
                clearBtn: true,
                format: 'yyyy/mm/dd'

            }).on('changeDate', function(ev) {
                console.log(ev)
                var starttime = $('[data-field="starttime"]').val();
                console.log(starttime)
                $('#endtime').datepicker('setStartDate', starttime);

            });
$("#endtime").datepicker({
                autoclose: true,
                language: "zh-CN",
                // startDate: new Date(),
                endDate: new Date(),
                clearBtn: true,
                format: 'yyyy/mm/dd'

            }).on('changeDate', function(ev) {

                var starttime = $('[data-field="endtime"]').val();
                $("#starttime").datepicker('setEndDate', starttime);

            });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章