【问题标题】:Bootstrap datetime picker disable hours引导日期时间选择器禁用小时
【发布时间】:2016-05-12 00:39:48
【问题描述】:

我正在使用Bootsrap 3 Datetime Picker。我发现文档并没有太多说明如何禁用/启用时间,它只是说:

禁用时间

默认值:假

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

【问题讨论】:

  • 这里说:eonasdan.github.io/bootstrap-datetimepicker/Functions/…,可以使用选项禁用小时数(例如):disabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23, 24]
  • @stark 谢谢!我们是否同意信息应该写在options 部分而不是functions 部分?无论如何...您知道如何为工作日和周末启用不同的时间吗?
  • 在您的问题中,您建议您为周末/工作日设置不同的时间。文档说“将允许或禁止小时选择(很像disabledTimeIntervals),但会影响所有天”(强调)。我认为不可能为不同的日子指定不同的时间。
  • @EricDauenhauer 没有使用事件和函数的可能解决方法吗? ... :/ thnx 无论如何都要回答。
  • 我并不是说没有可能的解决方法——我从未真正使用过这个库。但我不认为它是一个可以默认指定的选项。

标签: javascript twitter-bootstrap-3 datetimepicker eonasdan-datetimepicker


【解决方案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)));
}

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-06-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-23
    • 2018-10-08
    • 2013-05-09
    相关资源
    最近更新 更多