Проблема со средством выбора даты и времени в javascript

#javascript

Вопрос:

Я хочу предоставить пользователю возможность выбора даты и времени с помощью некоторого элемента управления. Для этого я попытался использовать средство выбора даты и времени Javascript, которое я напрямую копирую и передаю из Интернета, но оно не работает. Я получил это из здесь.

Пожалуйста, помогите мне в решении этой проблемы. Есть ли какой-либо другой способ предоставить пользователю эту возможность? Я использую ASP.NET C #. Я совершенно новичок в javascript, а также в Jquery.

// Вот код для java script. //Название Javascript: My Date Time Picker //Дата создания: 16 ноября 2003 23:19 //Автор сценария: TengYong Ng //Веб-сайт:http://www.rainforestnet.com //Copyright (c) 2003 TengYong Ng //Имя файла: DateTimePicker.js //Версия: 0.8 //Контакт: contact@rainforestnet.com // Примечание: Дано разрешение на использование этого скрипта в ЛЮБЫХ приложениях, если строки заголовка // оставить без изменений.

//Глобальные переменные var winCal; var dtToday=new Date(); var Cal; var docCal; var MonthName=[«Январь», «Февраль», «Март», «апрель», «Май», «Июнь»,»Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь»]; var WeekDayName= [«Воскресенье», «Понедельник», «Вторник», «Среда», «четверг», » Пятница»,»Суббота»]; var exDateTime;//Существующие дата и время

 //Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then  Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24

 var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
var WeekHeadColor="#0099CC";//Background Color in Week header.
var SundayColor="#6699FF";//Background color of Sunday.
var SaturdayColor="#CCCCFF";//Background color of Saturday.
var WeekDayColor="white";//Background color of weekdays.
var FontColor="blue";//color of font in Calendar day cell.
var TodayColor="#FFFF33";//Background color of today.
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
var YrSelColor="#cc0033";//color of font of Year selector.
var ThemeBg="";//Background image of Calendar window.
//end Configurable parameters
//end Global variable

function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
{

    alert('Hi Calender');
Cal=new Calendar(dtToday);
if ((pShowTime!=null) amp;amp; (pShowTime))
{
    Cal.ShowTime=true;
    if ((pTimeMode!=null) amp;amp;((pTimeMode=='12')||(pTimeMode=='24')))
    {
        TimeMode=pTimeMode;
    }       
}   
if (pCtrl!=null)
    Cal.Ctrl=pCtrl;
if (pFormat!=null)
    Cal.Format=pFormat.toUpperCase();

exDateTime=document.getElementById(pCtrl).value;
if (exDateTime!="")//Parse Date String
{
    var Sp1;//Index of Date Separator 1
    var Sp2;//Index of Date Separator 2 
    var tSp1;//Index of Time Separator 1
    var tSp1;//Index of Time Separator 2
    var strMonth;
    var strDate;
    var strYear;
    var intMonth;
    var YearPattern;
    var strHour;
    var strMinute;
    var strSecond;
    //parse month
    Sp1=exDateTime.indexOf(DateSeparator,0)
    Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1) 1));

    if ((Cal.Format.toUpperCase()=="DDMMYYYY") ||  (Cal.Format.toUpperCase()=="DDMMMYYYY"))
    {
        strMonth=exDateTime.substring(Sp1 1,Sp2);
        strDate=exDateTime.substring(0,Sp1);
    }
    else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
    {
        strMonth=exDateTime.substring(0,Sp1);
        strDate=exDateTime.substring(Sp1 1,Sp2);
    }
    if (isNaN(strMonth))
        intMonth=Cal.GetMonthIndex(strMonth);
    else
        intMonth=parseInt(strMonth,10)-1;   
    if ((parseInt(intMonth,10)>=0) amp;amp; (parseInt(intMonth,10)<12))
        Cal.Month=intMonth;
    //end parse month
    //parse Date
    if ((parseInt(strDate,10)<=Cal.GetMonDays()) amp;amp; (parseInt(strDate,10)>=1))
        Cal.Date=strDate;
    //end parse Date
    //parse year
    strYear=exDateTime.substring(Sp2 1,Sp2 5);
    YearPattern=/^d{4}$/;
    if (YearPattern.test(strYear))
        Cal.Year=parseInt(strYear,10);
    //end parse year
    //parse time
    if (Cal.ShowTime==true)
    {
        tSp1=exDateTime.indexOf(":",0)
        tSp2=exDateTime.indexOf(":",(parseInt(tSp1) 1));
        strHour=exDateTime.substring(tSp1,(tSp1)-2);
        Cal.SetHour(strHour);
        strMinute=exDateTime.substring(tSp1 1,tSp2);
        Cal.SetMinute(strMinute);
        strSecond=exDateTime.substring(tSp2 1,tSp2 3);
        Cal.SetSecond(strSecond);
    }   
}
 winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=245,resizable=0,top=" cnTop ",left=" cnLeft);
