document.createElement("input")如何定义日期格式？
各位大侠，请问如何document.createElement("input")动态定义单元格，点击时下拉日历，让用户用户用选择的方式输入日期，而不是手动输入日期，即方便，又不会出错！
多谢！
[解决办法]
input 点击不会出现日期的，可以直接把日期控件放到单元格里面，
[解决办法]
My97DatePicker控件
[解决办法]
WdatePicker
[解决办法]
要看你日期控件是怎么触发的，如dwz框架的日期控件，只要定义个class="date"就可以了
<input type="text" class="date"/>
[解决办法]
给你的input设置属性：
input.setAttribute("type","text");
input.setAttribute("onclick","fPopCalendar(this)");
input.setAttribute("onFocus","fPopCalendar(this)");
然后引入js代码：
/**
* 使用时在控件内加入如下代码；
* onclick="fPopCalendar(this)" onFocus="fPopCalendar(this)"
*/
//设置日期显示格式，使月和日期显示双位
//如将2008-4-5转化成：2008-04-05 alert
function padout(number) {
return (number < 10) ? '0' + number : number;
}
var gdCtrl = new Object(); // 输入对象
var goSelectTag = new Array();
var gcGray = "#aaaaaa"; // 非本月日期的背景显示颜色
var gcToggle = "#33ccFF"; // 鼠标移动到日期格时，背景的变换颜色
var gcBG = "#00AAFF"; // 默认的日期格背景颜色
var gdCurDate = new Date(); // 得到当前日期时间
var giYear = gdCurDate.getFullYear(); // 得到当前年，实际年
var giMonth = gdCurDate.getMonth()+1; // 得到当前月，实际月
var giDay = gdCurDate.getDate(); // 得到当前日，实际日
var thisYear = giYear;
var thisMonth = giMonth;
var thisDay = giDay;
// 得到当前日期输出控件中日期的年或月的值
// type=0,返回年（4位的公元）
// type=1,返回月
function getYearMon(type) {
var dateItem;
var theDate;
theDate=gdCtrl.value;
if(theDate == null
[解决办法]
theDate=="") return null;
theDate=theDate.replace(/ /g,"-"); // 使用正则表达式，用－替换所有空格，/g标识全局替换
theDate=theDate.replace(/\./g,"-"); // 使用正则表达式，用－替换所有.
theDate=theDate.replace(/\//g,"-"); // 使用正则表达式，用－替换所有/
theDate=theDate.replace(/\\/g,"-"); // 使用正则表达式，用－替换所有\
dateItem=theDate.split("-");
if (dateItem.length<1) // 没有任何日期，无效返回
return null;
if (dateItem.length<2) // 只有一部分日期信息，把月信息置为0
dateItem[1]=0;
if (dateItem.length<3) // 只有两部分日期信息，把年信息置为0
dateItem[2]=0;
// 判断事是否为数字，如果不是数字，操作后值为NaN
dateItem[0]++;dateItem[0]--;
dateItem[1]++;dateItem[1]--;
dateItem[2]++;dateItem[2]--;
if(type == 0){
if (isNaN(dateItem[0])){
alert("年输入错误");
return null;
}
}else if(type == 1 ){
if (isNaN(dateItem[1])){
alert("月输入错误");
return null;
}
}
if(type == 0 ){
if (isNaN(dateItem[2])){
alert("日输入错误");
return null;
}
}
// 判断年的有效性，范围是1900－－2050。这部分处理，有局限；需要修改。
if ((Number(dateItem[0])>=0)&&(Number(dateItem[0])<50))
dateItem[0]+=2000;
if ((Number(dateItem[0])>=50)&&(Number(dateItem[0])<100))
dateItem[0]+=1900;
/*if ((Number(dateItem[0])<1900)
[解决办法]
(Number(dateItem[0])>2050)){
alert("年输入超出范围")
return null;
}
// 判断月的有效性
if ((Number(dateItem[1])<1)
[解决办法]
(Number(dateItem[1])>12)){
alert("月输入超出范围");
//alert(dateItem[1]);
return null;
}*/
if(type == 0){
if ((Number(dateItem[0])<1900)
[解决办法]
(Number(dateItem[0])>2050)){
alert("年输入超出范围")
return null;
}
}else if(type == 1) {
if ((Number(dateItem[1])<1)
[解决办法]
(Number(dateItem[1])>12)){
alert("月输入超出范围");
return null;
}
}
// 为什么没有校验日的有效性？？？
return dateItem[type];
}
// 弹出日历选择器
// dateCtrl=输出控件
function fPopCalendar( dateCtrl){
event.cancelBubble=true; // 取消升腾事件现象
gdCtrl = dateCtrl;
var inputYear = getYearMon(0);
if(inputYear != null) giYear = inputYear; // 条件年；如果日期控件中有年的值，则取其年；否则取当前年
var inputMonth = getYearMon(1); // 得到输出控件中，月值
if(inputMonth != null) giMonth = inputMonth; // 条件月；如果日期控件中有月的值，则取其月；否则取当前月
fSetYearMon(giYear, giMonth); // 设置默认显示日期格
var point = getIE(dateCtrl); // 得到显示日期格的坐标位置，（当前为输出控件的下方）
with (VicPopCal.style) { // 设置显示日期格层的样式
left = point.x;
top = point.y;
width = VicPopCal.offsetWidth;
height = VicPopCal.offsetHeight;
fToggleTags(point); // SELECT控件出界处理
visibility = 'visible'; // 显示日期格
// 挡住select 下拉框
var IFR = document.getElementById('myIfr');
IFR.left=point.x;
IFR.top=point.y;
}
VicPopCal.focus(); // 日期格得到焦点
}
//日期选择框在控件上方
function fPopCalendar_2( dateCtrl){
event.cancelBubble=true; // 取消升腾事件现象
gdCtrl = dateCtrl;
var inputYear = getYearMon(0);
if(inputYear != null) giYear = inputYear; // 条件年；如果日期控件中有年的值，则取其年；否则取当前年
var inputMonth = getYearMon(1); // 得到输出控件中，月值
if(inputMonth != null) giMonth = inputMonth; // 条件月；如果日期控件中有月的值，则取其月；否则取当前月
fSetYearMon(giYear, giMonth); // 设置默认显示日期格
var point = getIE_2(dateCtrl); // 得到显示日期格的坐标位置，（当前为输出控件的下方）
with (VicPopCal.style) { // 设置显示日期格层的样式
left = point.x;
top = point.y;
width = VicPopCal.offsetWidth;
height = VicPopCal.offsetHeight;
fToggleTags(point); // SELECT控件出界处理
visibility = 'visible'; // 显示日期格
// 挡住select 下拉框
var IFR = document.getElementById('myIfr');
IFR.left=point.x;
IFR.top=point.y;
}
VicPopCal.focus(); // 日期格得到焦点
}
// 得到激活控件所在的位置
// aTag为输出控件对象的形参
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
var h=e.offsetHeight;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
var pt = new Point(l,t+h); // 初始化坐标位置，为窗口左上角
return pt;
}
//得到激活控件所在的位置，使得日期选择框在控件上方
function getIE_2(e){
var t=e.offsetTop;
var l=e.offsetLeft;
var h=e.offsetHeight;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
var pt = new Point(l,t-VicPopCal.offsetHeight); // 初始化坐标位置，为窗口左上角
return pt;
}
// 设置选择的日期
function fSetDate(iYear, iMonth, iDay){
gdCtrl.value = iYear+"-"+padout(iMonth)+"-"+padout(iDay); // Here, you could modify the locale as you need !!!!
fHideCalendar(); // 隐藏日历
}
// 隐藏日历
function fHideCalendar(){
VicPopCal.style.visibility = "hidden";
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
}
// 点击日期格时
// aCell=当前日期格对象
function fSetSelected(aCell){
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);
aCell.bgColor = gcBG;
with (aCell.children["cellText"]){
var iDay = parseInt(innerText);
if (color==gcGray) // 非当月日期；1＝下月，-1＝上月
iOffset = (Victor<10)?-1:1;
iMonth += iOffset;
if (iMonth<1) { // 上一年
iYear--;
iMonth = 12;
}else if (iMonth>12){ // 下一年
iYear++;
iMonth = 1;
}
}
fSetDate(iYear, iMonth, iDay);
}
// 初始化坐标对象
function Point(iX, iY){
this.x = iX;
this.y = iY;
}
// 建立当前日期格的值
function fBuildCal(iYear, iMonth) {
var aMonth=new Array();
for(i=1;i<7;i++)
aMonth[i]=new Array(i);
var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay(); // 得到当月第一天的星期值
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate(); // 得到当前月的天数
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1; // 得到上月最后一个星期天所在的日期
var iDate = 1;
var iNext = 1;
for (d = 0; d < 7; d++) // 处理第一行的日期显示值
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++; // 如果本星期值小于当月第一天的星期值，记录上月最后一个星期天的日期值＋当前星期值
for (w = 2; w < 7; w++) // 处理第二行到第六行的日期显示值
for (d = 0; d < 7; d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);// 如果当前星期值在当月日期中，显示当月日期，否则显示下个月的日期
return aMonth;
}
[解决办法]
接楼上的js代码，楼主把这部分代码跟上面的代码合并放在一起。
// 画日历显示格
function fDrawCal(iYear, iMonth, iCellHeight, iDateTextSize) {
var WeekDay = new Array("日","一","二","三","四","五","六");
var styleTD = " bgcolor='#ffcc00' bordercolor='"+gcBG+"' valign='middle' align='center' height='"+iCellHeight+"' style='font:bold"+iDateTextSize+" 宋体;"; //Coded by Liming Weng(Victor Won) email:victorwon@netease.com
with (document) {
write(" <tr>");
for(i=0; i<7; i++)
write(" <td "+styleTD+"color:#333333' style='font: 9pt'>" + WeekDay[i] + "</td>");
write(" </tr>");
for (w = 1; w < 7; w++) {
write("<tr>");
for (d = 0; d < 7; d++) {
write("<td style='font: 9pt' bgcolor='#00aaff' id=calCell "+styleTD+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG'onclick='fSetSelected(this)'>");
write(" <font id=cellText Victor='Liming Weng'> </font>");
write("</td>")
}
write("</tr>");
}
}
}
// 动态修改当前日期格的值
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth); // 建立日期表格中的日期显示值
var i = 0;
for (w = 0; w < 6; w++) // 从第一行到第6行开始处理日期显示
for (d = 0; d < 7; d++) // 从第一列到第7列开始画日期格
with (cellText[(7*w)+d]) { // 定位日期格的坐标
Victor = i++; // 处理顺序号
if (myMonth[w+1][d]<0) { // 非当月
color = gcGray; // 非当月日期显示为深灰色
innerText = -myMonth[w+1][d]; // 把标志为负值的非但前月的日期显示为正值
}else{ // 当月
color = ((d==0)
[解决办法]
(d==6))?"#ffdd99":"white"; // 六、日的颜色为浅灰色，星期一到五为白色
innerText = myMonth[w+1][d];
}
}
}
// 设置年下拉列表和月下拉列表的值
function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true; // 设置月下拉列表中的月，为条件月
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true; // 设置年下拉列表中的年，为条件年
fUpdateCal(iYear, iMon);
}
// 点击上月按钮
function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (--iMon<1) {
iMon = 12;
iYear--;
}
fSetYearMon(iYear, iMon);
}
// 点击下月按钮
function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (++iMon>12) {
iMon = 1;
iYear++;
}
fSetYearMon(iYear, iMon);
}
// SELECT 控件出界处理
function fToggleTags(){
/*
with (document.all.tags("SELECT")){ // 所有SELECT控件
for (i=0; i<length; i++)
if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
//item(i).style.visibility = "";
goSelectTag[goSelectTag.length] = item(i);
}
}*/
}
// 显示的选择控件超出了界限
function fTagInBound(aTag){
with (VicPopCal.style){
var l = parseInt(left);
var t = parseInt(top);
var r = l+parseInt(width);
var b = t+parseInt(height);
var ptLT = getIE(aTag);
return !((ptLT.x>r)
[解决办法]
(ptLT.x+aTag.offsetWidth<l)
[解决办法]
(ptLT.y>b)
[解决办法]
(ptLT.y+aTag.offsetHeight<t));
}
}
// 得到激活控件所在的位置
// aTag为输出控件对象的形参
function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0); // 初始化坐标位置，为窗口左上角
do {
pt.x=oTmp.offsetLeft // 当前输出控件的left位置
pt.y=oTmp.offsetTop+oTmp.offsetHeight // 当前输出控件的底部位置
oTmp = oTmp.offsetParent; // 得到当前对象的容器对象的引用
} while(oTmp.tagName!="BODY"); // tagName指对象的标签名称
return pt;
}
var gMonths = new Array(" 一月"," 二月"," 三月"," 四月"," 五月"," 六月"," 七月"," 八月"," 九月"," 十月","十一月","十二月");
with (document) {
write("<Div id='VicPopCal' onclick='event.cancelBubble=true' style='POSITION:absolute;visibility:hidden;border:1px ridge;width:10;z-index:100;'>");
write("<table id="VicPopTable" border='1' cellspacing='1' cellpadding='0' bgcolor='#def3ff'>");
write(" <TR>");
write(" <td valign='middle' align='center'>");
write(" <input type='button' name='PrevMonth' value='<' onClick='fPrevMonth()' class='go' style='font: 8pt'> ");
write(" <SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won' style='font: 9pt; BACKGROUND-COLOR: #f4f4ff;'>");
for(i=1900;i<2050;i++)
write(" <OPTION value='"+i+"'>"+i+"年</OPTION>");
write(" </SELECT> ");
write(" <SELECT name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won' style='font:9pt;BACKGROUND-COLOR:#f4f4ff;BORDER-BOTTOM:#666666 1px solid;BORDER-LEFT:#666666 1px solid;BORDER-RIGHT:#666666 1px solid;BORDER-TOP:#666666 1px solid'>");
for (i=0; i<12; i++)
write(" <OPTION value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write(" </SELECT> ");
write(" <input type='button' name='PrevMonth' value='>' onclick='fNextMonth()' class='go' style='font: 8pt'>");
write(" </td>");
write(" </TR>");
write(" <TR>");
write(" <td align='center'>");
write(" <DIV style='background-color:#000000'><table width='100%' border='0' cellspacing='1' cellpadding='0'>");
fDrawCal(giYear, giMonth, 12, 12);
write(" </table>");
write("</DIV>");
write(" </td>");
write(" </TR>");
write(" <TR>");
write(" <TD align='center'>");
write(" <B style='cursor:hand;font:9pt 宋体' onclick='fSetDate(thisYear,thisMonth,thisDay)' onMouseOver='this.style.color=gcToggle'onMouseOut='this.style.color=0'>今天："+thisYear+"年"+thisMonth+"月"+thisDay+"日</B>");
write(" </TD>");
write(" </TR>");
write("</TABLE>");
write("<iframe id="myIfr" marginwidth="0" marginheight="0" frameborder="0" src="javascript:false" style="position:absolute; visibility:"
+"visiable; top:0px; left:0px; width:220px; height:157px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>");
write("</Div>");
write("<SCRIPT event=onclick() for=document>fHideCalendar()<\/SCRIPT>");
}
