让用户选择日期是怎样实现？高分请教！！

[PCXGG]

在页面上，让用户输入日期。如果用TEXTBOX的话，需要用正则表达式。
我想让用户选择日期。怎样实现？
比如说用日历控件。
解决问题后就结贴。

[zdnet]

js 日期控件

[singleflower]

日期控件

[draclosta]

js日期控件：http://dynarch.com/mishoo/calendar.epl

[zhpsam109]

自己写一个日期空间啊!

[「已注销」]

http://sorke.com/datepickerdemo.aspx

[Edifier0709]

<!--

CopyRight lostinet.com 2004

element:
PopupMode 'onclick' or 'ondblclick','oncontextmenu'
DateFormatString 'yyyy-MM-dd' or 'MM/dd/yyyy' or 'yyyyMMdd' <option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>
</select></td>
<td id="lwdpid_mnext" style='font-size:9pt;font-family:webdings;' title='增加一个月 ( 热键 - 下翻页 PageDown)'>8</td>
<td id="lwdpid_dprev" style='font-size:9pt;font-family:webdings;' title='减少一天 ( 热键 - 上箭头 ↑ )'>7</td>
<td><select id="lwdpid_dsel"><option>11</option>
</select></td>
<td id="lwdpid_dnext" style='font-size:9pt;font-family:webdings;' title='增加一天 ( 热键 - 下箭头 ↓ )'>8</td>
</tr>
</table>
</td>
<td align="right">
<table border="0" ID="Table2">
<tr>
<td id="lwdpid_yprev" style='font-size:9pt;font-family:webdings;' title='减少一年'>7</td>
<td><select id="lwdpid_ysel"><option>2000</option>
</select></td>
<td id="lwdpid_ynext" style='font-size:9pt;font-family:webdings;' title='增加一年'>8</td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td align="center" colspan="2">
<div style="font-size:0px;border-bottom:1px solid #aaaaaa;"> </div>
<div style="font-size:0px;border-top:1px solid #eeeeee;"> </div>
</td>
</tr>
<tr>
<td colspan="2">
<table id="lwdpid_tabledays" width="312" height="162" border="1" bordercolor="#999999"
style='border-collapse:collapse;'>
<colgroup>
<col align="center" style='font-size:9pt;padding-top:3px;width:44px;'></col>
<col align="center" style='font-size:9pt;padding-top:3px;width:44px;'></col>
<col align="center" style='font-size:9pt;padding-top:3px;width:44px;'></col>
<col align="center" style='font-size:9pt;padding-top:3px;width:44px;'></col>
<col align="center" style='font-size:9pt;padding-top:3px;width:44px;'></col>
<col align="center" style='font-size:9pt;padding-top:3px;width:44px;'></col>
<col align="center" style='font-size:9pt;padding-top:3px;width:44px;'></col>
</colgroup>
<tr>
<td id="lwdpid_weeksun" weeknum="0" class='lwdpheadsun' style='font-family:fixedsys;background-color:#bbbbbb;'
title='选择星期天'>Sun</td>
<td id="lwdpid_weekmon" weeknum="1" class='lwdpheadmon' style='font-family:fixedsys;background-color:#bbbbbb;'
title='选择星期一'>Mon</td>
<td id="lwdpid_weektue" weeknum="2" class='lwdpheadtue' style='font-family:fixedsys;background-color:#bbbbbb;'
title='选择星期二'>Tue</td>
<td id="lwdpid_weekwed" weeknum="3" class='lwdpheadwed' style='font-family:fixedsys;background-color:#bbbbbb;'
title='选择星期三'>Wed</td>
<td id="lwdpid_weekthu" weeknum="4" class='lwdpheadthu' style='font-family:fixedsys;background-color:#bbbbbb;'
title='选择星期四'>Thu</td>
<td id="lwdpid_weekfri" weeknum="5" class='lwdpheadfri' style='font-family:fixedsys;background-color:#bbbbbb;'
title='选择星期五'>Fri</td>
<td id="lwdpid_weeksat" weeknum="6" class='lwdpheadsat' style='font-family:fixedsys;background-color:#bbbbbb;'
title='选择星期六'>Sat</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<button id="lwdpid_btntd" hidefocus="1" onfocus='blur()' style='width:72px;cursor:hand;border:1px outset;font-size:9pt;padding-top:2px;'
title='选择今天'>今天</button>
<button id="lwdpid_btnbl" hidefocus="1" onfocus='blur()' style='width:72px;cursor:hand;border:1px outset;font-size:9pt;padding-top:2px;'
title='令它为空白'>空白</button>
</td>
<td align="right">
<button id="lwdpid_btnok" hidefocus="1" onfocus='blur()' style='width:72px;cursor:hand;border:1px outset;font-size:9pt;padding-top:2px;'
title='关闭面板'>确定</button>
</td>
</tr>
</table>
<iframe id=lwdpid_iframe name='lwdpiframe' src='about:blank' frameBorder=0 style='width:0px;height:0px'></iframe>
<script>

