javascript中日期時間選擇器的問題

我想提供用戶使用某個控件選擇日期時間。爲此，我嘗試使用JavaScript日期時間選擇器，我直接從互聯網複製和過去，但它不工作。我從here得到它。javascript中日期時間選擇器的問題

請幫我解決這個問題。有沒有其他方法可以爲用戶提供這種設施？我正在使用ASP.NET C＃。我是全新的JavaScript和Jquery。

//下面是java腳本的代碼。創建我的日期時間選取 //日期： //使用Javascript名11月16日，2003 23:19 //的編劇：TengYong吳 //網址：http://www.rainforestnet.com //版權所有（C）2003 TengYong吳 //文件名：DateTimePicker.js //版本：0.8 //聯繫人：[email protected] //注意：如果 //標題行保持不變，則允許在任何類型的應用程序中使用此腳本。

//全局變量 var winCal; var dtToday = new Date（）; var Cal; var docCal; var MonthName = [「January」，「February」，「March」，「April」，「May」，「June」，「July」，「August」，「September」，「October」，「November」，「十二月」]; var WeekDayName = [「Sunday」，「Monday」，「Tuesday」，「Wednesday」，「Thursday」，「Friday」，「Saturday」]; 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) && (pShowTime)) 
{ 
    Cal.ShowTime=true; 
    if ((pTimeMode!=null) &&((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) && (parseInt(intMonth,10)<12)) 
     Cal.Month=intMonth; 
    //end parse month 
    //parse Date 
    if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (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())&&(Cal.Month==dtToday.getMonth())&&(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)&&(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)&&(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) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour)) 
{ 
    if ((TimeMode==12) && (Cal.AMorPM=="PM")) 
    { 
     if (parseInt(intHour,10)==12) 
      Cal.Hours=12; 
     else  
      Cal.Hours=parseInt(intHour,10)+12; 
    } 
    else if ((TimeMode==12) && (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) && (intMin<60)) 
    Cal.Minutes=intMin; 
} 
Calendar.prototype.SetMinute=SetMinute; 

function SetSecond(intSec)

{
VAR SecExp =新的RegExp（「^ \ d \ d $」）; （SecExp.test（intSec）& &（intSec < 60）） Cal.Seconds = intSec; } Calendar.prototype.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) && (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（）被調用，其我檢查由該函數保持警報消息如上面的代碼，但不執行進一步的腳本。

來源

2011-05-20 Microsoft Developer

如果你告訴我們，相關的代碼，我們可以幫助 – 2011-05-20 05:44:57

你需要給有關它的哪一部分更多信息不管用。或者更好，如果你給你使用一些代碼 – 2011-05-20 05:45:26

爲什麼不使用jQuery UI datepicker？ http://jqueryui.com/demos/datepicker/？ – Pav 2011-05-20 05:46:20

很容易就是這樣。首先從here下載JQuery UI，並將其包含到您的頁面中。然後用下面的方法

 

<scritp type="text/javascript"> 
(function($){ 
    $("#datepicker").datepicker({ 
    showOn: "button", 
    buttonImage: "/images/calendar.gif", 
    buttonImageOnly: true 
    }); 
})(jQuery);

進行帶ID datapicker一個textbox這樣

 
<input type="text" id="datepicker">

來源

2011-05-20 05:48:11

@Awais Qarni ..哪個組件可以下載。該鏈接顯示了31個組件。 – 2011-05-20 06:01:05

@Awais Quami。 ..我已經從您現在提供的鏈接下載了JQuery UI如何在我的.aspx頁面中使用它？ – 2011-05-20 06:08:27

@ChragFanse我不知道你在說什麼組件。在示例標題下的頁面右側，有不同樣式的datepicker。點擊任何鏈接，您將顯示演示和代碼。選擇您要實現的樣式，並在頁面中實現其代碼。 – 2011-05-20 06:09:06

我直接複製過去從互聯網[原文]

雖然我對你挑選源的合法性沒有，你應該時刻牢記，互聯網是扼流圈充滿了可疑的資源。您應該傾向於建立完善，文件完備的穩定圖書館。

如果你有這樣的選擇，我會建議使用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文件並在瀏覽器中打開。請注意，標記不完整（但仍然有效）。

來源

2011-05-20 05:47:34

。感謝大家。每個人都建議我有同樣的選擇。它非常好，但請指導我如何使用該選項。我試圖通過該鏈接給出的代碼，但它不工作。我知道我的問題太愚蠢，但我第一次使用JavaScript和JQuery，並沒有任何想法他們如何工作和執行... – 2011-05-20 06:36:40

@Chirag ，我用一個例子更新了我的答案。 – 2011-05-20 06:53:52

。我直接複製並粘貼你的代碼到我的.aspx頁面，但它仍然工作...我很沮喪，爲什麼我不能得到它... – 2011-05-20 07:02:12

javascript中日期時間選擇器的問題

回答

相關問題