Начало
Календари
Меню даты
JavaScript использует функцию Даты, чтобы динамически произвести точные даты меню со спуском. Каждый раз, когда пользователь выбирает год или месяц, JavaScript получает правильное число дней в том месяце и обновляет
1999
2000
2001
2002
January
February
March
April
May
June
July
August
September
October
November
December
JavaScript Calendars: меню даты
<!-- TWO STEPS TO INSTALL DATE MENU: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <! > <! > <!-- Begin function populate(objForm,selectIndex) { timeA = new Date(objForm.year.options[objForm.year.selectedIndex].text, objForm.month.options[objForm.month.selectedIndex].value,1); timeDifference = timeA - 86400000; timeB = new Date(timeDifference); var daysInMonth = timeB.getDate(); for (var i = 0; i < objForm.day.length; i++) { objForm.day.options[0] = null; } for (var i = 0; i < daysInMonth; i++) { objForm.day.options[i] = new Option(i+1); } document.f1.day.options[0].selected = true; } function getYears() { // You can easily customize what years can be used var years = new Array(1997,1998,1999,2000,2001,2005) for (var i = 0; i < document.f1.year.length; i++) { document.f1.year.options[0] = null; } timeC = new Date(); currYear = timeC.getFullYear(); for (var i = 0; i < years.length; i++) { document.f1.year.options[i] = new Option(years[i]); } document.f1.year.options[2].selected=true; } window.onLoad = getYears; // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <center> <form name=f1> <table border=0> <tr> <td align=center> <select name=year onChange="populate(this.form,this.form.month.selectedIndex);"> <option selected value=99>1999</option> <option value=00>2000</option> <option value=01>2001</option> <option value=02>2002</option> </select> <select name=month onChange="populate(this.form,this.selectedIndex);"> <option value=01>January</option> <option value=02>February</option> <option value=03>March</option> <option value=04>April</option> <option value=05>May</option> <option value=06>June</option> <option value=07>July</option> <option value=08>August</option> <option value=09>September</option> <option value=10>October</option> <option value=11>November</option> <option value=12>December</option> </select> <select name=day> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> </select> </td> </tr> </table> </form> </center> <!-- Script Size: 2.67 KB -->