//get the position of a element ( by the scroll offset )
function LostinetWebGetScrollPostion(e)
{
var b=e.document.body;
if(e==b)return {left:0,top:0};
with(e.getBoundingClientRect())
{
return {left:b.scrollLeft+left,top:b.scrollTop+top};
}
}
//get the position of a element ( by the client offset )
function LostinetWebGetClientPosition(e)
{
var b=e.document.body;
if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop};
with(e.getBoundingClientRect())
{
return {left:left-b.clientLeft,top:top-b.clientTop};
}
}
//get absolute or relative parent
function LostinetWebGetStandParent(e)
{
for(var p=e.parentElement;p!=null;p=p.parentElement)
{
var sp=p.currentStyle.position;
if(sp=='absolute'||sp=='relative')
return p;
}
return e.document.body;
}
//calc the position of floate that relative to e
function LostinetWebCalcPosition(floate,e)
{
var epos=LostinetWebGetScrollPostion(e);
var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate));
var s=LostinetWebGetStandParent(floate);
return {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop};
}

[Edifier0709]

//get the best position to put the floate
function LostinetWebAdjustMirror(floate,e,pos)
{
//c:Client,f:floate,e:e,p:floate's StandParent,m:Mirror
var cw=e.document.body.clientWidth;
var ch=e.document.body.clientHeight;
var fw=floate.offsetWidth;
var fh=floate.offsetHeight;
var ew=e.offsetWidth;
var eh=e.offsetHeight;

var ecpos=LostinetWebGetClientPosition(e);
var empos={left:ecpos.left+ew/2,top:ecpos.top+eh/2};
var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate));
var fcpos=LostinetWebGetClientPosition(floate);
var fmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2};

//left<-->right
if( (fmpos.left<empos.left) ? ((fmpos.left-fw/2<0)&&((empos.left*2-fmpos.left)+fw/2<=cw)) : ((fmpos.left+fw/2>cw)&&((empos.left*2-fmpos.left)-fw/2>=0)) )
fmpos.left=empos.left*2-fmpos.left;

//top<-->bottom
if( (fmpos.top<empos.top) ? ((fmpos.top-fh/2<0)&&((empos.top*2-fmpos.top)+fh/2<=ch)) : ((fmpos.top+fh/2>ch)&&((empos.top*2-fmpos.top)-fh/2>=0)) )
fmpos.top=empos.top*2-fmpos.top;

pos.left=fmpos.left-pcpos.left-fw/2;
pos.top=fmpos.top-pcpos.top-fh/2;
}

function AddDays(date,value)
{
date.setDate(date.getDate()+value);
}
function AddMonths(date,value)
{
date.setMonth(date.getMonth()+value);
}
function AddYears(date,value)
{
date.setFullYear(date.getFullYear()+value);
}
function IsToday(date)
{
return IsDateEquals(date,new Date());
}
function IsThisMonth(date)
{
return IsMonthEquals(date,new Date());
}
function IsMonthEquals(date1,date2)
{
return date1.getMonth()==date2.getMonth()&&date1.getFullYear()==date2.getFullYear();
}
function IsDateEquals(date1,date2)
{
return date1.getDate()==date2.getDate()&&IsMonthEquals(date1,date2);
}
function GetMonthDayCount(date)
{
switch(date.getMonth()+1)
{
case 1:case 3:case 5:case 7:case 8:case 10:case 12:
return 31;
case 4:case 6:case 9:case 11:
return 30;
}
//feb:
date=new Date(date);
var lastd=28;
date.setDate(29);
while(date.getMonth()==1)
{
lastd++;
AddDays(date,1);
}
return lastd;
}


function GetHarfYear(date)
{
var v=date.getYear();
if(v>9)return v.toString();
return "0"+v;
}

