日历控件_模仿vs中的dtpicker控件_dtpicker控件下载-CSDN博客

本文链接：https://blog.csdn.net/pirwin/article/details/1500338

本文介绍如何在网页中创建一个仿VS的日期选择器控件，利用JavaScript实现日历功能，包括显示、切换月份和年份，以及选择日期等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、放到页面中的脚本

二、js文件中的内容（在页面中引用）

申明：下面的代码大部分在网上引用，进行了部分的修改。

// JScript 文件

var The_Year,The_Day,The_Month;
var today;
var Firstday;
today = new Date();

function RunNian(The_Year)
{
if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0)))
return true;
else
return false;
}

function GetWeekday(The_Year,The_Month)
{

var Allday;
var t=0;
Allday = new Date();
Allday.setFullYear(The_Year,The_Month);
Allday.setDate=1;
//document.getElementById("Text1").value=Allday.getDay();
switch (getDayInMonth(The_Year,The_Month))
{
case 31 : t=3;break;

case 30 : t=2;break;
case 28 : t=0;break;
case 29 : t=1;break;

}
return (7+Allday.getDay()-t)%7;

}
function getDayInMonth(The_Year,The_Month)
{
switch (The_Month)
{
case 1 : return 31; break;
case 2 :

   if (RunNian(The_Year))
    return 29;
   else
    return 28;
   break;
case 3 : return 31; break;
case 4 : return 30; break;
case 5 : return 31; break;
case 6 : return 30; break;
case 7 : return 31; break;
case 8 : return 31; break;
case 9 : return 30; break;
case 10 : return 31; break;
case 11 : return 30; break;
case 12 : return 31; break;

}
}
function chooseday(The_Year,The_Month,The_Day,showPanelName,resultName)
{
var Firstday;
var completely_date;
if (The_Day!=0){
completely_date = The_Year + "-" + The_Month + "-" + The_Day;
document.getElementById(resultName).value = completely_date;

document.getElementById(showPanelName).style.display="none";

}
else
completely_date = "No Choose";
//showdate 只是一个为了显示而采用的东西，
//如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期
//也可以通过The_Year,The_Month,The_Day分别引用年，月，日
//当进行月份和年份的选择时，认为没有选择完整的日期

Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday,showPanelName,resultName);

}

function nextmonth(The_Year,The_Month,showPanelName,resultName)
{
if (The_Month==12)
chooseday(The_Year+1,1,0,showPanelName,resultName);
else
chooseday(The_Year,The_Month+1,0,showPanelName,resultName);
}

function prevmonth(The_Year,The_Month,showPanelName,resultName)
{
if (The_Month==1)
chooseday(The_Year-1,12,0,showPanelName,resultName);
else
chooseday(The_Year,The_Month-1,0,showPanelName,resultName);
}

function prevyear(The_Year,The_Month,showPanelName,resultName)
{
chooseday(The_Year-1,The_Month,0,showPanelName,resultName);
}

function nextyear(The_Year,The_Month,showPanelName,resultName)
{
chooseday(The_Year+1,The_Month,0,showPanelName,resultName);
}

function ShowCalender(The_Year,The_Month,The_Day,Firstday,showPanelName,resultName)
{

var showstr;
var Month_Day;
var ShowMonth;
var today;
today = new Date();

switch (The_Month)
{
case 1 : ShowMonth = "1月"; Month_Day = 31; break;
case 2 :
   ShowMonth = "2月";
   if (RunNian(The_Year))
    Month_Day = 29;
   else
    Month_Day = 28;
   break;
case 3 : ShowMonth = "3月"; Month_Day = 31; break;
case 4 : ShowMonth = "4月"; Month_Day = 30; break;
case 5 : ShowMonth = "5月"; Month_Day = 31; break;
case 6 : ShowMonth = "6月"; Month_Day = 30; break;
case 7 : ShowMonth = "7月"; Month_Day = 31; break;
case 8 : ShowMonth = "8月"; Month_Day = 31; break;
case 9 : ShowMonth = "9月"; Month_Day = 30; break;
case 10 : ShowMonth = "10月"; Month_Day = 31; break;
case 11 : ShowMonth = "11月"; Month_Day = 30; break;
case 12 : ShowMonth = "12月"; Month_Day = 31; break;

}

showstr = "";
showstr = "<Table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=95% align=center valign=top>";
showstr += "<tr><td width=0 style='cursor:hand' onclick=prevyear("+The_Year+"," + The_Month +",'"+showPanelName+"','"+resultName+"')><<</td><td width=0> " + The_Year + " </td><td width=0 onclick=nextyear("+The_Year+","+The_Month+",'"+showPanelName+"','"+resultName+"') style='cursor:hand'>>></td><td width=0 style='cursor:hand' onclick=prevmonth("+The_Year+","+The_Month+",'"+showPanelName+"','"+resultName+"')><<</td><td width=100 align=center>" + ShowMonth + "</td><td width=0 onclick=nextmonth("+The_Year+","+The_Month+",'"+showPanelName+"','"+resultName+"') style='cursor:hand'>>></td></tr>";
showstr += "<tr><td align=center width=100% colspan=6>";
showstr += "<table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=100%>";
showstr += "<Tr align=center bgcolor=#999999> ";
    showstr += "<td><strong><font color=#0000CC>日</font></strong></td>";
    showstr += "<td><strong><font color=#0000CC>一</font></strong></td>";
    showstr += "<td><strong><font color=#0000CC>二</font></strong></td>";
    showstr += "<td><strong><font color=#0000CC>三</font></strong></td>";
    showstr += "<td><strong><font color=#0000CC>四</font></strong></td>";
    showstr += "<td><strong><font color=#0000CC>五</font></strong></td>";
    showstr += "<td><strong><font color=#0000CC>六</font></strong></td>";
showstr += "</Tr><tr>";

for (i=1; i<=Firstday; i++)
showstr += "<td align=center bgcolor=#CCCCCC> </Td>";

for (i=1; i<=Month_Day; i++)
{
if ((The_Year==today.getYear()) && (The_Month==today.getMonth()+1) && (i==today.getDate()))
   bgColor = "#FFCCCC";
else
   bgColor = "#CCCCCC";

if (The_Day==i) bgColor = "#FFFFCC";
showstr += "<td align=center bgcolor=" + bgColor + " style='cursor:hand' onclick=chooseday(" + The_Year + "," + The_Month

+ "," + i + ",'"+showPanelName+"','"+resultName+"')>" + i + "</td>";
Firstday = (Firstday + 1)%7;
if ((Firstday==0) && (i!=Month_Day)) showstr += "</tr><tr>";
}
if (Firstday!=0)
{
for (i=Firstday; i<7; i++)
showstr += "<td align=center bgcolor=#CCCCCC> </td>";
showstr += "</tr>";
}

showstr += "</tr></table></td></tr></table>";
document.getElementById(showPanelName).innerHTML = showstr;

}