Question

我在Symfony上为我的项目实现bootstrap datepicker，用户可以在DB中保存预订日期。

是否有可能从数据库中禁用日期范围？例如，我的日期范围从22.12.2016到26.12.2016，从31.12.2016到03.01.2017，我想在datepicker中禁用这些日期。

感谢。

Answer 1

希望这对你有用

      <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen" />
                <style>
                    .datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
                        color: rgb(255, 0, 0);
                        cursor: not-allowed;
                    }
                </style>
                <div class="form-group required">
                    <label class="col-sm-2 control-label" for="datestart">Reservation Start date</label>
                    <div class="col-sm-4">
                        <div class="start-date">
                            <div class='input-group date' id="time-start">
                                <input type='text' class="clearfix form-control col-sm-5" name="datestart" id="datestart" placeholder="Reservation Start date" readonly>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                    <label class="col-sm-2 control-label" for="dateend">Reservation End date</label>
                    <div class="col-sm-4">
                        <div class="end-date">
                            <div class='input-group date' id="time-end">
                                <input type='text' class="clearfix form-control col-sm-5" name="dateend" id="dateend" placeholder="Reservation End date" readonly>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                </div>

                <script type="text/javascript">
                // use this date formate 'MM/dd/yyyy HH:mm'

                // start time
                var datestart = '<?php echo $reservation_start_date; ?>';

                // end time
                var dateend = '<?php echo $reservation_end_date; ?>';

                jQuery('#datestart').val(datestart);
                jQuery('#dateend').val(dateend);

                var today = new Date();
                jQuery('#time-start').datetimepicker({
                format: 'mm/dd/yyyy hh:ii',
                        autoclose: true,
                        pickerPosition: datestart,
                        maxView: 3,
                        minuteStep: 15,
                        defaultDate: datestart,
                        startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
                }).on("changeDate", function (e) {
                jQuery('#start-time-before').html(e.date);
                var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
                jQuery('#time-end').datetimepicker('setStartDate', TimeZoned);
                jQuery('#time-start').datetimepicker('setDate', TimeZoned);
                jQuery('#start-time-adjusted').html(TimeZoned);
                });

                jQuery('#time-end').datetimepicker({
                format: 'mm/dd/yyyy hh:ii',
                        pickerPosition: dateend,
                        autoclose: true,
                        maxView: 3,
                        minuteStep: 15,
                        defaultDate: dateend,
                        startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
                }).on("changeDate", function (e) {
                jQuery('#end-time-before').html(e.date);
                var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
                jQuery('#time-start').datetimepicker('setEndDate', TimeZoned);
                jQuery('#time-end').datetimepicker('setDate', TimeZoned);
                jQuery('#end-time-adjusted').html(e.date);
                });
                </script>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" type="text/javascript"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>

我可以在Bootstrap datepicker中禁用几个日期范围吗？

1 个答案: