Кроссбраузерная версия скрипта проверки даты/времени
Есть скрипт в который относительно подвязан на 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, время: 01:35. |