Perl Liker
Профиль
Группа: Участник
Сообщений: 841
Регистрация: 13.12.2004
Где: Ростов-на-Дону
Репутация: нет
Всего: 28
|
Я переделал один из календарей под себя, затем мне стало нужно использовать на странице три и более календарей, для чего, я переписал календарь таким образом, чтобы id полей были уникальны. Возникла большая проблема - в Mozilla Firefox работает (хотя есть маленькие неточности), а в Internet Explorer возникают ошибки: document.getElementById(...) - возвращает иногда 0  Вот код календаря mycalendar.js: | Код |
// MyCalendar
var curr_month = new Date();
var SelectedStart = null;
var SelectedEnd = null;
var Months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', '', 'Август', 'Сентябрь', 'Ноябрь', 'Декабрь'];
//var Count = 0;
function DateToMySQL(date) {
var Array = date.split('.');
return Array[2]+'-'+Array[1]+'-'+Array[0];
}
function MyCalendar(AddId, DateFirst, DateEnd) {
var Default = DateFirst;
if (DateEnd != '') { Default += ' - ' + DateEnd; }
var Layer = '<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr>';
Layer += '<td width="100%"><input value="'+Default+'" onclick= "CalendarShowHide(\''+AddId+'\', \'CalendarDnButton\');" readonly="readonly" id="'+AddId+'datetimeold" size="20" style="cursor: default;" type="text"></td>';
Layer += '<td><img src="imgs/dn.gif" id="'+AddId+'CalendarDnButton" onclick="CalendarShowHide(\''+AddId+'\',\'CalendarDnButton\');" border="0" height="21" width="18"></td>';
Layer += '</tr></table>';
Layer += '<input id="'+AddId+'count" type="hidden" value="0"';
Layer += '<input id="'+AddId+'default" type="hidden" value="'+Default+'"';
// var Date1 = DateToMySQL(DateFirst);
// alert(Date1);
Layer += '<input id="'+AddId+'since" type="hidden" name="'+AddId+'since" value="'+DateToMySQL(DateFirst)+'">';
Layer += '<input id="'+AddId+'until" type="hidden" name="'+AddId+'until" value="'+DateToMySQL(DateEnd)+'">'; // if DateEnd
Layer += '<div id="'+AddId+'CalendarLayer" style="position: absolute; visibility: hidden;"><table border="0" cellpadding="1" cellspacing="0"><tbody><tr><td bgcolor="#6e6e77"><table border="0" cellpadding="10" cellspacing="0" width="100%"><tbody><tr><td bgcolor="white">';
Layer += '<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td background="imgs/bg.gif"><table border="0" cellpadding="0" cellspacing="0" width="100%">';
Layer += '<tbody><tr><td><img src="imgs/x.gif" height="26" width="18"></td><td align="right"><img src="imgs/x.gif" height="1" width="24"><br><a href="#" onclick="SetCalendarDate(\''+AddId+'\',-1);return(false);"><img src="imgs/backward.gif" alt="Ïðåäûäóùèé ìåñÿö" border="0" height="11" hspace="5" width="10"></a></td><td width="50%"><div class="CalendarMon" id="'+AddId+'CalendarFirstMonthName"> </div></td><td><img src="imgs/x.gif" height="1" width="20"></td><td align="right" width="50%"><div class="CalendarMon" id="'+AddId+'CalendarSecondMonthName" style="margin-right: 2px;"> </div></td><td align="left" bgcolor="white"><img src="imgs/x.gif" height="1" width="43"><br><a href="#" onclick="SetCalendarDate(\''+AddId+'\',1);return(false);"><img src="imgs/forward.gif" alt="Ñëåäóþùèé ìåñÿö" border="0" height="11" hspace="2" width="10"></a></td></tr>';
Layer += ' <tr>';
Layer += ' <td valign="bottom"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div class="CalendarWeekDate">ïí</div><div class="CalendarWeekDate">âò</div><div class="CalendarWeekDate">ñð</div><div class="CalendarWeekDate">÷ò</div><div class="CalendarWeekDate">ïò</div><div class="CalendarWeekDate">ñá</div><div class="CalendarWeekDate">âñ</div></td></tr></tbody></table></td>';
Layer += ' <td> </td>';
Layer += ' <td valign="top"><div id="'+AddId+'CalendarFirstMonth"></div></td>';
Layer += ' <td> </td>';
Layer += ' <td align="right" valign="top"><div id="'+AddId+'CalendarSecondMonth"></div></td>';
Layer += ' <td bgcolor="white"> </td>';
Layer += ' </tr>';
Layer += ' </tbody></table>';
Layer += ' <img src="imgs/x.gif" height="15" width="300"><br>';
Layer += ' <div class="CalendarComment" style="text-align: right;"><a href="#" onclick="CalendarClearDate(\''+AddId+'\');return(false);">Сбросить дату</a></div>';
Layer += ' <img src="imgs/x.gif" height="5" width="300"><br>';
Layer += ' <table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td bgcolor="#e7e7ea"><img src="imgs/x.gif" height="1" width="1"></td></tr></tbody></table>';
Layer += ' <img src="imgs/x.gif" height="10" width="300"><br>';
Layer += ' <div class="CalendarComment">Äëÿ òîãî ÷òîáû óêàçàòü äèàïàçîí äàò, ùåëêíèòå ïîñëåäíîâàòåëüíî íà äàòó íà÷àëà è äàòó îêîí÷àíèÿ.</div></td>';
Layer += ' </tr></tbody></table>';
Layer += ' </td></tr></tbody></table></td></tr></tbody></table></div>';
document.write(Layer);
// alert('После '+document.getElementById(AddId+'since').value);
}
function GenerateMonths(AddId, pri_month) {
var Field = (document.getElementById(AddId+'count').value == 0) ? 'datetimeold' : 'default';
var Value = document.getElementById(AddId+Field).value.split(' - ');
var StartArray = Value[0].split('.');
var EndArray = Value[1].split('.');
var month = new Date(pri_month.getFullYear(),pri_month.getMonth(),1);
old_month = month.getMonth();
fm = '<table id='+AddId+' border=0 cellpadding=0 cellspacing=0><tr valign=top><td>';
ctr = 1;
while (month.getMonth() == old_month && ctr<100) {
old_month = month.getMonth();
month.setDate(ctr);
if (month.getMonth() == old_month) {
if (ctr == 1 && month.getDay() != 1) {
offs = month.getDay()
offs = (offs == 0)?7:offs
fm += '<img src=/imgs/x.gif width=1 height='+((offs-1)*15)+'><br>'
}
classname = 'CalendarDate';
if (document.getElementById(AddId+'count').value == 0 && month.getFullYear() >= StartArray[2] && month.getFullYear() <= EndArray[2]) {
if (EndArray[1] > month.getMonth()+1) {
if ( month.getDate() >= StartArray[0] && month.getMonth()+1 == StartArray[1]) {
classname = 'CalendarSelectedDate';
} else {
if ( month.getMonth()+1 > StartArray[1] ) {
classname = 'CalendarSelectedDate';
}
}
} else {
if (StartArray[1] < month.getMonth()+1) {
if (month.getDate() <= EndArray[0] && month.getMonth()+1 <= EndArray[1]) classname = 'CalendarSelectedDate';
}
else {
if (month.getDate() >= StartArray[0] && month.getDate() <= EndArray[0]) classname = 'CalendarSelectedDate';
}
}
// var obj = document.getElementById(AddId+'until');
// alert(obj+' - '+obj.value);
document.getElementById(AddId+'since').value = DateToMySQL(Value[0]);
document.getElementById(AddId+'until').value = DateToMySQL(Value[1]);
}
if (SelectedStart && SelectedEnd && month.valueOf() >= SelectedStart && month.valueOf() <= SelectedEnd) {
classname = 'CalendarSelectedDate';
}
fm += '<div class='+classname+' onclick="SetClickDate(\''+AddId+'\',event,'+month.valueOf()+');">'+month.getDate()+'</div>'
if (month.getDay() == 0) {
tmp = new Date(month.getFullYear(),month.getMonth(),month.getDate());
tmp.setDate(ctr + 1);
if (tmp.getMonth() == old_month) {
fm += '</td><td><img src=/imgs/x.gif width=3 height=1></td><td>'
}
}
} else {
fm += '</td>'
}
ctr++;
}
fm += '</tr></table>';
return fm
}
function CalendarClearDate(AddId) {
SelectedEnd = SelectedStart = null;
var Count = document.getElementById(AddId+'count').value;
document.getElementById(AddId+'count').value = 1;
UpdateCalendarString(AddId);
DrawMonths(AddId, curr_month);
}
function SetClickDate(AddId, event, date) {
var Count = document.getElementById(AddId+'count').value;
document.getElementById(AddId+'count').value = Count+1;
if (SelectedStart == SelectedEnd && SelectedStart == date && SelectedEnd) {
SelectedEnd = SelectedStart = null
} else {
if (!SelectedStart) SelectedStart = date
if (!SelectedEnd) SelectedEnd = date
if (date > SelectedStart && event.ctrlKey || date < SelectedStart && !event.ctrlKey) {
SelectedStart = date
} else {
SelectedEnd = date
}
}
UpdateCalendarString(AddId);
DrawMonths(AddId, curr_month);
}
function UpdateCalendarString(AddId) {
var d1 = ''
var d11 = ''
var d2 = ''
var d22 = ''
if (SelectedStart) {
var dd = new Date(SelectedStart)
var p1 = dd.getDate()
var p2 = dd.getMonth()+1
var p3 = dd.getFullYear()
if (p1<10) p1 = '0'+p1
if (p2<10) p2 = '0'+p2
d1 = p1 + '.' + p2 + '.' + p3;
d11 = DateToMySQL(d1);
}
if (SelectedEnd) {
var dd = new Date(SelectedEnd)
var p1 = dd.getDate()
var p2 = dd.getMonth()+1
var p3 = dd.getFullYear()
if (p1<10) p1 = '0'+p1
if (p2<10) p2 = '0'+p2
d2 = p1 + '.' + p2 + '.' + p3
d22 = DateToMySQL(d2);
}
var str = d1
if (d1 != '') {
str += ' - '
}
str += d2
if (str == '') {
str = 'Введите дату'
}
document.getElementById(AddId+'datetimeold').value = str;
if (d11 == '') {
var Value = document.getElementById(AddId+'default').value.split(' - ');
document.getElementById(AddId+'since').value = DateToMySQL(Value[0]);
} else {
document.getElementById(AddId+'since').value = d11;
}
if (d22 == '') {
var Value = document.getElementById(AddId+'default').value.split(' - ');
document.getElementById(AddId+'until').value = DateToMySQL(Value[1]);
} else {
document.getElementById(AddId+'until').value = d22;
}
}
function SetCalendarDate(AddId, dir) {
curr_month = AddMonth(curr_month,dir)
DrawMonths(AddId, curr_month);
}
function AddMonth(month,amount) {
if (amount == 1) {
if (month.getMonth() == 12) {
return (new Date(month.getFullYear()+1,1,1))
} else {
return (new Date(month.getFullYear(),month.getMonth()+1,1,1))
}
} else {
if (month.getMonth() == 1) {
return (new Date(month.getFullYear()-1,12,1))
} else {
return (new Date(month.getFullYear(),month.getMonth()-1,1,1))
}
}
}
function DrawMonths(AddId, date) {
mon = date;
document.getElementById(AddId+'CalendarFirstMonth').innerHTML = GenerateMonths(AddId, mon);
document.getElementById(AddId+'CalendarFirstMonthName').innerHTML = Months[mon.getMonth()]+' ' +mon.getFullYear();
mon = AddMonth(date,1);
document.getElementById(AddId+'CalendarSecondMonth').innerHTML = GenerateMonths(AddId, mon);
document.getElementById(AddId+'CalendarSecondMonthName').innerHTML = Months[mon.getMonth()]+' ' +mon.getFullYear();
}
function CalendarShowHide(AddId, buttonId, hide) {
// document.body.onclick = CalendarHide(AddId);
if (hide == null) hide = (document.getElementById(AddId+'CalendarLayer').style.visibility == 'visible')?0:1;
if (hide == 1) {
document.getElementById(AddId+'CalendarLayer').style.visibility='visible'
document.getElementById(AddId+buttonId).src = 'imgs/dn_.gif'
} else {
document.getElementById(AddId+'CalendarLayer').style.visibility='hidden'
document.getElementById(AddId+buttonId).src = 'imgs/dn.gif'
}
DrawMonths(AddId, curr_month);
}
function CalendarHide(AddId) {
CalendarShowHide(AddId, 'CalendarDnButton',1);
}
|
Вот html-файлик, подключающий три календаря: | Код |
<html>
<head>
<title>Календарь</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body bgcolor=white text=#6E6E77 link=#04498F vlink=#04498F alink=#04498F leftMargin=0 rightMargin=0 topMargin=0 marginwidth=0 marginheight=0>
<!--First Calendar--->
<br><br>
<table border=0 cellpadding=0 cellspacing=0 height=50 width=60% align=center>
<tr valign=top>
<form name="form" method="get">
<td width=25%>
<input id="period1_CalendarDnButton" onfocus="CalendarShowHide('period1_', 'CalendarDnButton', 0)" name="text" size="50">
</td>
<td align="left" width="15%">
<script type="text/javascript" src="mycalendar.js"></script>
<script type="text/javascript">MyCalendar('period1_', '10.08.2005', '10.11.2005'); </script>
</td>
<td width=15%><input type=text onfocus="CalendarShowHide('period1_', 'CalendarDnButton', 0)" name=price_to size=15 style='width:100%'></td>
<td width=2%><input type=image title="Íàéòè" src=imgs/find1.gif style="margin-left:10px;" border=0></td>
</tr>
</form></table>
<br><br> <br><br>
<!--Second Calendar--->
<br><br>
<table border=0 cellpadding=0 cellspacing=0 height=50 width=60% align=center>
<tr valign=top>
<form name="form" method="get">
<td width=25%>
<input onfocus="CalendarShowHide('period2_', 'CalendarDnButton', 0)" name="text" size="50">
</td>
<td align="left" width="15%">
<script type="text/javascript"> MyCalendar('period2_', '01.10.2005', '10.10.2005'); </script>
</td>
<td width=15%><input type=text onfocus="CalendarShowHide('period2_', 'CalendarDnButton', 0)" name=price_to size=15 style='width:100%'></td>
<td width=2%><input type=image title="Íàéòè" src=imgs/find1.gif style="margin-left:10px;" border=0></td>
</tr>
</form></table>
<br><br> <br><br>
<!--Third Calendar--->
<br><br>
<table border=0 cellpadding=0 cellspacing=0 height=50 width=60% align=center>
<tr valign=top>
<form name="form" method="get">
<td width=25%>
<input onfocus="CalendarShowHide('period3_', 'CalendarDnButton', 0)" name="text" size="50">
</td>
<td align="left" width="15%">
<script type="text/javascript"> MyCalendar('period3_', '30.11.2005', '05.12.2005'); </script>
</td>
<td width=15%><input type=text onfocus="CalendarShowHide('period3_', 'CalendarDnButton', 0)" name=price_to size=15 style='width:100%'></td>
<td width=2%><input type=image title="Íàéòè" src=imgs/find1.gif style="margin-left:10px;" border=0></td>
</tr>
</form></table>
</body>
</html>
|
Знаю, что трудно будет сразу разобраться, помогите, плиззз. Заранее благодарен.  Это сообщение отредактировал(а) sharq - 1.10.2005, 13:45 --------------------
[color=gray]There's More Than One Way To Do It[/color] |
Большая проблема с календариком... не знаю, что уже делать 
Дата 1.10.2005, 13:42 (
Загрузка ...
