文档章节

javascript版的日期输入控件

rise-worlds
 rise-worlds
发布于 2016/06/20 13:40
字数 1241
阅读 0
收藏 0
<!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="..." onclick="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;" onclick="plusyear()" name="plusyear">
      <input type="button" value="&lt;" onclick="plusmonth()" name="plusmonth">&nbsp; <font id="year">
      </font>年<font id="month"></font>月
      <input type="button" value="&gt;" onclick="addmonth()" name="addmonth">
      <input type="button" value="&gt;&gt;" name="addyear" onclick="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" onclick="add_day(year.innerText,month.innerText,this.innerText)"></td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        </tr>
        <tr>
          <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
        <td width="15%" align="center" id="day" onclick="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>

本文转载自:http://www.cnblogs.com/flying_bat/archive/2004/10/13/51715.html

rise-worlds

rise-worlds

粉丝 3
博文 1755
码字总数 0
作品 0
深圳
程序员
私信 提问
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3
简洁JS 日历控件 支持日期和月份选择

以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题。现在只提供两种风格(简洁版和古典版)和两种语言(英文和...

梦梦阁
2018/09/06
47
0
Dojo学习5 日期选择:dijit.form.DateTextbox

日期选择:dijit.form.DateTextbox 推荐使用dijit.form.DateTextbox而不是dijit. _Calendar.js 因为前者已经将日期选择和文本框封装好了,而且有一些验证的功能,这个控件使用起来也很方便,...

元来元去
2010/11/02
1K
0
关于日历控件My97DatePicker 在IE6下出现“无法打开站点,已终止操作”

今天项目测试,发现在IE6下一个页面打开失败,提示:“无法打开站点,已终止操作”,测试了下发现是日历控件My97DatePicker 导致的错误,于是看了下My97DatePicker 的相关介绍,无果;最后无...

山海经
2014/10/27
181
0
javascript在asp.net中运用

Net是微软公司下一代的战略核心,ASP.Net是.Net战略在Web开发方面的具体实现。它继承了ASP的简单性和易用性,同时克服了ASP程序结构化较差,难于阅读和理解的缺点。特别是服务器端控件和事件...

crossmix
2015/04/19
14
0

没有更多内容

加载失败,请刷新页面

加载更多

JS 打印控制

JS 打印控制 var PrintStartString = "<!--打印开始标示符-->";//设置打印开始区域var PrintEndString = "<!--打印结束标示符-->";//设置打印结束区域var HtmlText = window.do......

DrChenXX
13分钟前
5
0
LevelDB:使用介绍

LevelDB 提供的接口其实很简单,下面举例进行简单说明。 安装 git clone https://github.com/google/leveldb cd leveldb mkdir -p build && cd build cmake -DCMAKE_BUILD_TYPE=Release .. ......

slagga
19分钟前
5
0
《JavaScript正则表达式迷你书》读书笔记

正则基础 常见简写形式 字符组 具体含义 记忆方式 \d 表示 [0-9]。表示是一位数字。 其英文是 digit(数字) \D 表示 [^0-9]。表示除数字外的任意字符。 \w 表示 [0-9a-zA-Z_]。表示数字、大小...

muzi131313
24分钟前
4
0
Git的反悔操作

概述 这次主要来讲讲Git的反悔操作,自己平时在写代码的过程中经常会出现想要弃用所有的改动或回滚到上一次commit的情况。Git上的反悔操作有reset、rebase、revert等,每个操作各有区别和对应...

duduYZ
24分钟前
2
0
实现双向绑定Proxy比defineproperty优劣如何?

前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一. Vue三要素 响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向...

寻找海蓝
36分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部