Date selector (Query+bootstrap and JS two ways)

Date selection is selected in the drop-down list of the year, month, day, the year before and after the five-year, 12 months, the day is 30, 31, 29, 28 days difference, as the month changes

First, the JS method of the date selection

(1) The first is three drop-down list, click on the year, month, day display list of content, so that is to give the three list of "click event" onclick

<select id= "Nian" onclick= "Biantian ()" ></select> year <select id= "Yue" onclick= "Biantian ()" ></ Select> month <select id= "Tian" ></select> Day

This is the effect:

(2) Write JS method

Note: Month and day three selection box, then is to write three methods

Methods for populating the year

function Fillnian () {var b = new Date ();  Take the current time var Nian = parseint (B.getfullyear ());  Take the current year var str = ""; for (var i=nian-5;i<nian+6;i++)  //Display for 5 years before and after {
Judging the current selection of the year, check the current year if (I==nian) {str = str+ "<option  selected= ' selected '  value= '" +i+ ">" +i+ "<　　　　/option> ";　　　　} else {str = str+ "<option value= '" +i+ ">" +i+ "</option>"; }}//To add html,html to the drop-down menu with the ID name Nian is the str document.getElementById ("Nian") written above. InnerHTML = str;

Write the year method, remember to call, see the effect is as follows:

(3) The method of filling the month: this and the year is similar, there is no big change