docCal=winCal.document;
RenderCal();
}

function RenderCal()
{
var vCalHeader;
var vCalData;
var vCalTime;
var i;
var j;
var SelectStr;
var vDayCount=0;
var vFirstDay;

docCal.open();
docCal.writeln("<html><head><title>" WindowTitle "</title>");
docCal.writeln("<script>var winMain=window.opener;</script>");
docCal.writeln("</head><body background='" ThemeBg "' link=" FontColor " vlink=" FontColor "><form name='Calendar'>");

vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align="center" valign="top">n";
//Month Selector
vCalHeader ="<tr>n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>n";
vCalHeader ="<select name="MonthSelector" onChange="javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();">n";
for (i=0;i<12;i  )
{
    if (i==Cal.Month)
        SelectStr="Selected";
    else
        SelectStr="";   
    vCalHeader ="<option " SelectStr " value >" MonthName[i] "n";
}
vCalHeader ="</select></td>";
//Year selector
vCalHeader ="n<td align='right'><a href="javascript:winMain.Cal.DecYear();winMain.RenderCal()"><b><font color="" YrSelColor ""><</font></b></a><font face="Verdana" color="" YrSelColor "" size=2><b> " Cal.Year " </b></font><a href="javascript:winMain.Cal.IncYear();winMain.RenderCal()"><b><font color="" YrSelColor "">></font></b></a></td></tr></table></td>n";   
vCalHeader ="</tr>";
//Calendar header shows Month and Year
if (ShowMonthYear)
    vCalHeader ="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='" MonthYearColor "'><b>" Cal.GetMonthName(ShowLongMonth) " " Cal.Year "</b></font></td></tr>n";
//Week day header
vCalHeader ="<tr bgcolor=" WeekHeadColor ">";
for (i=0;i<7;i  )
{
    vCalHeader ="<td align='center'><font face='Verdana' size='2'>" WeekDayName[i].substr(0,WeekChar) "</font></td>";
}
vCalHeader ="</tr>";    
docCal.write(vCalHeader);

//Calendar detail
CalDate=new Date(Cal.Year,Cal.Month);
CalDate.setDate(1);
vFirstDay=CalDate.getDay();
vCalData="<tr>";
for (i=0;i<vFirstDay;i  )
{
    vCalData=vCalData GenCell();
    vDayCount=vDayCount 1;
}
for (j=1;j<=Cal.GetMonDays();j  )
{
    var strCell;
    vDayCount=vDayCount 1;
    if ((j==dtToday.getDate())amp;amp;(Cal.Month==dtToday.getMonth())amp;amp;(Cal.Year==dtToday.getFullYear()))
        strCell=GenCell(j,true,TodayColor);//Highlight today's date
    else
    {
        if (j==Cal.Date)
        {
            strCell=GenCell(j,true,SelDateColor);
        }
        else
        {    
            if (vDayCount%7==0)
                strCell=GenCell(j,false,SaturdayColor);
            else if ((vDayCount 6)%7==0)
                strCell=GenCell(j,false,SundayColor);
            else
                strCell=GenCell(j,null,WeekDayColor);
        }       
    }                       
    vCalData=vCalData strCell;

    if((vDayCount%7==0)amp;amp;(j<Cal.GetMonDays()))
    {
        vCalData=vCalData "</tr>n<tr>";
    }
}
docCal.writeln(vCalData);   
//Time picker
if (Cal.ShowTime)
{
    var showHour;
    showHour=Cal.getShowHour();     
    vCalTime="<tr>n<td colspan='7' align='center'>";
    vCalTime ="<input type='text' name='hour' maxlength=2 size=1 style="WIDTH: 22px" value=" showHour " onchange="javascript:winMain.Cal.SetHour(this.value)">";
    vCalTime =" : ";
    vCalTime ="<input type='text' name='minute' maxlength=2 size=1 style="WIDTH: 22px" value=" Cal.Minutes " onchange="javascript:winMain.Cal.SetMinute(this.value)">";
    vCalTime =" : ";
    vCalTime ="<input type='text' name='second' maxlength=2 size=1 style="WIDTH: 22px" value=" Cal.Seconds " onchange="javascript:winMain.Cal.SetSecond(this.value)">";
    if (TimeMode==12)
    {
        var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
        var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";

        vCalTime ="<select name="ampm" onchange="javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);">";
        vCalTime ="<option " SelectAm " value="AM">AM</option>";
        vCalTime ="<option " SelectPm " value="PM">PM<option>";
        vCalTime ="</select>";
    }   
    vCalTime ="n</td>n</tr>";
    docCal.write(vCalTime);
}   
//end time picker
docCal.writeln("n</table>");
docCal.writeln("</form></body></html>");
docCal.close();

}

 function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
{
var PValue;
var PCellStr;
var vColor;
var vHLstr1;//HighLight string
var vHlstr2;
var vTimeStr;

if (pValue==null)
    PValue="";
else
    PValue=pValue;

if (pColor!=null)
    vColor="bgcolor="" pColor """;
else
    vColor="";  
if ((pHighLight!=null)amp;amp;(pHighLight))
    {vHLstr1="color='red'><b>";vHLstr2="</b>";}
else
    {vHLstr1=">";vHLstr2="";}   

if (Cal.ShowTime)
{
    vTimeStr="winMain.document.getElementById('" Cal.Ctrl "').value =' ' " "winMain.Cal.getShowHour()" " ':' " "winMain.Cal.Minutes" " ':' " "winMain.Cal.Seconds";
    if (TimeMode==12)
        vTimeStr =" ' ' winMain.Cal.AMorPM";
}   
else
    vTimeStr="";        
PCellStr="<td " vColor " width=" CellWidth " align='center'><font face='verdana' size='2'" vHLstr1 "<a href="javascript:winMain.document.getElementById('" Cal.Ctrl "').value='" Cal.FormatDate(PValue) "';" vTimeStr ";window.close();">" PValue "</a>" vHLstr2 "</font></td>";
return PCellStr;

}

 function Calendar(pDate,pCtrl)
{
//Properties
this.Date=pDate.getDate();//selected date
this.Month=pDate.getMonth();//selected month number
this.Year=pDate.getFullYear();//selected year in 4 digits
this.Hours=pDate.getHours();    

if (pDate.getMinutes()<10)
    this.Minutes="0" pDate.getMinutes();
else
    this.Minutes=pDate.getMinutes();

if (pDate.getSeconds()<10)
    this.Seconds="0" pDate.getSeconds();
else        
    this.Seconds=pDate.getSeconds();

this.MyWindow=winCal;
this.Ctrl=pCtrl;
this.Format="ddMMyyyy";
this.Separator=DateSeparator;
this.ShowTime=false;
if (pDate.getHours()<12)
    this.AMorPM="AM";
else
    this.AMorPM="PM";   
}

