<!-- 
Пользовательский элемент DatePicker
Автор Роман Панышев 
EMail: ironahot@idknet.com
-->

<public:component tagName=DatePicker>
<public:defaults tabStop=true viewLinkContent /> 
<public:attach event="oncontentready" onevent="fnInit"/>
<public:attach event="onfocus" onevent="fnFocus" />
<public:method name="getDate" />
<public:method name="setDate" />
<public:method name="setDisabled" />
<public:method name="setEnabled" />
<public:method name="calHide" />
<public:property name="retDate" />
<public:property name="insDate" />
</public:component>

<body bottommargin=0 leftmargin=0 rightmargin=0 topmargin=0>

<!-- Видимая часть айсберга --> 
<input type=text id=foo  
   style="left:0px; top:0px; height:22; width:120;
   font-face:Arial; font-weight:700; border:lightgrey 2px inset; text-align:center">  
   
  <IMG id=img_down width=17 height=17 SRC="down.png" style="position:absolute;left:100;top:2;border:lightgrey 1px outset;"
	onMouseDown="img_down.style.border = 'lightgrey 1px inset'" 
	onMouseUp="img_down.style.border = 'lightgrey 1px outset'"
	onMouseOver="img_down.style.cursor = 'hand'"
	onMouseOut="img_down.style.cursor = ''">

<!-- Непосредственно сам календарь -->
<center>
<div id=calendar 
	style="position:static;font-face:Arial; height:130; width:100;
	background-color:'white'">
<table id=tYear cellspacing=0 cellpadding=0 style="font-family:'Arial';font-size:12;
		color:'maroon';font-weight:900;width:100;">
	<tr>
		<td align=center>
			<IMG id=lImg1 SRC="back.png" style="border:lightgrey 1px outset;"
			onMouseDown="lImg1.style.border = 'lightgrey 1px inset';ChangeYear(1)" 
			onMouseUp="lImg1.style.border = 'lightgrey 1px outset'"
			onMouseOver="lImg1.style.cursor='hand'" 
			onMouseOut="lImg1.style.cursor=''" width="16" height="16">
		</td>
		<td id=frowYear align=center width=80></td>
		<td align=center>
			<IMG id=rImg1 SRC="forwd.png" style="border:lightgrey 1px outset;"
			onMouseDown="rImg1.style.border = 'lightgrey 1px inset';ChangeYear(2)" 
			onMouseUp="rImg1.style.border = 'lightgrey 1px outset'"
			onMouseOver="rImg1.style.cursor='hand'" 
			onMouseOut="rImg1.style.cursor=''" width="16" height="16">
		</td>
	</tr>
</table>
<table id=tMonth cellspacing=0 cellpadding=0 style="font-family:'Arial';font-size:11;
	color:'blue';font-weight:900;width:100;">
	<tr>
		<td align=center>
			<IMG id=lImg2 SRC="rewnd.png" style="border:lightgrey 1px outset;"
			onMouseDown="lImg2.style.border = 'lightgrey 1px inset';ChangeMonth(1)" 
			onMouseUp="lImg2.style.border = 'lightgrey 1px outset'"
			onMouseOver="lImg2.style.cursor='hand'" 
			onMouseOut="lImg2.style.cursor=''" width="15" height="16">
		</td>
		<td id=frowMonth align=center width=80></td>
		<td align=center>
			<IMG id=rImg2 SRC="fastf.png" style="border:lightgrey 1px outset;"
			onMouseDown="rImg2.style.border = 'lightgrey 1px inset';ChangeMonth(2)" 
			onMouseUp="rImg2.style.border = 'lightgrey 1px outset'"
			onMouseOver="rImg2.style.cursor='hand'" 
			onMouseOut="rImg2.style.cursor=''" width="16" height="16">
		</td>
	</tr>
</table>
	