function Fillyue () {var b = new Date ();  Take the current time var Yue = parseint (B.getmonth () +1);  Take the current month var str = ""; for (var i=1;i<13;i++)  //cycle; month is starting from 1, 12 months a year, less than 13{
Determine if the current month is selected if (i==yue) {str = str+ "<option  selected= ' selected ' value= '" +i+ ">" +i+ "</option>";} else{str = str+ "<option value=" "+i+" ' > "+i+" </option> ";}} document.getElementById ("Yue"). InnerHTML = str;  Write the str value to the drop-down list where the ID name is Yue}

Write the method of the month, remember to call, see the effect is as follows:

(3) The method of filling the day: Hening and month of the same, not the same is the month, the number of days is not the same

function Filltian () {    var b = new Date ();     var Tian = parseint (B.getdate ());  Gets the current number of days    var yue = document.getElementById ("Yue"). Value;  Find the value of the month    var Nian = document.getElementById ("Nian"). Value;  Find the value of the year    var ts =;    Number of months in number 30th: The number of months is 4, 6, 9, 11 o'clock, the number of days is 30 days    if (yue==4 | | yue==6 | | yue==9 | | yue==11)    {ts=30;    }    February different years of the day    if (yue==2)    {
Divisible by 4, not divisible by 100, or if ((nian%4==0 && nian%100! = 0)  , divisible by 400; Leap year}else{    ts = 28;//Common Year}    }    var str = "";    for (Var i=1;i<ts+1;i++)    {
Determine if the number of days is checked if (I==tian) {    str = str+ "<option  selected= ' selected ' value= '" +i+ "' >" +i+ "</option>" ;} else{    str = str+ "<option value=" "+i+" ' > "+i+" </option> ";}    }    document.getElementById ("Tian"). InnerHTML = str;  Give the value of STR to the ID name is the drop-down list of days}

Write the method of the day, remember to call, see the overall effect is as follows:

Leap years are as follows:

Second, the date selector of Query+bootstrap

To use jquery and bootstrap, these two packages must be introduced.

<script src= ". /jquery-1.11.2.min.js "></script><script src=". /dist/js/bootstrap.min.js "></script><script src=" riqishijian.js "></script><link href=". /dist/css/bootstrap.min.css "rel=" stylesheet "type=" Text/css "/>

Go to the point: clicking on the text box will pop up a window of the date selection, so

(1) Write a hint word and write a text box

<input type= "text" id= "Riqi"/>  //FINAL display of the date time of the place, the text box has a name to add to the event

(2) Write bootstrap modal frame, direct reference can be

<div class= "Modal Fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" aria-hidden= "true" > <div class= "Modal-dialog" > <div class= "modal-content" >
Title Section <div class= "Modal-header" > <button type= "button" class= "Close" data-dismiss= "mod   Al "Aria-hidden=" true ">x</button> 
Main section <div class= "Modal-body" > <select id= "Nian" >//Year drop-down list </select&                Gt                <select id= "Yue" >//month drop-down list </select> <select id= "Tian" >//day drop-down list </select> </div>
Last section <div class= "Modal-footer" > <button type= "button" class= "Btn Btn-default" Data-di smiss= "modal" > Close </button> <button type= "button" class= "btn btn-primary" id= "sure" > OK </but ton>//OK button Also if Add event, so also have a name </div> </div><!--/.modal-content--</div>& lt;! --/.modal--></div>

(3) Consider how to display this popup box?

When you click the text box that displays the date and then the selection box pops up, set the event to the text box

$ ("#riqi"). Click (function () {    $ (' #myModal '). Modal (' show ');  Bootstrap direct prompt How to show the pop-up window, directly take it with you can})

Look at the effect:

(4) Write jquery page: Month and day of the method is actually the same as the way JS, is the style and take the way and JS a little difference, the other has nothing to note

Of course, after writing the jquery method, remember to call it when you use it.

The method of the year, month, and day in the jquery page: The logic in JS is the same (not much)

Load year function Loadnian () {var date=new date;  The same as the JS method to take the current time and year Var year=date.getfullyear (); var str = ""; for (var i=year-5;i<year+6;i++) {
Determines whether the current year is checked if (i==year) {str + = "<option selected= ' selected ' value= '" +i+ ">" +i+ "</option>";} else{str + = "<option value= '" +i+ ">" +i+ "</option>";}} $ ("#nian"). html (str);  Also writes the value to the drop-down list of the year}

Load Month function Loadyue () {
And the logic of the month in JS is the same as the Var date=new date; var yue=date.getmonth () +1;  Take the current month var str = ""; for (var i=1;i<13;i++) {
Determines whether the month is selected if (I==yue) {str + = "<option selected= ' selected ' value= '" +i+ ">" +i+ "</option>";} else{str + = "<option value= '" +i+ ">" +i+ "</option>";}} $ ("#yue"). html (str);}

Load Day function Loadtian () {
And the logic in JS is the same as the Var date=new date;var tian = date.getdate ();  Take the number of days var ZS = 31; Total days var Nian = $ ("#nian"). Val ();  Take the value of the year var Yue = $ ("#yue"). Val ();  The value to be taken to the month

Also the number of days is 30 days if (Yue = = 4 | | yue==6 | | yue==9 | | yue==11) {ZS = 30;} else if (yue==2) {
Determine if the leap month ((nian%4==0 && nian%100!=0) | | nian%400==0) {ZS = 29;} else{ZS = 28;}} var str = ""; for (var i=1;i<zs+1;i++) {
Determine if the number of days is selected if (I==tian) {str + = "<option selected= ' selected ' value= '" +i+ ">" +i+ "</option>";} Else{str + = "<option value= '" +i+ ">" +i+ "</option>";}} $ ("#tian"). html (str);}

The last is to choose which year, the back of the month and the day will change, then it is necessary to write at the beginning

$ (document). Ready (function (e) {    $ ("#nian"). Change (function () {  //Select year Loadtian ();}) $ ("#yue"). Change (function () {  //Select Month changes days Loadtian ();})});

(5) Pass the value of the selected month and date into the text box

$ ("#sure"). Click (function () {var Nian = $ ("#nian"). Val ();  Take the value of the year var Yue = $ ("#yue"). Val ();   Take the value of the month var Tian = $ ("#tian"). Val ();  Take the value of the number of days var str = nian+ "-" +yue+ "-" +tian; The stitching string displays the month Day $ ("#riqi"). Val (str);  Place the value in the Riqi text box $ (' #myModal '). Modal (' hide ')  //Close the Popup})

So the selector is over, look at the overall effect:

Click the text box to pop up the date selection box

Select a date, click the OK button

Alternatively: You can also add the default time in addition to the date

$ ("#sure"). Click (function () {var Nian = $ ("#nian"). Val ();  Take the value of the year var Yue = $ ("#yue"). Val ();   Take the value of the month var Tian = $ ("#tian"). Val ();  Take the value of the number of days var d = new Date (), var str = nian+ "-" +yue+ "-" +tian+ "" +d.gethours () + ":" +d.getminutes () + ":" +d.getdate (); The stitching string displays the day of the month, and also the time $ ("#riqi"). Val (str);  Place the value in the Riqi text box $ (' #myModal '). Modal (' hide ')  //Close the Popup})

Select the effect, and the following time is automatically displayed by default:

Date selectors can be used both ways.

Date selector (Query+bootstrap and JS two ways)