Nullable 'False' or 'True'
UseFrame 'True' or 'False'
(ignore origin window's style settings)

OverColor : firebrick
WrongBackColor : 'pink'
WrongForeColor : 'red'
CurrentBackColor: 'darkgreen'
CurrentForeColor: 'white'
TodayBackColor : 'lime'
TodayForeColor : 'white'
OtherBackColor : ''
OtherForeColor : '#606060'
class:
lwdpanel
lwdpanelhead

-->
<table id="lwdpid_tablepanel" class='lwdpanel' border="0" style='font-size:9pt;border:1px outset;background-color:threedface;cursor:default;'>
<tr height="21">
<td>
<table border="0" class='lwdpanelhead' ID="Table1">
<tr>
<td id="lwdpid_mprev" style='font-size:9pt;font-family:webdings;' title='减少一个月 ( 热键 - 上翻页 PageUp )'>7</td>
<td><select id="lwdpid_msel">
<option>一月</option>
<option>二月</option>
<option>三月</option>
function GetFullMonth(date)
{
var v=date.getMonth()+1;
if(v>9)return v.toString();
return "0"+v;
}
function GetFullDate(date)
{
var v=date.getDate();
if(v>9)return v.toString();
return "0"+v;
}
function Replace(str,from,to)
{
return str.split(from).join(to);
}
function FormatDate(date,str)
{
str=Replace(str,"yyyy",date.getFullYear());
str=Replace(str,"MM",GetFullMonth(date));
str=Replace(str,"dd",GetFullDate(date));
str=Replace(str,"yy",GetHarfYear(date));
str=Replace(str,"M",date.getMonth()+1);
str=Replace(str,"d",date.getDate());
return str;
}
function ConvertDate(str)
{
str=(str+"").replace(/^\s*/g,"").replace(/\s*$/g,"");
var d;
if(/^[0-9]{8}$/.test(str)) // 20040226 -> 2004-02-26
{
d=new Date(new Number(str.substr(0,4)),new Number(str.substr(4,2))-1,new Number(str.substr(6,2)));
if(d.getTime())return d;
}
d=new Date(str);
if(d.getTime())return d;
d=new Date(Replace(str,"-","/"));
if(d.getTime())return d;
return null;
}

function AddOption(sel,n,v)
{
var option=sel.document.createElement('OPTION');
option.text=n;
option.value=v;
sel.options.add(option);
}
</script>
<script>

var weeknames=new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');

var win=window;

var tablepanel;
var floatpanel;
var showed=false;
var date=new Date();
var uidate=null;

var dprev;
var dnext;
var mprev;
var mnext;
var yprev;
var ynext;
var dsel;
var msel;
var ysel;
var tabledays;
var weeksun;
var weekmon;
var weektue;
var weekwed;
var weekthu;
var weekfri;
var weeksat;
var btntd;
var btnok;
var btnbl;

[Edifier0709]

哎，太长了．

楼主到这里看看吧．http://forum.lostinet.com/Topic.Aspx?TopicID=32&_lastreply=170

[lr2651]

<%
Response.Buffer = True
Response.ExpiresAbsolute = Now() - 0.1
Response.Expires = 0
'Response.CacheControl = "no-cache"
%>
<HTML>
<HEAD>
<TITLE>日历</TITLE>
<STYLE TYPE="text/css">
.normal{FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;BACKGROUND: #ffffff}
.today {FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;font-weight:bold;BACKGROUND: #6699cc}
.satday{FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;color:green}
.sunday{FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;color:red}
.days {FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;font-weight:bold}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
//中文月份,如果想显示英文月份，修改下面的注释
/*var months = new Array("January?, "February?, "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");*/
var months = new Array("一月", "二月", "三月",
"四月", "五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31);
//中文周 如果想显示 英文的，修改下面的注释
/*var days = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");*/
var days = new Array("日","一", "二", "三","四", "五", "六");
function getDays(month, year) {
//下面的这段代码是判断当前是否是闰年的
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}

function getToday() {
//得到今天的年,月,日
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
today = new getToday();

function newCalendar() {

today = new getToday();
var parseYear = parseInt(document.all.year[document.all.year.selectedIndex].text);
var newCal = new Date(parseYear,
document.all.month.selectedIndex, 1);
var day = -1;
var startDay = newCal.getDay();
var daily = 0;
if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
day = today.day;
var tableCal = document.all.calendar.tBodies.dayList;
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
for (var intWeek = 0; intWeek < tableCal.rows.length;intWeek++)
for (var intDay = 0;intDay < tableCal.rows[intWeek].cells.length;intDay++)
{
var cell = tableCal.rows[intWeek].cells[intDay];
if ((intDay == startDay) && (0 == daily))
daily = 1;
if(day==daily)
//今天，调用今天的Class
cell.className = "today";
else if(intDay==6)
//周六
cell.className = "sunday";
else if (intDay==0)
//周日
cell.className ="satday";
else
//平常
cell.className="normal";
if ((daily > 0) && (daily <= intDaysInMonth))
{
cell.innerText = daily;
daily++;
}
else
cell.innerText = "";
}
}

function Cancel() {
window.returnValue=-1;
window.close();
}

function submitDate(){
window.returnValue=document.all.year.value + "-" + document.all.month.value;
window.close();
}
function getDate() {
var sDate;
//这段代码处理鼠标点击的情况
if ("TD" == event.srcElement.tagName)
if ("" != event.srcElement.innerText)
{
window.returnValue=document.all.year.value + "-" + document.all.month.value + "-" + event.srcElement.innerText + "";
window.close();
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="newCalendar()" >
<TABLE ID="calendar" cellspacing="0" cellpadding="0" width="100%" border=0 >
<TR height=30>
<TD COLSPAN=7 ALIGN=CENTER>
<SELECT ID="year" ONCHANGE="newCalendar()" NAME="year">
<SCRIPT LANGUAGE="JavaScript">
for (var intLoop = today.year-50; intLoop < (today.year + 4);
intLoop++)
document.write("<OPTION VALUE= " + intLoop + " " +
(today.year == intLoop ?
"Selected" : "") + ">" +
intLoop);
</SCRIPT>
</SELECT>
<SELECT ID="month" ONCHANGE="newCalendar()" NAME="month">
<SCRIPT LANGUAGE="JavaScript">
for (var intLoop = 0; intLoop < months.length;intLoop++)
document.write("<OPTION VALUE= " + (intLoop + 1) + " " +(today.month == intLoop ?"Selected" : "") + ">" +months[intLoop]);
</SCRIPT>
</SELECT>
<Input type=button value="取消" OnClick="Cancel();" ID="Button1" NAME="Button1">
<Input type=button value="提交" OnClick="submitDate();" ID="Button2" NAME="Button1">
</TD>

</TR>
<TR CLASS="days" ALIGN=CENTER>
<SCRIPT LANGUAGE="JavaScript">
document.write("<TD class=satday>" + days[0] + "</TD>");
for (var intLoop = 1; intLoop < days.length-1;
intLoop++)
document.write("<TD >" + days[intLoop] + "</TD>");
document.write("<TD class=sunday>" + days[intLoop] + "</TD>");
</SCRIPT>
</TR>
<TBODY width=100% border=1 cellspacing="0" cellpadding="0" ID="dayList" ALIGN=CENTER ONDBLCLICK="getDate()">
<SCRIPT LANGUAGE="JavaScript">
for (var intWeeks = 0; intWeeks < 6; intWeeks++) {
document.write("<TR style='cursor:hand'>");
for (var intDays = 0; intDays < days.length;intDays++)
document.write("<TD></TD>");
document.write("</TR>");
}
</SCRIPT>
</TBODY>
</TABLE>
</BODY>
</HTML>

这个短点，存成一页，直接调用就可以

[lr2651]

客户端这么调用
function getcal()
{
var strNode=showModalDialog('../date.asp',0,"dialogWidth:300px;dialogHeight:160px;status:no");
if (strNode!=-1 && typeof(strNode)!='undefined') return strNode;
else return "";
}

[MasterLRC]

你可以给你的TextBox控件加一个验证控件:

CompareValidator vldDate = new CompareValidator();
vldDate.ControlToValidate = TextBox1;
vldDate.Text = "*";
vldDate.ErrorMessage = "你输入的不是正确日期格式，正确的格式如：（1900-01-01）";
vldDate.ValueToCompare = "1900-01-01";
vldDate.Type = ValidationDataType.Date;
vldDate.Operator = ValidationCompareOperator.GreaterThan;
vldDate.Display = ValidatorDisplay.Dynamic;
myCell_1.Controls.Add(vldDate);

[accpyy]

以上的各位大侠们给出的答案是否太严重了吧，看看我这个简单明了的：
public string ConvertString(DateTime time)
{
string retstr;
retstr = time.Year.ToString() + "-" + time.Month.ToString() + "-" + time.Day.ToString();
return retstr;
}

private void Calendar2_SelectionChanged(object sender, System.EventArgs e)
{
txtdate.Text = ConvertString(Calendar2.SelectedDate.Date);
}

[shiningpolarstar]

支持accpyy(小小鸟儿)，本来挺简单的事，搞的这么复杂呀