Implement linkage selection of birthday dates based on javascript bootstrap and bootstrap city Linkage

Implement linkage selection of birthday dates based on javascript bootstrap and bootstrap city Linkage

The examples in this article share with you the code for js to achieve date Association selection, which is suitable for birthday selection for your reference. The specific content is as follows:

Implementation goals: Three select input boxes, year, month, and day, and a hidden input, get the input value through js. If the value is switched to the date format, select indicates the time in input. Otherwise, it is null. The default year range is from January 1, 1900 to the current year.

I have used bootstrap. For more information about bootstrap, see bootstrap.

The following is the html content:

<Div class = "col-sm-9"> <label class = "checkbox-inline"> <select node-type = "birthday_year" name = "birthday_y" id = "birthday_y"> <option value = ""> </option> </select> <span> year </span> </label> <label class = "checkbox-inline"> <select node-type = "birthday_month" name = "birthday_m" id = "birthday_m"> <option value = ""> </option> </select> <span> month </span> </ label> <label class = "checkbox-inline"> <select node-type = "birthday_month" name = "birthday_d" id = "birthday_d"> <option value = ""> </option> </select> <span> day </span> </label> <input type = "hidden" name = "birth" id = "birth" value = "2016/2/12 "> <label class = 'checkbox-inline text-warning hidden 'id =" birth_error_info "> <I class = 'fa fa-warning'> enter the complete birthday </I> </label> </div>

Below is the implementation of js:

// Set the conversion of the birthday and obtain var date = new Date (); var year = date. getFullYear (); for (var I = year; I> = 1900; I --) {$ ("# birthday_y "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");} $ ('# birthday_y '). change (function () {var birth_year = $ ('# birthday_y '). val (); if (birth_year! = "") {Var birth_month = $ ('# birthday_m'). val (); if (birth_month! = "") {If (birth_month = "2") {if (birth_year % 4 = 0 & birth_year % 100! = 0) | (birth_year % 400 = 0) {$ ("# birthday_d "). append ("<option value =" + 29 + "label =" + 29 + ">" + 29 + "</option> ");} else {$ ("# birthday_d option [value = '29']"). remove () ;}} else {for (var I = 1; I <= 12; I ++) {$ ("# birthday_m "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");}}} else {$ ("# birthday_m" ).html ("<option value =''> </option> "); $ (" # birthday_d ").html (" <option val Ue = ''> </option>");} checkBirthday () ;}); $ ('# birthday_m '). change (function () {var birth_year = $ ('# birthday_y '). val (); var birth_month = this. value; var birth_day = $ ('# birthday_d '). val (); if (birth_month! = "") {Switch (birth_month) {case "1": case "3": case "5": case "7": case "8": case "10 ": case "12": if (birth_day = "") {$ ("# birthday_d "). empty (); $ ("# birthday_d "). append ("<option value =''> </option> "); for (var I = 1; I <= 31; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");}} else {switch ($ ("# birthday_d option: last "). attr ("value") {case "28": $ ("# birthday _ D "). append ("<option value =" + 29 + ">" + 29 + "</option>"); case "29": $ ("# birthday_d "). append ("<option value =" + 30 + ">" + 30 + "</option>"); $ ("# birthday_d "). append ("<option value =" + 31 + ">" + 31 + "</option>"); break; case "30": $ ("# birthday_d "). append ("<option value =" + 31 + ">" + 31 + "</option>"); break; default: break ;}} break; case "4 ": case "6": case "9": case "11": if (birth_day = "") {$ ("# Birthday_d "). empty (); $ ("# birthday_d "). append ("<option value =''> </option> "); for (var I = 1; I <= 30; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");}} else {switch ($ ("# birthday_d option: last "). attr ("value") {case "28": $ ("# birthday_d "). append ("<option value =" + 29 + ">" + 29 + "</option>"); case "29": $ ("# birthday_d "). append ("<option value =" + 30 + ">" + 30 + "</option>"); case "31": $ ("# birthday_d option [value = '31']"). remove (); break; default: break;} break; case "2": if (birth_day = "") {if (birth_year % 4 = 0 & birth_year % 100! = 0) | (birth_year % 400 = 0) {for (var I = 1; I <= 29; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");}} else {for (var I = 1; I <= 28; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");}}} else {$ ("# birthday_d option [value = '31']"). remove (); $ ("# birthday_d option [value = '30']"). remove (); if (birth_year % 4 = 0 & birth_year % 100! = 0) | (birth_year % 400 = 0) {} else {$ ("# birthday_d option [value = '29']"). remove () ;}} break; default: break ;}} checkBirthday () ;}); $ ('# birthday_d '). change (function () {checkBirthday () ;}); $ ('# birthday_d '). focus (function () {if ($ ('# birthday_m '). val () = "") {$ ("# birthday_d "). empty (); $ ("# birthday_d "). append ("<option value =''> </option> ") ;}}); // based on the data provided by the background, fill in the user's value var birth_value =$ ('# birth '). val (); If (birth_value! = "") {Var date1 = new Date (birth_value); var B _year = date1.getFullYear (); var B _month = date1.getMonth () + 1; var B _day = date1.getDate (); $ ("# birthday_y "). find ("option [value = '" + B _year + "']"). attr ("selected", "selected"); if ($ ('# birthday_y '). val ()! = "") {For (var I = 1; I <= 12; I ++) {$ ("# birthday_m "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");}} $ ("# birthday_m "). find ("option [value = '" + B _month + "']"). attr ("selected", "selected"); switch (B _month) {case 1: case 3: case 5: case 7: case 8: case 10: case 12: for (var I = 1; I <= 31; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");} Break; case 4: case 6: case 9: case 11: $ ("# birthday_d "). append ("<option value =''> </option> "); for (var I = 1; I <= 30; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option>") ;}break; case 2: if (B _year % 4 = 0 & B _year % 100! = 0) | (B _year % 400 = 0) {for (var I = 1; I <= 29; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option> ");}} else {for (var I = 1; I <= 28; I ++) {$ ("# birthday_d "). append ("<option value =" + I + "label =" + I + ">" + I + "</option>") ;}} break; default: break;} $ ("# birthday_d "). find ("option [value = '" + B _day + "']"). attr ("selected", "selected");} // verify whether the complete function checkBirthday () {var B _year = $ ('# bir Thday_y '). val (); var B _month = $ ('# birthday_m '). val (); var B _day = $ ('# birthday_d '). val (); if (B _year! = "" & B _month! = "" & B _day! = "") {$ ('# Birth '). val (B _year + "-" + B _month + "-" + B _day); $ ('# birth_error_info '). addClass ("hidden");} else {$ ('# birth '). val (""); $ ('# birth_error_info '). removeClass ("hidden ");}}

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Date selection of javascript forms
• Javascript code for the input date Selection Function
• Javascript date interaction selector [some of the Code is worth learning]
• Js implements a provincial/municipal-level association selection box code sharing
• Js date selection is automatically filled into the input box (pretty compatible with Firefox)
• Ext JS 4 implements the date Selection Control with week (week) (Practice 1)
• Ext JS 4 implement the date Selection Control with week (week) (practice 2)
• JSON + HTML achieve linkage selection between provinces and cities
• JS simple method for implementing the second-level linkage selection plug-in of cities