javascript版的日期输入控件

最新推荐文章于 2012-05-17 11:12:00 发布
最新推荐文章于 2012-05-17 11:12:00 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript function input button microsoft generator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhaoweiwei/article/details/20600

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<META NAME="Author" CONTENT="zhaoweiwei">
<META NAME="Keywords" CONTENT="birthday_input">
<META NAME="Description" CONTENT="日起输入控件">
<script>
function showdb()  //显示控件/隐藏空间
{
  var CurrentDate=new Date();
  var CYear=CurrentDate.getFullYear();
  var CMonth=CurrentDate.getMonth();
  var CDay=CurrentDate.getDay();
 
  var a=document.getElementById("input_birth");
 
  var obj_year=document.getElementById("year");  //当展开控件时自动取到当前时间（客户端）
  obj_year.innerText=CYear;
  var obj_month=document.getElementById("month");
  obj_month.innerText=CMonth+1;
 
  var s=new Date(CYear,CMonth,1);
  var startDay=s.getDay();   //日期起始数字
  var numDays=numberOfDays(CMonth,CYear);  //本月天数
  var day=document.getElementsByName("day");
  for(var j=1;j<=numDays;j++)  //插入日期
  {
    day[startDay+j-1].innerText=j;
  }

 
  if(a.style.visibility=='visible')
  {
     a.style.visibility='hidden';
  }
  else
  {
    a.style.visibility='visible';
  }
 
 
}
function addyear()
{

   var obj_year=document.getElementById("year");
   var obj_month=document.getElementById("month");

   var num_year=obj_year.innerText;
   obj_year.innerText=parseInt(num_year)+1;  //年数增加
  
   displayCalendar(obj_month.innerText-1,obj_year.innerText);
  

  
}
function plusyear()
{
  
   var obj_year=document.getElementById("year");
   var obj_month=document.getElementById("month");
  
   var num_year=obj_year.innerText;
   obj_year.innerText=parseInt(num_year)-1;  //年数减少
  
   displayCalendar(obj_month.innerText-1,obj_year.innerText);
  

  
}
function addmonth()
{
  
   var obj_month=document.getElementById("month");
   var obj_year=document.getElementById("year");
  
   if(parseInt(obj_month.innerText)>=12)        //月数增加到12时，年数相应增加1，月数从1开始
   {
      obj_month.innerText="0";
      obj_year=document.getElementById("year");
      var num_year=obj_year.innerText;
      obj_year.innerText=parseInt(num_year)+1;
   }
  
   var num_month=obj_month.innerText;
   obj_month.innerText=parseInt(num_month)+1;  //月数增加
  
   displayCalendar(obj_month.innerText-1,obj_year.innerText);

  

  
}
function plusmonth()
{
  
   var obj_month=document.getElementById("month");
   var obj_year=document.getElementById("year");
  
   if(parseInt(obj_month.innerText)<=1)    //月数减少到1时，年数相应减少1，月数从12开始
   {
      obj_month.innerText="13";
      obj_year=document.getElementById("year");
      var num_year=obj_year.innerText;
      obj_year.innerText=parseInt(num_year)-1;
   }
  
   var num_month=obj_month.innerText;
   obj_month.innerText=parseInt(num_month)-1;  //月数减少
  
   displayCalendar(obj_month.innerText-1,obj_year.innerText);

  
  
}

function numberOfDays(month,year)  //取得每月天数，判断平年闰年
{
  var numDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  n=numDays[month];
  if(month==1&&year%4==0) ++n;
  return n;
}

function displayCalendar(month,year)
{

  var d=new Date(year,month,1);
  var startDay=d.getDay();   //日期起始数字
  var numDays=numberOfDays(month,year);  //本月天数
 
  var day=document.getElementsByName("day");
  for(var i=0;i<day.length;i++)
  {
     day[i].innerText="";
  }
  for(var j=1;j<=numDays;j++)  //插入日期
  {
    day[startDay+j-1].innerText=j;
  }
 
}
function writeDate(n)
{
   document.writeln("<H3 ALIGN='CENTER'>"+n+"</H3>");
}

function add_day(year,month,day)
{
   bd.birthdate.value=year+"-"+month+"-"+day;
}
</script>
</HEAD>

<BODY>
<form name="bd">
<input type="text" name="birthdate" size="20" readOnly><input type="button" value="..." οnclick="showdb()">
</form>
<div id="input_birth" name="input_birth" style="visibility:hidden; width:239; height:128">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" style="cursor:hand" bordercolor="#111111" width="100%"  height="26">
  <tr>
    <td width="100%" colspan="3" height="26">&nbsp;&nbsp; <input type="button" value="&lt;&lt;" οnclick="plusyear()" name="plusyear">
    <input type="button" value="&lt;" οnclick="plusmonth()" name="plusmonth">&nbsp; <font id="year">
    </font>年<font id="month"></font>月
    <input type="button" value="&gt;" οnclick="addmonth()" name="addmonth">
    <input type="button" value="&gt;&gt;" name="addyear" οnclick="addyear()"></td>
  </tr>
  <tr>
    <td width="100%" colspan="3" height="119" valign="top">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
      <tr>
        <td width="14%" align="center"><b><font color="#FF0000">日</font></b></td>
        <td width="14%" align="center"><b>一</b></td>
        <td width="14%" align="center"><b>二</b></td>
        <td width="14%" align="center"><b>三</b></td>
        <td width="14%" align="center"><b>四</b></td>
        <td width="15%" align="center"><b>五</b></td>
        <td width="15%" align="center"><b><font color="#FF0000">六</font></b></td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)"></td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="14%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
        <td width="15%" align="center" id="day" οnclick="add_day(year.innerText,month.innerText,this.innerText)">　</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td width="33%" height="1"></td>
    <td width="33%" height="1"></td>
    <td width="34%" height="1"></td>
  </tr>