function GetMonthIndex(shortMonthName)
{
for (i=0;i<12;i  )
{
    if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
    {   return i;}
}
}
Calendar.prototype.GetMonthIndex=GetMonthIndex;

function IncYear()
{   Cal.Year  ;}
Calendar.prototype.IncYear=IncYear;

function DecYear()
{   Cal.Year--;}
Calendar.prototype.DecYear=DecYear;

function SwitchMth(intMth)
{   Cal.Month=intMth;}
Calendar.prototype.SwitchMth=SwitchMth;

function SetHour(intHour)
{   
var MaxHour;
var MinHour;
if (TimeMode==24)
{   MaxHour=23;MinHour=0}
else if (TimeMode==12)
{   MaxHour=12;MinHour=1}
else
    alert("TimeMode can only be 12 or 24");     
var HourExp=new RegExp("^\d\d$");
if (HourExp.test(intHour) amp;amp; (parseInt(intHour,10)<=MaxHour) amp;amp; (parseInt(intHour,10)>=MinHour))
{   
    if ((TimeMode==12) amp;amp; (Cal.AMorPM=="PM"))
    {
        if (parseInt(intHour,10)==12)
            Cal.Hours=12;
        else    
            Cal.Hours=parseInt(intHour,10) 12;
    }   
    else if ((TimeMode==12) amp;amp; (Cal.AMorPM=="AM"))
    {
        if (intHour==12)
            intHour-=12;
        Cal.Hours=parseInt(intHour,10);
    }
    else if (TimeMode==24)
        Cal.Hours=parseInt(intHour,10); 
}
}
Calendar.prototype.SetHour=SetHour;

