Red Dragon
Я не забывал этого, думаю в одном элементе input - невозможно. А вот если разбить на три: год, месяц, число...
Вот скрипт. он обходит все ошибки с числами:
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#calendar {position:absolute;
left:0px;
top:0px;
visibility:hidden
}
table {font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#999999
}
th {background-color:#ccffcc;
text-align:center;
font-size:10px;
width:26px
}
#tableHeader {background-color:#ffcccc;
width:100%
}
td {background-color:#ffffcc;
text-align:center;
font-size:10px
}
#tableBody tr td {width:26px}
#today {background-color:#ffcc33}
a:link {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:hover {color:#990033; text-decoration:underline}
</style>
<script type="text/javascript">
/*******************
ПОЛЕЗНЫЕ ФУНКЦИИ
********************/
// Первый день месяца
function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1);
return firstDate.getDay();
}
// Дней в месяце
function getMonthLen(theYear, theMonth) {
var nextMonth = new Date(theYear, theMonth + 1, 1);
nextMonth.setHours(nextMonth.getHours() - 3);
return nextMonth.getDate();
}
function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {left:offsetLeft, top:offsetTop};
}
// Позиционируем и показываем календарь
function showCalendar(evt) {
evt = (evt) ? evt : event;
if (evt) {
if (document.getElementById("calendar").style.visibility != "visible") {
var elem = (evt.target) ? evt.target : evt.srcElement;
var position = getElementPosition(elem.id);
shiftTo("calendar", position.left + elem.offsetWidth, position.top);
show("calendar");
} else {
hide("calendar");
}
}
}
/************************
ПРОРИСОВКА ТАБЛИЦЫ
*************************/
// очищаем и перестраиваем значение, основываясь на выборе
function populateTable(form) {
// выводим выбор
var theMonth = form.chooseMonth.selectedIndex;
var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text);
// инициализируем зависимые параметры
var firstDay = getFirstDay(theYear, theMonth);
var howMany = getMonthLen(theYear, theMonth);
var today = new Date();
// Вставляем нужный год и месяц
document.getElementById("tableHeader").innerHTML =
form.chooseMonth.options[theMonth].text + " " + theYear;
// Иниц. перем. для таблицы
var dayCounter = 1;
var TBody = document.getElementById("tableBody");
// очишаем существующие строки
while (TBody.rows.length > 0) {
TBody.deleteRow(0);
}
var newR, newC, dateNum;
var done=false;
while (!done) {
// Создаем новую строку
newR = TBody.insertRow(TBody.rows.length);
if (newR) {
for (var i = 0; i < 7; i++) {
// создаем новую колонку в конце строки
newC = newR.insertCell(newR.cells.length);
if (TBody.rows.length == 1 && i < firstDay) {
// пустые блоки
newC.innerHTML = " ";
continue;
}
if (dayCounter == howMany) {
// прекращаем
done = true;
}
if (dayCounter <= howMany) {
if (today.getFullYear() == theYear &&
today.getMonth() == form.chooseMonth.selectedIndex &&
today.getDate() == dayCounter) {
newC.id = "today";
}
newC.innerHTML = "<a href='#'onclick='chooseDate(" +
dayCounter + "," + theMonth + "," + theYear +
"); return false;'>" + dayCounter + "</a>";
dayCounter++;
} else {
newC.innerHTML = " ";
}
}
} else {
done = true;
}
}
}
/*******************
ИНИЦИАЛИЗАЦИЯ
********************/
// Создать динам. список годов
function fillYears() {
var today = new Date();
var thisYear = today.getFullYear();
var yearChooser = document.dateChooser.chooseYear;
for (i = thisYear; i < thisYear + 5; i++) {
yearChooser.options[yearChooser.options.length] = new Option(i, i);
}
setCurrMonth(today);
}
// поставить выбираемый месяц
function setCurrMonth(today) {
document.dateChooser.chooseMonth.selectedIndex = today.getMonth();
}
/*******************
ВЫБОР
********************/
function chooseDate(date, month, year) {
document.mainForm.date.value = date;
document.mainForm.month.value = month + 1;
document.mainForm.year.value = year;
hide("calendar");
}
</script>
</head>
<body onload="fillYears(); populateTable(document.dateChooser)">
<form name="mainForm" id="mainForm" method="POST" action="">
<p>Введите дату:</p>
<p>мм:<input type="text" name="month" id="month" size="3" maxlength="2" value="1">
дд:<input type="text" name="date" id="date" size="3" maxlength="2" value="1">
гггг:<input type="text" name="year" id="year" size="5" maxlength="4" value="2003">
<input type="button" id="showit" value="Указать дату >>" onclick="showCalendar(event)">
</p>
</form>
<div id="calendar">
<table id="calendarTable" border=1>
<tr>
<th id="tableHeader" colspan="7"></th>
</tr>
<tr><th>Вос</th><th>Пон</th><th>Вто</th><th>Сре</th>
<th>Чет</th><th>Пят</th><th>Суб</th></tr>
<tbody id="tableBody"></tbody>
<tr>
<td colspan="7">
<p>
<form name="dateChooser">
<select name="chooseMonth"
onchange="populateTable(this.form)">
<option selected>Январь<option>Ферваль
<option>Март<option>Апрель<option>Май
<option>Июнь<option>Июль<option>Август
<option>Сентябрь<option>Октябрь
<option>Ноябрь<option>Декабрь
</select>
<select name="chooseYear" onchange="populateTable(this.form)">
</select>
</form>
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
|
Работает в NN, IE/WIN и IE/MAC. Для перетаскивания календаря - требуется отдельная библиотека, она огромна - писать не стал. Нужна будет - дам ссылку на свой сйт, где она есть... |
да и 29 февраля только раз в 4 года