首頁 > 開發者 > JavaScript

javascript版的日期輸入控制項

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
javascript|控制項 <!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()  file://顯示控制項/隱藏空間
  {
    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");  file://當展開控制項時自動取到目前時間（用戶端）
    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();   file://日期起始數字
    var numDays=numberOfDays(CMonth,CYear);  file://本月天數
    var day=document.getElementsByName("day");
    for(var j=1;j<=numDays;j++)  file://插入日期
  {
    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;  file://年數增加
  
   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;  file://年數減少
  
   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)        file://月數增加到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;  file://月數增加
  
     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)    file://月數減少到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;  file://月數減少


 displayCalendar(obj_month.innerText-1,obj_year.innerText);
  }

  function numberOfDays(month,year)  file://取得每月天數，判斷平年閏年
  {
    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();   file://日期起始數字
    var numDays=numberOfDays(month,year);  file://本月天數
 
    var day=document.getElementsByName("day");
    for(var i=0;i<day.length;i++)
    {
     day[i].innerText="";
    }
    for(var j=1;j<=numDays;j++)  file://插入日期
    {
      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="..." >
  </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">   <input type="button" value="<<" name="plusyear">
      <input type="button" value="<" name="plusmonth">  <font id="year">
      </font>年<font id="month"></font>月
      <input type="button" value=">" name="addmonth">
      <input type="button" value=">>" name="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" ></td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
        </tr>
        <tr>
          <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>


 </tr>
      <tr>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>

        <td width="15%" align="center" id="day" >　</td>
      </tr>
      <tr>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="14%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</td>
        <td width="15%" align="center" id="day" >　</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>



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More