我想用text做一个输入时间的控件(最好用js不用ocx)。只要能解决问题分肯定给分。

Question

详细参见
http://go6.163.com/colorweb/js/mengxhselectdate.htm
====================================<STYLE>
#calendar {
LEFT: 50px; VISIBILITY: hidden; POSITION: absolute; TOP: 50px; BACKGROUND-COLOR: white
}
TD.cal {
FONT-SIZE: 8pt; FONT-FAMILY: arial
}
TD.calmonth {
FONT-SIZE: 8pt; FONT-FAMILY: arial; TEXT-ALIGN: right
}
TD.caltoday {
BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #800000; 
BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #800000; COLOR: white; BORDER-TOP-COLOR: #800000;
 FONT-FAMILY: arial; BACKGROUND-COLOR: #c0c0c0; TEXT-ALIGN: right; BORDER-RIGHT-WIDTH: 1px; 
 BORDER-RIGHT-COLOR: #800000; border-type: solid
}
INPUT.caltoday {
FONT-SIZE: 8pt; WIDTH: 47px; FONT-FAMILY: arial; HEIGHT: 20px
}
A.cal {
COLOR: #000000; TEXT-DECORATION: none
}
A.calthismonth {
COLOR: #000000; TEXT-DECORATION: none
}
A.calothermonth {
COLOR: #808080; TEXT-DECORATION: none
}
</STYLE><SCRIPT language=JavaScript>
var use_css=false;
var use_layers=false;   
if (document.all)    { use_css    = true; }
if (document.layers) { use_layers = true; }var CALWINDOW;// Write out default styles to document or return string
function writestyles(doc) {
var result = "";
result += "<STYLE>\n";
result += "TD.cal { font-family:arial; font-size: 8pt; }\n";
result += "TD.calmonth { font-family:arial; font-size: 8pt; text-align: right;}\n";
result += "TD.caltoday { font-family:arial; font-size: 8pt; text-align: right; color: white; 
background-color:#C0C0C0; border-width:1; border-type:solid; border-color:#800000; }\n";
result += "INPUT.caltoday { font-family:arial; font-size: 8pt; width:47px; height: 20px; }\n";
result += "A.cal { text-decoration:none; color:#000000; }\n";
result += "A.calthismonth { text-decoration:none; color:#000000; }\n";
result += "A.calothermonth { text-decoration:none; color:#808080; }\n";
result += "</STYLE>\n";
if (doc != "") {
doc.write(result);
}
else {
return result;
}
}
writestyles(this.document);function getOffsetLeft (el) {
var scrollamount = document.body.scrollLeft;
var ol = el.offsetLeft;
while ((el = el.offsetParent) != null) { ol += el.offsetLeft; }
ol = ol - scrollamount;
return ol;
}
function getOffsetTop (el) {
var scrollamount = document.body.scrollTop;
var ot = el.offsetTop;
while((el = el.offsetParent) != null) { ot += el.offsetTop; }
ot = ot - scrollamount;
return ot;
}
function showCalendar(divname, anchorname, functionname) {
// Find position relative to anchor
if (use_css) {
var x = getOffsetLeft(document.all[anchorname]);
var y = getOffsetTop(document.all[anchorname]);
}
else if (use_layers) {
var found=0;
for (var i=0; i<document.anchors.length; i++) {
if (document.anchors[i].name == anchorname) {
found=1;
break;
}
}
if (found == 0) {
return;
}
var x = document.anchors[i].x;
var y = document.anchors[i].y;
x=x-window.pageXOffset;
y=y-window.pageYOffset;
}
else {
return;
}
x = x-152;
y = y+25;
// WRITE CALENDAR TO DIV
if (divname != "") {
// Position the calendar DIV
if (use_layers) { var calendardiv = document.layers[divname]; }
if (use_css)    { var calendardiv = document.all[divname].style; }
calendardiv.left = x;
calendardiv.top  = y;
// Write output to calendar DIV
if (arguments.length>4) { 
outputCalendar(divname,functionname,arguments[3],arguments[4]);
}
else {
outputCalendar(divname,functionname);
}
// Show the calendar DIV
calendardiv.visibility = "visible";
}
// WRITE CALENDAR TO POPUP WINDOW
else {
if (use_layers) {
var windowx = window.screenX;
var windowy = window.screenY + (window.outerHeight-24-window.innerHeight);
}
if (use_css) {
var windowx = window.screenLeft;
var windowy = window.screenTop;
}
x = x + windowx;
y = y + windowy;
if (!CALWINDOW || CALWINDOW.closed) {
CALWINDOW = window.open("about:blank","calwindow",
"status,width=150,height=175,screenX="+x+",left="+x+",screenY="+y+",
top="+y+",resizable");
}
// Write output to popup window
if (arguments.length>4) { 
outputCalendar(divname,functionname,arguments[3],arguments[4]);
}
else {
outputCalendar(divname,functionname);
}
}
}function hideCalendar(divname) {
if (divname != "") {
if (use_layers) { var calendardiv = document.layers[divname]; }
if (use_css)    { var calendardiv = document.all[divname].style; }
calendardiv.visibility = "hidden";
}
else {
if (CALWINDOW && !CALWINDOW.closed) {
CALWINDOW.close();
}
}
}

function outputCalendar(divname, functionname) {
var now = new Date();
if (arguments.length > 2) { var month = arguments[2]; }
else { var month = now.getMonth()+1; }
if (arguments.length > 3) { var year = arguments[3]; }
else { var year = now.getFullYear(); }
var monthnames = new Array('一月','二月','三月','四月','五月','六月','七月',
'八月','九月','十月','十一月','十二月');
var daysinmonth= new Array(0,31,28,31,30,31,30,31,31,30,31,30,31); if ( ( (year%4 == 0)&&(year%100 != 0) ) || (year%400 == 0) ) { // leap year
daysinmonth[2] = 29;
}
var current_month = new Date(year,month-1,1);

var display_year = year;
var display_month = month;
var display_date = 1; var offset = 0;
var weekday= current_month.getDay();
if (weekday > 0) {
display_month--;
if (display_month < 1) { display_month = 12; display_year--; }
display_date = daysinmonth[display_month]-weekday+1;
}
var next_month = month+1;
var next_month_year = year;
if (next_month > 12) { next_month=1; next_month_year++; }
var last_month = month-1;
var last_month_year = year;
if (last_month < 1) { last_month=12; last_month_year--; }

var date_class;
var result = "";
if (divname == "" ) {
var windowref = "window.opener.";
}
else {
var windowref = "";
}
// If POPUP, write entire HTML document
if (divname == "") {
result += "<HTML><HEAD>"+writestyles('')+"<BODY MARGINWIDTH=0 MARGINHEIGHT=0 TOPMARGIN=0 
RIGHTMARGIN=0 LEFTMARGIN=0>";
}
result += '<FORM>';
if (divname != "") {
result += '<TABLE WIDTH=144 BORDER=1 BORDERWIDTH=1 BORDERCOLOR="#808080" CELLSPACING=0 CELLPADDING=1>';
result += '<TR><TD ALIGN=CENTER>';
result += '<CENTER>';
result += '<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>';
}
else {
result += '<CENTER><TABLE WIDTH=100% BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>';
}
result += '<TR BGCOLOR="#ff3366">';
result += ' <TD CLASS="cal" WIDTH=22 ALIGN=CENTER VALIGN=MIDDLE><B>
<A CLASS="cal" HREF="javascript:'+windowref+
'outputCalendar(\''+divname+'\',\''+functionname+'\','+last_month+','+last_month_year+')">
&lt;&lt;</A></B></TD>';
result += ' <TD CLASS="cal" WIDTH=100 ALIGN=CENTER>'+monthnames[month-1]+' '+year+'</TD>';
result += ' <TD CLASS="cal" WIDTH=22 ALIGN=CENTER VALIGN=MIDDLE><B>
<A CLASS="cal" HREF="javascript:'+windowref+'outputCalendar(\''+divname+'\',\''
+functionname+'\','+next_month+','+next_month_year+')"
>&gt;&gt;</A></B></TD>';
result += '</TR>';
result += '</TABLE>';
result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=CENTER>';
result += '<TR>';
result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>日</TD>';
result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>一</TD>';
result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>二</TD>';
result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>三</TD>';
result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>四</TD>';
result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>五</TD>';
result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>六</TD>';
result += '</TR>';
result += '<TR><TD COLSPAN=7 ALIGN=CENTER><IMG SRC="graypixel.gif" WIDTH=120 HEIGHT=1></TD></TR>';
for (var row=1; row<=6; row++) {
result += '<TR>';
for (var col=1; col<=7; col++) {
if (display_month == month) {
date_class = "calthismonth";
}
else {
date_class = "calothermonth";
}
if ((display_month == now.getMonth()+1) && 
(display_date==now.getDate()) && (display_year==now.getFullYear())) {
td_class="caltoday";
}
else {
td_class="calmonth";
}
result += ' <TD CLASS="'+td_class+'">
<A HREF="javascript:'+windowref+functionname+'('+display_year+','+
display_month+','+display_date+');'
+windowref+'hideCalendar(\''+divname+'\');" CLASS="'+date_class+'">'+
display_date+'</A></TD>';
display_date++;
if (display_date > daysinmonth[display_month]) {
display_date=1;
display_month++;
}
if (display_month > 12) {
display_month=1;
display_year++;
}
}
result += '</TR>';
}
result += '<TR><TD COLSPAN=7 ALIGN=CENTER><IMG SRC="graypixel.gif" WIDTH=120 HEIGHT=1></TD></TR>';
result += '<TR>';
result += ' <TD COLSPAN=7 ALIGN=CENTER>';
result += ' <INPUT CLASS="caltoday" TYPE="button" 
VALUE="Today" onClick="'+windowref+functionname+'(\''+now.getFullYear()+'\',
\''+(now.getMonth()+1)+'\',\''+now.getDate()+'\');'
+windowref+'hideCalendar(\''+divname+'\');">';
result += ' <BR>';
result += ' </TD>';
result += '</TR>';
result += '</TABLE>';
result += '</CENTER>';
result += '</TD></TR>';
result += '</TABLE>';
result += '</FORM>';
if (divname == "") {
result += "</BODY></HTML>";
} if (divname != "") {
if (use_css) {
document.all[divname].innerHTML = result;
}
if (use_layers) {
var thedoc = document.layers[divname].document;
thedoc.open;
thedoc.write(result);
thedoc.close();
}
}
else {
CALWINDOW.document.open();
CALWINDOW.document.write(result);
CALWINDOW.document.close();
}
}</SCRIPT><SCRIPT language=JavaScript>
function showdate( year, month, date ){var a = new Array('','一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
month = a[month];
document.forms[0].date1.value = ""+year+"年"+month+date+"日";
hideCalendar('calendar');
}
function clicklink() {
if (document.forms[0].caltype[0].checked) {
showCalendar('calendar','calposition1','showdate');}
else {showCalendar('','calposition1','showdate');
}
}
</SCRIPT>
<FORM>请选择日期：<INPUT type=radio CHECKED name=caltype> 
<B>DIV</B> (DHTML方式) <INPUT type=radio name=caltype> <B>弹出窗口方式</B> <BR><BR>日期: 
<INPUT name=date1><A name=calposition1> </A>[ <A 
href="javascript:clicklink()">弹出选择框</A> ] <BR></FORM>
<DIV id=calendar></DIV>

Answer 1

感谢老孟!
但是我希望不用mouse操作,最好完全用键盘。
这样速度才是最快的。
还有一点:你的这个控件是不是不能输入时间只能输入日期啊?!

Answer 2

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312;">
<style>body,input{font:9pt verdana;}</style>
</head>
<body onload="yangdate.value='';yangtime.value='';yangdate.focus();">
<br>
<input type=text id=min1 value="date" onfocus="eval('yang'+this.value+'.focus()');eval('yang'+this.value+'.value=yang'+this.value+'.value');" style="position:absolute;left:-1000;width:0px;">
<br><center>
<br><br>date:
<input type=text onkeypress="test(this)" onkeyup="keyu(this)" onselectstart="return false" id=yangdate onmousedown="moused(this);" onkeydown="keyd(this)" onpaste="return false;" oncontextmenu="return false;" onmouseup="mouseu(this);" value=""> 例:2001-09-22/yyyy:mm:dd
<br>time:
<input type=text onkeypress="test(this)" onkeyup="keyu(this)" onselectstart="return false" id=yangtime onmousedown="moused(this);" onkeydown="keyd(this)" onpaste="return false;" oncontextmenu="return false;" onmouseup="mouseu(this);" value=""> 例:20:30:16/hh:mm:ss&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br><br>
<script language=javascript>
/**************[email protected]************/
/**************2001/9/9********************/
document.onkeydown=kkkk;
function kkkk(){
  if(event.keyCode==9)min1.focus();
}
var stop=0;
var thecursor=0;
var datecursor=0;
var timecursor=0;
function test(me){
  if(me.id=='yangdate'){
    var position1=4,position2=7,length=10,replaces='-';thecursor=datecursor;
  }
  if(me.id=='yangtime'){
    var position1=2,position2=5,length=8,replaces=':';thecursor=timecursor;
  }
  if(thecursor==position1 || thecursor==position2){event.keyCode=null;return false;}
  if(event.keyCode>=48&&event.keyCode<=57&&thecursor<length&&stop==0){
    if(me.id=='yangdate')var checkit=checkdate(me);
if(me.id=='yangtime')var checkit=checktime(me);
    if(checkit){
  thecursor++;
  if(me.id=='yangdate')datecursor=thecursor;else timecursor=thecursor;
}
  }else{
    event.keyCode = null;
return false;
  }
  window.status=thecursor;
}
function checktime(me){
    if(thecursor==0&&event.keyCode>50){
  alert('\n两位数的小时第一位不能大于2   \n\n       请重新输入\n');
  event.keyCode=null;
  return false;
}
if(thecursor==1&&(me.value).charAt(0)==2&&event.keyCode>51){
      alert('\n小时不能大于23 \n\n  请重新输入\n');
  event.keyCode=null;
  return false;
}
    if(thecursor==3&&event.keyCode>53){
  alert('\n两位数的分钟第一位不能大于5   \n\n       请重新输入\n');
  event.keyCode=null;
  return false;
}
    if(thecursor==6&&event.keyCode>53){
  alert('\n两位数的秒第一位不能大于5   \n\n       请重新输入\n');
  event.keyCode=null;
  return false;
}
return 1;
}
function checkdate(me){
    if(thecursor==0&&!(event.keyCode==49||event.keyCode==50)){
  alert('\n年份必须在1000年---2999年之间   \n\n         请重新输入\n');
  event.keyCode=null;
  return false;
}
if(thecursor==5&&event.keyCode>49){
      alert('\n两位数的月份第一位必须是0或1 \n\n      请重新输入\n');
  event.keyCode=null;
  return false;
}
if(thecursor==6&&(me.value).charAt(5)==1&&event.keyCode>50){
      alert('\n月份不能大于12\n\n   请重新输入\n');
  event.keyCode=null;
  //me.value=(me.value).substring(0,5);
  //thecursor--;
  return false;
}
if(thecursor==6&&(me.value).charAt(5)==0&&event.keyCode<=48){
      alert('\n月份不能小于01\n\n  请重新输入\n');
  event.keyCode=null;
  return false;
}
if(thecursor==8&&event.keyCode>51){
      alert('\n两位数的日期第一位不能大于3 \n\n      请重新输入\n');
  event.keyCode=null;
  return false;
}
if(thecursor==9&&(me.value).charAt(8)==3&&event.keyCode>49){
      alert('\n日期不能大于31\n\n  请重新输入\n');
  event.keyCode=null;
  //me.value=(me.value).substring(0,8);
  //thecursor--;
  return false;
}
if(thecursor==9&&(me.value).charAt(8)==0&&event.keyCode<=48){
      alert('\n日期不能小于01\n\n  请重新输入\n');
  event.keyCode=null;
  return false;
}
return 1;
}
function keyu(me){
   if(me.id=='yangdate')var position1=4,position2=7,replaces='-';
   if(me.id=='yangtime')var position1=2,position2=5,replaces=':';   /*if(thecursor==10&&(me.id)=='yangdate'){
     min1.value='time';thecursor=0;min1.focus();return false;
   }*/   if(event.keyCode>=33 && event.keyCode<=36){
     me.value=me.value;stop=0;return false;
   }
   if(event.keyCode==37 || event.keyCode==39){
     me.value=me.value;stop=0;return false;
   }
   if(event.keyCode==8||event.keyCode==46){
     me.value='';thecursor=0;window.status=thecursor;
 if(me.id=='yangdate')datecursor=0;else timecursor=0;
 return false;
   }
   if(thecursor==position1 || thecursor==position2){
     me.value=me.value+replaces;
     thecursor++;
 if(me.id=='yangdate')datecursor=thecursor;else timecursor=thecursor;
 window.status=thecursor;
     return false;
   }
}
function keyd(me){
  if(event.keyCode==37){stop=1;return false;}
  if(event.keyCode>=33&&event.keyCode<=36){stop=1;return false;}
}
function moused(me){
   if(me.id=='yangdate')min1.value='date';
   if(me.id=='yangtime')min1.value='time';
window.status=(me.id=='yangdate'?datecursor:timecursor);
  min1.focus();
  return false;
}
function mouseu(me){
  min1.focus();
  return false;
}
</script>
</body>
</html>

Answer 3

你可以对年月日分秒单独做个text，这样就比较好判断了！

Answer 4

to busibird(不死鸟):
  您的程序使我受益匪浅!多谢多谢:)
  可是我还有一点不明，您是怎样控制mouse的?
  我看不懂您的程序，请您解释一下。
  还有就是为什么要用window.status?只是为了调试程序用的吗?
  您的程序还一点不足之处就是对退格键的处理!
  直接把.value = ""。实在是有些粗糙:)
  不过看的出来，您还是费了不少时间和精力来写这段程序的。
  到时分数一定奉上:)

