Тема: HTA: интерактивный ввод даты
Одним из путей реализации интерактивного ввода даты является использование элемента управления Microsoft Calendar Control - "Календарь"(библиотека MSCAL.OCX).
1]В данном HTA примере происходит манипуляция с размерами "Календаря". Щелкните по кнопке "Ввод даты" чтобы отобразить "Календарь" и установите дату. Повторный щелчок по этой же кнопке приведет к скрытию "Календаря".
<!--Пример использования Microsoft Calendar Control-->
<META HTTP-EQUIV=Content-Type content='text/html;charset=windows-1251'>
<HTML>
<TITLE>Пример Microsoft Calendar Control</TITLE>
<HEAD>
<STYLE TYPE='text/css'>
BODY {background-color: #c0c0c0;}
PRE {border: 1px; border-style: solid; font-family: Lucida Console; font-size: 20px; background-color: #b5bcf2;}
OBJECT {border: 1px solid red; position: relative;}
</STYLE>
<HTA:APPLICATION
ID="m4"
APPLICATIONNAME="MSCAL"
/>
</HEAD>
<BODY SCROLL="NO">
<INPUT TYPE='TEXT' ID='dateInp' style='width: 200; font-family: Verdana;font-weight: 700;'>
<INPUT TYPE='BUTTON' VALUE='Ввод даты' ID='dateInv'><BR>
<OBJECT ID="CalendarObject"></OBJECT><BR>
<PRE>
Щелкните по кнопке 'Ввод даты'
чтобы отобразить календарь и установите дату.
Повторный щелчок по этой же кнопке приведет
к скрытию календаря.
</PRE>
<SCRIPT>
var IsVisible =false
var dt =new Date
//-------------------------------------------------------------------
with (CalendarObject)
{
//Установка свойств объекта Календарь
classid="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
style.height=0
style.width=0
BackColor=16436877
ShowDays=1
today()
}
//-------------------------------------------------------------------
function CalendarObject_AfterUpdate_js()
{
//Реакция Календаря на изменения даты
//исходит из области VBScript где обрабатывается
//событие _AfterUpdate
with (CalendarObject)
{
dt.setDate(Day)
dt.setMonth(Month-1)
dt.setYear(Year)
dateVal=Day+'.'+Month+'.'+Year
}
dateInp.value=dateVal
}
//-------------------------------------------------------------------
function dateInv.onclick()
{
//Установка состояния Календаря,в зависимости от
//нажатия кнопки
if (!IsVisible)
{
with (CalendarObject)
{
style.height=200
style.width=200
today()
}
IsVisible=true
}
else
{
with (CalendarObject)
{
style.height=0
style.width=0
}
IsVisible=false
alert(dt)
}
}
</SCRIPT>
<SCRIPT Language="VBScript">
Sub CalendarObject_AfterUpdate()
CalendarObject_AfterUpdate_js()
End Sub
</SCRIPT>
</BODY>
</HTML>
***
2]В данном HTA примере "Календарь" отображается в окне модального диалога.
Потребуется создать HTA файл с произвольным именем и следующим содержимым:
<!--Пример использования Microsoft Calendar Control-->
<!--Основной HTA-->
<META HTTP-EQUIV=Content-Type content='text/html;charset=windows-1251'>
<HTML>
<TITLE>Пример Microsoft Calendar Control</TITLE>
<HEAD>
<STYLE TYPE='text/css'>
BODY {background-color: white;}
PRE {border: 1px; border-style: solid; font-family: Lucida Console; font-size: 14px; background-color: #b5bcf2;}
INPUT {border: 1px solid olive;}
</STYLE>
<HTA:APPLICATION
ID="m4"
APPLICATIONNAME="MSCAL"
/>
</HEAD>
<BODY SCROLL="NO">
<INPUT TYPE='TEXT' ID='dateInp' style='width: 200; font-family: Verdana;font-weight: 700;'>
<INPUT TYPE='BUTTON' VALUE='Ввод даты' ID='dateInv'><BR>
<PRE>
Щелкните по кнопке 'Ввод даты'
чтобы отобразить календарь и установите дату.
</PRE>
<SCRIPT>
dt=new Date
//-------------------------------------------------------------------
dateInp.readOnly=true
dateInp.value=dt.getDate()+'.'+eval(dt.getMonth()+1)+'.'+dt.getYear()
//-------------------------------------------------------------------
function dateInv.onclick()
{
//Вызов модального диалога Календаря
ret=window.showModalDialog('mscal.htm','')
if (ret){dateInp.value=ret}
}
//-------------------------------------------------------------------
</SCRIPT>
</BODY>
</HTML>
Далее, создать файл со строго заданным именем mscal.htm и разместить его в одном каталоге вместе с предыдущим HTA файлом. Содержимое:
<!--Пример использования Microsoft Calendar Control-->
<!--Файл модального диалога mscal.htm-->
<META HTTP-EQUIV=Content-Type content='text/html;charset=windows-1251'>
<HTML>
<TITLE>Microsoft Calendar Control</TITLE>
<HEAD>
<STYLE TYPE='text/css'>
OBJECT {border: 1px solid red; position: relative;}
INPUT {border: 1px solid blue; width: 90}
</STYLE>
</HEAD>
<BODY SCROLL="NO">
<OBJECT ID="CalendarObject"></OBJECT><BR>
 <BR>
 <INPUT TYPE='BUTTON' VALUE='Ok' ID='dateOk'>
 <INPUT TYPE='BUTTON' VALUE='Cancel' ID='dateCancel'>
<SCRIPT>
dialogHeight =320/16
dialogWidth =320/16
//-------------------------------------------------------------------
with (CalendarObject)
{
//Установка свойств объекта Календарь
classid="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
style.height =220
style.width =300
BackColor =16436877
ShowDays =1
today()
}
//-------------------------------------------------------------------
function CalendarObject_AfterUpdate_js()
{
//Только для совместимости с VBScript
return
}
//-------------------------------------------------------------------
function dateOk.onclick()
{
//Кнопка Ok
with (CalendarObject)
{
dateVal=Day+'.'+Month+'.'+Year
}
returnValue=dateVal
if (!CalendarObject.Day){returnValue=''}
close()
}
//-------------------------------------------------------------------
function dateCancel.onclick()
{
//Кнопка Отмена
returnValue=''
close()
}
//-------------------------------------------------------------------
</SCRIPT>
<SCRIPT Language="VBScript">
' Обработчик события AfterUpdate.Необходим,т.к
' Календарь оптимизирован под VBScript
Sub CalendarObject_AfterUpdate()
CalendarObject_AfterUpdate_js()
End Sub
</SCRIPT>
</BODY>
</HTML>
После запуска HTA, щелкните по кнопке "Ввод даты" чтобы отобразить модальный диалог содержащий "Календарь" и установите дату.Закройте диалог - установленная дата отобразится в INPUT-поле основного документа.