function SetMinute(intMin)
{
var MinExp=new RegExp("^\d\d$");
if (MinExp.test(intMin) amp;amp; (intMin<60))
    Cal.Minutes=intMin;
}
Calendar.prototype.SetMinute=SetMinute;

function SetSecond(intSec)

{

var SecExp=новое регулярное выражение(«^d d $»);
если (SecExp.test(intSec) amp;amp; (intSec<60))
Cal.Seconds = intSec;
}
Календарь.прототип.setSecond=setSecond;

 function SetAmPm(pvalue)
{
this.AMorPM=pvalue;
if (pvalue=="PM")
{
    this.Hours=(parseInt(this.Hours,10)) 12;
    if (this.Hours==24)
        this.Hours=12;
}   
else if (pvalue=="AM")
    this.Hours-=12; 
}
Calendar.prototype.SetAmPm=SetAmPm;

function getShowHour()
{
var finalHour;
    if (TimeMode==12)
    {
    if (parseInt(this.Hours,10)==0)
    {
        this.AMorPM="AM";
        finalHour=parseInt(this.Hours,10) 12;   
    }
    else if (parseInt(this.Hours,10)==12)
    {
        this.AMorPM="PM";
        finalHour=12;
    }       
    else if (this.Hours>12)
    {
        this.AMorPM="PM";
        if ((this.Hours-12)<10)
            finalHour="0" ((parseInt(this.Hours,10))-12);
        else
            finalHour=parseInt(this.Hours,10)-12;   
    }
    else
    {
        this.AMorPM="AM";
        if (this.Hours<10)
            finalHour="0" parseInt(this.Hours,10);
        else
            finalHour=this.Hours;   
    }
}
else if (TimeMode==24)
{
    if (this.Hours<10)
        finalHour="0" parseInt(this.Hours,10);
    else    
        finalHour=this.Hours;
}   
return finalHour;   
}               
Calendar.prototype.getShowHour=getShowHour;     

function GetMonthName(IsLong)
{
var Month=MonthName[this.Month];
if (IsLong)
    return Month;
else
    return Month.substr(0,3);
}
Calendar.prototype.GetMonthName=GetMonthName;

function GetMonDays()//Get number of days in a month
{
var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (this.IsLeapYear())
{
    DaysInMonth[1]=29;
}   
return DaysInMonth[this.Month]; 
}
Calendar.prototype.GetMonDays=GetMonDays;

function IsLeapYear()
{
if ((this.Year%4)==0)
{
    if ((this.Year%100==0) amp;amp; (this.Year%400)!=0)
    {
        return false;
    }
    else
    {
        return true;
    }
}
else
{
    return false;
}
}
Calendar.prototype.IsLeapYear=IsLeapYear;