<table id=tDay style="font-family:'Arial';font-size:8;color:'red';font-weight:700;width:100;">
	<tr>
		<td>Пн</td>
		<td>Вт</td>
		<td>Ср</td>
		<td>Чт</td>
		<td>Пт</td>
		<td>Сб</td>
		<td>Вс</td>
	</tr>
</table>
	
<table id=cal style="font-family:'Arial';font-size:9;color:'black';
	font-weight:700;width:100;"
	onMouseOver="cal.style.cursor='hand'" onMouseOut="cal.style.cursor=''" 
	onClick="ClickedDay()">
	<tr>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
	</tr>
	<tr>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
	</tr>
	<tr>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
	</tr>
	<tr>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
	</tr>
	<tr>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
	</tr>
	<tr>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
		<td align=right></td>
	</tr>
</table>
</div>
</center>

</body>

<script language=vbscript>


Dim presDay, presMonth, presYear
Dim selDay, selMonth, selYear

presDay = Day(Date)
presYear = Year(Date)
presMonth = Month(Date)
selDay = Day(Date)

Function fnInit()
	With calendar.style
		.borderBottomColor = "black"
		.borderLeftColor = "silver"
		.borderRightColor = "black"
		.borderTopColor = "silver"
		.borderWidth = "2px"
		.borderStyle = "solid"
	End With

	foo.value = FormatDateTime(Date, vbShortDate)
	Call fnResize()
	calendar.style.display = "none"
	frowYear.innerText = Year(Date)
	frowMonth.innerText = MonthName(Month(Date)) '& " " & Year(Date)
	Call BuildCal()
	Call UploadDayColor()
End Function

Function fnResize()
	calendar.style.left = foo.parentElement.offsetLeft + foo.offsetLeft + foo.offsetWidth - calendar.offsetWidth  
	calendar.style.top = foo.parentElement.offsetTop + foo.offsetTop + foo.offsetHeight
End Function

Function img_down_onClick()
	If calendar.style.display = "" Then
		calendar.style.display = "none"
	Else
		calendar.style.display = ""
	End If
End Function

Function foo_onKeyPress()
	Dim fooValue
	fooValue = foo.value
		If window.event.keyCode = 13 Then
			If Not IsDate(fooValue) Then
				MsgBox "Введенное значение не является датой", vbOKOnly+vbCritical,"Ошибка ввода данных"
			Else
				insDate = fooValue
				Call setDate()
			End If
		Else
			Exit Function
		End If
End Function

Function foo_onFocusOut()
	Dim fooValue
	fooValue = foo.value
	If Not IsDate(fooValue) Then
		MsgBox "Введенное значение не является датой", vbOKOnly+vbCritical,"Ошибка ввода данных"
		foo.focus
	Else
		insDate = fooValue
		Call setDate()
	End If
End Function

Function BuildCal()
Dim firstdate, firstday, nextday, daysinmonth, cday
	
	'очищаем календарь
	Call ClearCal()
	
	'получаем полную дату первого числа месяца в формате "dd.MM.YYYY"
	firstdate = DateSerial(presYear, presMonth, 1) 'DateSerial(Year(Date), Month(Date), 1)
	'получаем день недели первого числа месяца (для русского календаря
	'сдвигаем полученный день на один назад, т.к. у нас неделя начинается
	'с понедельника, а у проклятых америкашек - с воскресенья)
	firstday = WeekDay(firstdate) - 1
	If firstday = 0 Then firstday = 7
	'получаем количество дней в месяце
	daysinmonth = DateDiff("d", firstdate, DateSerial(presYear, presMonth+1, 1))
	
	nextday = 1
	For i = 0 To cal.rows.length - 1
			For cday = 1 To 7
				If firstday > cday Then
					cal.rows(i).cells(cday - 1).innerText = ""
				Else
					cal.rows(i).cells(cday - 1).innerText = nextday
					cal.rows(i).cells(6).style.color = "red"
					nextday = nextday + 1
					firstdate = DateSerial(presYear, presMonth, nextday)
					firstday = WeekDay(firstdate) - 1
					If firstday = 0 Then firstday = 7
					If nextday > daysinmonth Then Exit Function
				End If
			Next
	Next

