Bootstrap 日期时间选择器禁用时间

Question

我正在使用 Bootsrap 3 Datetime Picker。我发现文档并没有说明如何 disable/enable 小时，它只是说：

disabledHours

Default: false

现在有人知道如何声明禁用时间吗？哪种格式？我需要禁用工作日和周末的不同时间。

Answer 1

您可以使用 Ajax 来解决一些问题：

HTML :

<div class="form-group">
    <div class="input-group bootstrap-timepicker">
      <span>Pick up a delivery time :</span>
      <input id="datepicker" data-format="DD/MM/YYYY - H:mm" name="delivery_time" type="text" class="form-control input-small">
    </div>
</div>

JS :

$('#datepicker').on('dp.change', function(e) {
    $.ajax({
        cache: false,
        dataType: 'json',
        type: 'POST',
        data: 'theday='+JSON.stringify(e.date._d),
        url: 'ajax/disable_hours.php',
        success: function(data) {
            if (data.return == true) {
                $('#datepicker').data('DateTimePicker').enabledHours(
                    data.allowed_hours
                );
            } else {
                console.log(data);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
});

PHP :

// GET PICKED WEEKDAY FROM JS
$theday = $_POST['theday']; // Get value of last picked date (js: .e.date._d)
$theday = substr($theday, 1,10); // Isolate yyyy-mm-dd
$theday = strtotime($theday); // Make it timeStamp
$theday = getDate($theday); // Create date info array

// SET OPENING HOURS
$allowed_times = array(
    'MondayOpen'      => 8,
    'MondayClose'     => 18,
    'TuesdayOpen'     => 8,
    'TuesdayClose'    => 18,
    'WednesdayOpen'   => 10,
    'WednesdayClose'  => 16,
    'ThursdayOpen'    => 8,
    'ThursdayClose'   => 18,
    'FridayOpen'      => 8,
    'FridayClose'     => 18,
    'SaturdayOpen'    => 9,
    'SaturdayClose'   => 12,
    'SundayOpen'      => 9,
    'SundayClose'     => 12
);

// USEFUL VARIABLES
$allowHours = array();

// SET THE ENABLED HOURS ARRAYS
switch ($theday['wday']) {

    // SUNDAY
    case 0:
        $open = $allowed_times['SundayOpen'];
        $close = $allowed_times['SundayClose'];

        $allowHours = array();
        for ($i = $open; $i < $close; $i++) {
            array_push($allowHours, $i);
        }

        die(json_encode(array("return" => true, "allowed_hours" => $allowHours)));

    // MONDAY
    case 1:
        $open = $allowed_times['MondayOpen'];
        $close = $allowed_times['MondayClose'];

        $allowHours = array();
        for ($i = $open; $i < $close; $i++) {
            array_push($allowHours, $i);
        }

        die(json_encode(array("return" => true, "allowed_hours" => $allowHours)));

    // TUESDAY
    case 2:
        $open = $allowed_times['TuesdayOpen'];
        $close = $allowed_times['TuesdayClose'];

        $allowHours = array();
        for ($i = $open; $i < $close; $i++) {
            array_push($allowHours, $i);
        }

        die(json_encode(array("return" => true, "allowed_hours" => $allowHours)));

    // WEDNESDAY
    case 3:
        $open = $allowed_times['WednesdayOpen'];
        $close = $allowed_times['WednesdayClose'];

        $allowHours = array();
        for ($i = $open; $i < $close; $i++) {
            array_push($allowHours, $i);
        }

        die(json_encode(array("return" => true, "allowed_hours" => $allowHours)));

    // THURSDAY
    case 4:
        $open = $allowed_times['ThursdayOpen'];
        $close = $allowed_times['ThursdayClose'];

        $allowHours = array();
        for ($i = $open; $i < $close; $i++) {
            array_push($allowHours, $i);
        }

        die(json_encode(array("return" => true, "allowed_hours" => $allowHours)));

    // FRIDAY
    case 5:
        $open = $allowed_times['FridayOpen'];
        $close = $allowed_times['FridayClose'];

        $allowHours = array();
        for ($i = $open; $i < $close; $i++) {
            array_push($allowHours, $i);
        }

        die(json_encode(array("return" => true, "allowed_hours" => $allowHours)));

    // SATURDAY
    case 6:
        $open = $allowed_times['SaturdayOpen'];
        $close = $allowed_times['SaturdayClose'];

        $allowHours = array();
        for ($i = $open; $i < $close; $i++) {
            array_push($allowHours, $i);
        }

        die(json_encode(array("return" => true, "allowed_hours" => $allowHours)));
}

肯定有更好的，但也许它会帮助一些人。

Bootstrap 日期时间选择器禁用时间

Bootstrap datetime picker disable hours

javascript

datetimepicker

twitter-bootstrap-3

eonasdan-datetimepicker