I am using Bootsrap 3 Datetime Picker. I find the documentation doesn't say much about how to disable/enable hours, all it says is this:
disabledHours
Default: false
Does someone now how to declare a disabled hour? which format?. I need to disable different hours for weekdays and for weekends.
You could use some workaround using 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))); } There is certainly better out there but maybe it will help some.
disabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23, 24]optionssection rather than in thefunctionssection? Anyway... do you know how can I enable different hours for weekdays and weekends?disabledTimeIntervals) but will affect all days" (emphasis added). I don't think it will be possible to specify separate hours for separate days.