Answer 5

1.鼠标控制:
   当鼠标点击文本框时,无法得知光标所处的位置,只能间接的通过其它方法使它处在最前或者最后,方法是:
   源文件一开始,有一个id为min1的文本框,在页面上看不见它.
   <input type=text id=min1 value="date" onfocus="yangdate.focus();yangdate.value=yangdate.value;" style="position:absolute;left:-1000;width:0px;">
   当单击输入时间的文本框(id为yangdate)时,执行min1.focus();此时yangdate失去了焦点,
而min1获得了焦点,则执行yangdate.focus();yangdate文本框光标就处在最前,如果再加上一句
yangdate.value=yangdate.value;yangdate文本框光标就处在最后.2.window.status确实是为了调试用的,显示当前光标的位置.3.如果退格键每次退一个格的话,碰到 '-'怎么办.
  
  我想了一个新的办法就是,如果光标处在月份的区域,则只删除月份 

Answer 6

对于退格的处理,
我的方法是当退格到'-'后面一个字符时，
就自动把'-'也一起删掉!
比如
20001-09-12
当用户按退格把'2'删掉后，再按退格把'1'删掉,
我同时就把'1'前面的一个'-'去掉。
用户再按退格时，就直接删'9'了。我觉得你的程序功能基本实现了，就是有些复杂,可读性不太好。
anyway,给分啦:)