Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Кроссбраузерная версия скрипта проверки даты/времени (https://javascript.ru/forum/css-html/33591-krossbrauzernaya-versiya-skripta-proverki-daty-vremeni.html)

Aftal1ck 28.11.2012 20:30

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

Sanda 28.11.2012 20:52

Клик тут наверняка ни при чём.
В первую очередь надо разобраться вот с этим куском:
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 в помощь.

Aftal1ck 28.11.2012 21:14

Этот кусок скрывает
<option id="time_№" value="С №:00 до №:00">c №:00 до №:00</option>

если реальное время захватывает указанный диапазон, то он принимает значение "display", "none", в случае если дата меняется возвращается "display", "block".
Сорри ошибся, продублировал несколько строк зря)

Sanda 28.11.2012 21:30

Я понимаю, что он _должен_ делать, но в том-то и дело, что реализована другая логика. Для правильной логики строчки из 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();
}

Aftal1ck 28.11.2012 21:47

Поглядим


Часовой пояс GMT +3, время: 01:35.