function FormatDate(pDate)
{
if (this.Format.toUpperCase()=="DDMMYYYY")
    return (pDate DateSeparator (this.Month 1) DateSeparator this.Year);
else if (this.Format.toUpperCase()=="DDMMMYYYY")
    return (pDate DateSeparator this.GetMonthName(false) DateSeparator this.Year);
else if (this.Format.toUpperCase()=="MMDDYYYY")
    return ((this.Month 1) DateSeparator pDate DateSeparator this.Year);
else if (this.Format.toUpperCase()=="MMMDDYYYY")
    return (this.GetMonthName(false) DateSeparator pDate DateSeparator this.Year);          
}
Calendar.prototype.FormatDate=FormatDate;

Ниже приведен вызов функции javascript

Здесь вызывается функция NewCal (), которую я проверил, сохранив предупреждающее сообщение в этой функции, как показано в приведенном выше коде, но дальнейший скрипт не выполняется.

1. Если вы покажете нам соответствующий код, мы сможем помочь

2. Вам нужно предоставить дополнительную информацию о том, какая его часть не работает. Или лучше, если вы дадите какой-нибудь код, который вы используете

3. Почему вы не используете jQuery UI datepicker? jqueryui.com/demos/datepicker ?

4. @Pav: Почему вы удалили свой ответ? Совершенно справедливо предложить лучшую альтернативу.

5. @Эндрю Купер, Счастливчик Мурари.. Я отредактировал свой вопрос и разместил весь код javascript. Пожалуйста, взгляните еще раз..

Ответ №1:

Это довольно просто. Сначала загрузите пользовательский интерфейс jQuery отсюда и включите на свою страницу. Затем используйте следующий метод

<scritp type="текст / javascript">
(функция($){
 $("#datepicker").datepicker({ 
 showOn: "кнопка", 
 Изображение кнопки: "/images/calendar.gif ", 
 buttonImageOnly: верно
 });
})(jQuery);

Создайте textbox с идентификатором datapicker вот так

<тип ввода = "text" id ="datepicker">

1. @Привет, Карни.. Какой компонент следует загрузить. По ссылке показан 31 компонент.

2. Спасибо Куами. .. Я загрузил пользовательский интерфейс jQuery по предоставленной вами ссылке, теперь как использовать его на моей странице .aspx??

3. @ChragFanse Я не знаю, о каких компонентах вы говорите. В правой части страницы под заголовком Example существуют различные стили выбора даты. Нажмите на любую ссылку, вам будет показана демонстрация и ее код. Выберите стиль, который вы хотите реализовать, и внедрите его код на своей странице.

4. @Chirag Fanse Просто включите этот файл на свою страницу

5. @Awais Qami .. Должен ли я напрямую скопировать исходный код со ссылки на мою страницу .aspx???

Ответ №2:

которое я напрямую копирую и передаю из Интернета [так в оригинале]

Хотя я ничего не имею против законности выбранного вами источника, вы всегда должны иметь в виду, что Интернет переполнен сомнительными ресурсами. Вы должны стремиться к хорошо зарекомендовавшим себя, хорошо документированным, стабильным библиотекам.

Если у вас есть такая опция, я бы рекомендовал использовать jQuery UI:

http://jqueryui.com/demos/datepicker/

Редактировать:

Простой пример, чтобы вы могли начать:

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script>
    $(function () {
        $("#date").datepicker();
    });
</script>
<input id="date" />

Просто скопируйте и вставьте это в HTML-файл и откройте в своем браузере. Обратите внимание, что разметка не завершена (но она все равно будет работать).

1. . Спасибо всем. Каждый предлагает мне один и тот же вариант. Это действительно очень хорошо, но, пожалуйста, подскажите мне, как я могу использовать эту опцию. Я попытался пройти код, приведенный в этой ссылке, но он не работает. Я знаю, что мой вопрос слишком глупый, но я использую javascript и jQuery в самый первый раз и понятия не имею, как они работают и выполняются…

2. . Я напрямую скопировал и вставил ваш код на свою страницу .aspx, но он все еще не работает… Я разочарован, почему я не могу это получить…

3. > скопируйте и вставьте это в HTML-файл — выполните небольшие действия. Сначала запустите его в обычном старом HTML-файле, а затем переместите в .aspx.