Home > Developer > JavaScript

JavaScript version of date input control

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Javascript| Control <! 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= "date input Control" >
<script>
function showdb () file://DisplayShow controls/Hidden space
{
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://whenAutomatically take the current time (client) when the control is expanded
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://DayStarting number of the period
var numdays=numberofdays (cmonth,cyear); file://BenDays of the Month
var day=document.getelementsbyname ("Day");
for (Var j=1;j<=numdays;j++) file://Pluginto date
{
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://yearsIncrease in number

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://yearsDecrease in number

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://MonthThe number increased to 12 o'clock, the number of years corresponding to increase by 1, the number of months starting from 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://MonthIncrease in number

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://MonthReduced to 1 o'clock, the number of years corresponding reduction of 1, the number of months starting from 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://MonthDecrease in number


Displaycalendar (Obj_month.innertext-1,obj_year.innertext);
}

function Numberofdays (month,year) file://take the number of days per month to determine excepting leap 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 ();   file://Day period Start number
    var numdays=numberofdays (month,year);  file://this days of the Month
 
    var day=document.getelementsbyname ("Day");
    for (var i=0;i<day.length;i++)
    {
     day[i]. Innertext= "";
   }
    for (var j=1;j<=numdays;j++)   file://insert into date
    {
      day[startday+j-1].innertext=j;
   }
 
 }
  function writedate (n)
  {
     Document.writeln ("

  }

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

<BODY>
<form name= "BD" >
<input type= "text" name= "birthdate" size= "readonly><input" button "type=" ... ">
</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= ">"
<tr>

< TD width= "100%" colspan= "3" height= "" > <input type= "button" value= "<<" name= "Plusyear" >
<input type= "button" value= "<" name= "Plusmonth" > <font id= "Year" >
</font> year <font id= "month" ></font> month
<input type= "button" value= ">" name= "Addmonth" >
<input type= "button" value= ">>" name= "Addyear" ></td>
</tr>
<tr>
&LT;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>
&LT;TD width= "14%" align= "center" ><b><font color= "#FF0000" > Day </font></b></td>
&LT;TD width= "14%" align= "center" ><b> </b></td>
&LT;TD width= "14%" align= "center" ><b> Two </b></td>
&LT;TD width= "14%" align= "center" ><b> three </b></td>
&LT;TD width= "14%" align= "center" ><b> Four </b></td>
&LT;TD width= "15%" align= "center" ><b> Five </b></td>
&LT;TD width= "15%" align= "center" ><b><font color= "#FF0000" > Six </font></b></td>
</tr>
<tr>
&LT;TD width= "14%" align= "center" id= "Day" ></td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
</tr>
<tr>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>


</tr>
<tr>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
</tr>
<tr>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
</tr>
<tr>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>

&LT;TD width= "15%" align= "center" id= "Day" > </td>
</tr>
<tr>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "14%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
&LT;TD width= "15%" align= "center" id= "Day" > </td>
</tr>
</table>
</td>
</tr>
<tr>
&LT;TD width= "33%" height= "1" ></td>
&LT;TD width= "33%" height= "1" ></td>
&LT;TD width= "34%" height= "1" ></td>
</tr>
</table>
</div>
</BODY>
</HTML>



This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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