Кроссбраузерная версия скрипта проверки даты/времени
Есть скрипт в который относительно подвязан на datepicker, в случае если выбирается дата и = сегодня, то проверяется доступный диапазон времени (будущего). При этом, если до назначения даты выбран вариант времени не входящий в диапазон, позиции сбрасываются.
Беда же заключается в том, что все висит на клике, и по своему работает в каждом из браузеров. Буду благодарен дельному совету, как добиться максимальной кроссбраузерности. <table class="time_date"> <tbody> <tr> <td> <b>Дата и время:</b> </td> <td> <input id="data_shipping" type="text" value="" name="data_shipping"> </td> <td> <select id="time_shipping" name="time_shipping"> <option value=""></option> <option id="time_2" value="С 09:00 до 12:00">c 09:00 до 12:00</option> <option id="time_3" value="С 12:00 до 15:00">c 12:00 до 15:00</option> <option id="time_4" value="С 15:00 до 18:00">c 15:00 до 18:00</option> <option id="time_5" value="С 18:00 до 21:00">c 18:00 до 21:00</option> <option id="time_7" value="Рано утром">рано утром</option> <option id="time_6" value="В течении дня">в течении дня</option> <option id="time_8" value="Поздно вечером">поздно вечером</option> </select> </td> </tr> </tbody> </table>
<script type="text/javascript">
function resetOptions() {
$("option:selected").removeAttr("selected");
};
$('#data_shipping').datepicker();
$('.shippingin_block').bind('click', function() {
var myDate = new Date();
var now = new Date();
var nowTime = now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
setTimeout('clock()',1000);
var selectedDate = $('#data_shipping').datepicker('getDate');
var today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
if (Date.parse(today) == Date.parse(selectedDate)) {
if(nowTime > '09:00:00'){
$('#time_2, #time_7').css("display", "none");
}
if(nowTime > '12:00:00'){
$('#time_2, #time_3, #time_7').css("display", "none");
}
if(nowTime > '15:00:00'){
$('#time_2, #time_3, #time_4, #time_6, #time_7').css("display", "none");
}
if(nowTime > '18:00:00'){
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7').css("display", "none");
}
if(nowTime > '23:00:00'){
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7, #time_8').css("display", "none");
}
}else{
$('#time_2, #time_7').css("display", "block");
$('#time_2, #time_3, #time_7').css("display", "block");
$('#time_2, #time_3, #time_4, #time_6, #time_7').css("display", "block");
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7').css("display", "block");
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7, #time_8').css("display", "block");
}
});
</script>
|
Клик тут наверняка ни при чём.
В первую очередь надо разобраться вот с этим куском:
if(nowTime > '09:00:00'){
$('#time_2, #time_7').css("display", "none");
}
if(nowTime > '12:00:00'){
$('#time_2, #time_3, #time_7').css("display", "none");
}
if(nowTime > '15:00:00'){
$('#time_2, #time_3, #time_4, #time_6, #time_7').css("display", "none");
}
if(nowTime > '18:00:00'){
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7').css("display", "none");
}
if(nowTime > '23:00:00'){
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7, #time_8').css("display", "none");
}
}else{
$('#time_2, #time_7').css("display", "block");
$('#time_2, #time_3, #time_7').css("display", "block");
$('#time_2, #time_3, #time_4, #time_6, #time_7').css("display", "block");
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7').css("display", "block");
$('#time_2, #time_3, #time_4, #time_5, #time_6, #time_7, #time_8').css("display", "block");
Он явно делает не то, что хотелось бы получить. $.toggle в помощь. |
Этот кусок скрывает
<option id="time_№" value="С №:00 до №:00">c №:00 до №:00</option> если реальное время захватывает указанный диапазон, то он принимает значение "display", "none", в случае если дата меняется возвращается "display", "block". Сорри ошибся, продублировал несколько строк зря) |
Я понимаю, что он _должен_ делать, но в том-то и дело, что реализована другая логика. Для правильной логики строчки из else-блока следует раскидать по соответствующим if-ам, а не валить в одну кучу. И почитай про toggle - код получится значительно читабельнее.
Ну и сравнивать даты в виде строк - далеко не лучшая идея. Во-первых, сама по себе, а во-вторых, для времени "09:05:00" ты получаешь nowTime = "9:5:0". Лучше делать так: var nowTime = now.getHours() * 60 * 60 + now.getMinutes() * 60 + now.getSeconds(); и дальше сравниваем числа. Поэтому лучше сразу оформить в отдельную функцию:
function getTimeFromDate(date) {
return date.getHours() * 60 * 60 + date.getMinutes() * 60 + date.getSeconds();
}
|
Поглядим
|
| Часовой пояс GMT +3, время: 08:51. |