</table>
</div>
</BODY>
</HTML>

使用JavaScript实现的日期输入控件，支持各种浏览器（包括Firefox）。
TechNovaX的博客
09-22 420
在上面的示例中，我们创建了一个日期输入框，使用id属性为"datepicker"，并设置了一个用于显示错误消息的span元素，其id为"error-message"。此外，我们还添加了一个用于提交表单的提交按钮。在上面的JavaScript代码中，我们首先获取了日期输入框和错误消息的引用。检查日期字符串是否符合"YYYY-MM-DD"的格式，并尝试将其转换为实际的日期对象。如果日期格式有效，我们清空错误消息，并可以在该逻辑块中添加自己的逻辑代码。首先，我们将创建一个HTML表单，其中包含一个日期输入框。
js时间日期输入框
11-20
js时间日期输入框 使用方法如下所示： 时间输入就是这么简单
javascript写的一个不错的日历控件
02-27 956
<!-- alimama_pid="mm_10249644_1605763_4929893"; alimama_titlecolor="707070"; alimama_descolor ="CCCCCC"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="FFFFFF"; alimama_linkcolor="DADA
javascript日期时间控件
人生的最大遗憾莫过于错误地坚持了不该坚持的，轻易地放弃了不该放弃的……
07-15 1906
程序源代码：无标题文档 document.write("");document.write("");function writeIframe(){    var strIframe = ""+    "*{font-size: 12px; font-family: 宋体}"+    "";    if (WebCalendar.drag){ strIframe += ""+    "var
JavaScript实现的日期控件
05-17 96
JavaScript实现的日期控件 它还会读取当前的时间 &lt;html&gt; &lt;head&gt; &lt;style&gt; &lt;!-- .wr{font-size: 12pt; line-height: 22px} .wr1 { FONT-SIZE: 12px; LINE-HEIGHT: 200%} .wr2 { FONT-SIZE: 14px; LINE-HEIGH...
免费的Javascript日期输入及选择控件
03-05
应该说是现在最全，最方便的日历，支持UTF-8及世界上所有的语言，很好用，就是文件大了一些。 博文链接：https://fangfeixue.iteye.com/blog/128156
全面解析JavaScript日期输入控件
标题中提到的“JS日期输入控件(共4个)”暗示了文档或资源中介绍了四种不同的 JavaScript 日期输入控件。以下是对这些控件所涉及知识点的详细阐述。 ### JavaScript 日期对象 JavaScript 的 Date 对象是处理日期和...
JavaScript实现的日期控件具体代码
10-26
总的来说，这个JavaScript日期控件通过自定义的CSS和JavaScript实现了动态的日历显示，允许用户方便地选择日期并将其插入到指定的输入字段。这样的控件在网页表单中非常常见，特别是在需要用户输入日期的场景下，极...
多风格JavaScript日期输入控件的实现与应用
### 知识点一：多风格日期输入控件（Calendar） **1. 概念理解：** 多风格日期输入控件是一种Web表单元素，允许用户在一个友好的界面中选择日期。它通常提供一个文本框，用户可以在其中直接输入日期或者点击文本框...
打造高效键盘操作的JavaScript日期输入控件
在实现这样的日期输入控件时，开发者需要使用JavaScript（js）进行前端编程。具体来说，他们需要编写相应的脚本来监听和处理键盘事件，实现上述的功能。这可能涉及到了DOM操作、事件监听器的绑定和解绑、以及对输入...
js日期输入控件，键盘实现快速输入（绝对原创）
07-16
通常我们从网上找到的，都是通过鼠标选择的js日期控件，例如最流行的My97DatePicker。但是这些控件仅仅是好看，在很多业务系统中，操作员更希望所有的信息都是靠键盘输入，这样的输入速度，比一会儿用键盘，一会儿用鼠标快很多。本例是一个可以动态配置日期/时间输入项的键盘时间输入控件。支持：1、输入值校验2、只允许输入数字3、屏蔽输入法4、不允许拖拽文字到输入框中5、不允许拷贝文字到输入框中
js（javascript） 日期控件
10-30
js脚本写的日期控件，js脚本写的日期控件，js脚本写的日期控件
javascript日期选择控件
12-20
javascript日期选择控件 支持移动端
免费的Javascript日期输入及选择控件大全
08-14 2243
  JSCalendar1.0　　jscalendar-1.0
javascript 写的日期输入！！！
tutuliu的专栏
07-14 611
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml" >head>    title>无标题页title>    script 
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值