Селект-список количества дней в месяце
Вход Регистрация

Селект-список количества дней в месяце

Динамическое создание селект-списка с количеством дней для выбранного месяца и года. Селект-список с количеством дней для февраля формируется с учетом високосного (29 дней) и невисокосного (28 дней) годов.

Создаем вручную селект-список для выбора месяца:


<form name="mySel" >
<select type="menu" name="month" id="month" onchange="loadDay();">...
<option value="0">январь
<option value="1">февраль
<option value="2">март
<option value="3">апрель
<option value="4">май
<option value="5">июнь
<option value="6">июль
<option value="7">август
<option value="8">сентябрь
<option value="9">октябрь
<option value="10">ноябрь
<option value="11">декабрь
</select>

Далее создаем оболочку для селект-списка с количеством дней:


<select type="menu" name="days" id="days">...

</select>

Используя HTML тэги создаем оболочку, а селект-список для выбора года генерируем автоматически с помощью JavaScript:


<select type="menu" name="year" id="year" onchange="loadYear()" >...

<script>
// здесь указываем с какого и по какой год должно быть в списке
for (i = 2000; i <= 2013; i++) {
	document.mySel.year.innerHTML += "<option value='"+i+"' />"+i;
}
</script>

</select>
</form>

Внутри тэгов script создаем функцию, подсчитывающую количество дней в выбранном месяце и запускаем ее:


function loadDay() {
	document.mySel.days.innerHTML = "";

	var month = document.mySel.month.selectedIndex;
	var year = document.mySel.year.value;
	var usrDate = new Date (year, month , 1);
	var nextMonth = new Date (year, month+1, 1);
	var oneHour = 1000 * 60 * 60;
	var oneDay = oneHour*24;
	var monthEnd = Math.ceil((nextMonth.getTime() - usrDate.getTime() - oneHour)/oneDay);

	for (i = 1; i <= monthEnd ; i++ ) {
		document.mySel.days.innerHTML += "<option />"+i;
	}
}
loadDay();

Далее внутри тех же тегов, где создана функция loadDay, создаем функцию, проверяющую правильное количество дней для февраля, в зависимости от високосного и невисокосного годов:


function loadYear() {
	if (document.mySel.year.value%4 == 0 && document.mySel.month.selectedIndex == 1) {
		if (document.mySel.days.length == 29) return;
			else document.mySel.days.innerHTML += "<option />"+29;
	} else if (document.mySel.month.selectedIndex == 1) {
		if (document.mySel.days.length == 28) {
			return;
		} else {
			document.mySel.days.innerHTML ="";
			for (i = 1; i < 29 ; i++ ) {
				document.mySel.days.innerHTML += "<option />"+i;
			}
		}
	} else return;
}

Все элементы скрипта, тэги со списком и пр. добавлять в HTML-документ в указанной последовательности. О возникновении проблем с запуском скрипта, а также предложения по модификации скрипта и конструктивную критику просьба писать по адресу freeden_codomaza@mail.ru.


Комментировать

captcha

Вход

Зарегистрируйтесь, если нет учетной записи

Напомнить пароль
Регистрация
Напомнить пароль
Войти в личный кабинет