End Function

Function ClickedDay()
	Dim rowscount, cellscount, a, b
	
	For a = 0 To cal.rows.length - 1
		For b = 0 To cal.rows(a).cells.length - 1
			cal.rows(a).cells(b).bgcolor = "white"
		Next
	Next
	Set it = window.event.srcElement
	
	If it.innerText = "" Then
		Exit Function
	Else
		it.bgcolor = "aqua"
	End If
	
	selDay = it.innerText
	
	Call UpdateCalText()
	
End Function

Function ClearCal()
	For a = 0 To cal.rows.length - 1
		For b = 0 To cal.rows(a).cells.length - 1
			cal.rows(a).cells(b).innerText = ""
			cal.rows(a).cells(b).bgcolor = "white"
		Next
	Next
End Function

Sub ChangeMonth(x)
'при выборе месяца, меняет вид календаря
	If x = 1 Then
		If presMonth > 1 Then
			frowMonth.innerText = MonthName(presMonth - 1)
			presMonth = presMonth - 1
		Else
			presMonth = 13
			frowMonth.innerText = MonthName(presMonth - 1)
			presMonth = presMonth - 1
		End If
	Call BuildCal()
	Else
		If presMonth < 12 Then
			frowMonth.innerText = MonthName(presMonth + 1)
			presMonth = presMonth + 1
		Else
			presMonth = 0
			frowMonth.innerText = MonthName(presMonth + 1)
			presMonth = presMonth + 1
		End If
	Call BuildCal()
	End If
	
	Call UploadDayColor()
	Call UpdateCalText()
End Sub

Sub ChangeYear(x)
'при выборе года, меняет вид календаря
	If x = 1 Then
		frowYear.innerText = presYear - 1
		presYear = presYear - 1
	Else
		frowYear.innerText = presYear + 1		
		presYear = presYear + 1
	End if
	Call BuildCal()
	Call UploadDayColor()
	Call UpdateCalText()
End Sub

Function UpdateCalText()
'в зависимости от выбранной даты, месяца и года, обновляем дату в текстовом поле
Dim ss
	
	ss = selDay & "." & presMonth & "." & presYear
	If IsDate(ss) Then	foo.innerText = FormatDateTime(ss, vbShortDate)
	
End Function

Function UploadDayColor()
'при переходе по месяцам возвращаем цвет для уже указанной ранее даты
	For a = 0 To cal.rows.length - 1
		For b = 0 To cal.rows(a).cells.length - 1
			gg = StrComp(cal.rows(a).cells(b).innerText, selDay, 1)
			If gg = 0 Then 
				cal.rows(a).cells(b).bgcolor = "aqua"
				Exit Function
			End If
		Next
	Next
End Function

Function getDate()
	retDate = FormatDateTime(foo.value, vbShortDate)
End Function

Function setDate()
	If Not IsDate(insDate) Then Exit Function
	foo.value = FormatDateTime(insDate, vbShortDate)
	presDay = Day(CDate(foo.value))
	presMonth = Month(CDate(foo.value))
	presYear = Year(CDate(foo.value))
	selDay = Day(CDate(foo.value))
	frowYear.innerText = presYear
	frowMonth.innerText = MonthName(presMonth)
	Call BuildCal()
	Call UploadDayColor()
End Function

Function calHide()
	calendar.style.display = "none"
End Function

Function fnFocus()
	foo.select 
End Function

Function setDisabled()
	foo.disabled = True
	foo.style.backgroundColor = "#e6e6e6"
	img_down.disabled = True
End Function

Function setEnabled()
	foo.disabled = False
	foo.style.backgroundColor = ""
	img_down.disabled = False
End Function
</script>
