Php+mysql+ajax achieve the three-year-date linkage
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script src= "Bootstrap/js/jquery-1.11.2.min.js" ></script>
<script src= "Bootstrap/js/bootstrap.min.js" ></script>
<link href= "Bootstrap/css/bootstrap.min.css" rel= "stylesheet" type= "Text/css"/>
<style>
#year {
width:100px;
}
#month {
width:100px;
}
#day {
width:100px;
}
. main{
width:300px;
height:50px;
}
</style>
<body>
<div style= "margin-left:600px; margin-top:200px; " >
<input type= "text" class= "Form-control main" id= "content" placeholder= "Please enter date Time" data-toggle= "modal" data-target= "# Mymodal ">
<div class= "Modal Fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" aria-hidden= "true" >
<div class= "Modal-dialog" >
<div class= "Modal-content" >
<div class= "Modal-header" >
<button type= "button" class= "Close" data-dismiss= "modal" aria-hidden= "true" >
×
</button>
</div>
<div class= "Modal-body" >
Add drop-down list
<div class= "Time" >
<select id= "Year" ></select>
<select id= "Month" ></select>
<select id= "Day" ></select>
</div>
</div>
<div class= "Modal-footer" >
<button type= "button" class= "btn Btn-default" data-dismiss= "modal" >
Shut down
</button>
<button type= "button" class= "btn btn-primary" data-dismiss= "modal" id= "CK" >
Are you sure
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$ (document). Ready (function (e) {//Load page data
Loadyear (); Load year
Loadmonth (); Load Month
Loadday (); Load days
$ ("#year"). Click (function () {//Get year's Click event
Loadmonth (); Reload Month
Loadday (); Reload days
})
$ ("#month"). Click (function () {//Get month's Click event
Loadday (); Reload days
})
$ ("#ck"). Click (function () {//button click event to upload the selected date and month to the text box
Load (); Assign a value to a text box
})
})
Load year
function Loadyear () {
var current = new Date ();
var year_cur = Current.getfullyear ();
var str = "";
for (Var i=year_cur-5;i<=year_cur+5;i++) {
str = str+ "<option>" +i+ "</option>";
}
$ ("#year"). html (str);
}
Load Month
function Loadmonth () {
var current = new Date ();
var str = "";
for (i=1;i<=12;i++) {
str = str+ "<option>" +i+ "</option>";
}
$ ("#month"). html (str);
}
Load the value of this box
function Load () {
var current = new Date ();
var y = $ ("#year"). Val ();
var m = $ ("#month"). Val ();
var d = $ ("#day"). Val ();
var s = y+ "year" +m+ "month" +d+ "Day" + "/" +current.gethours () + ":" + current.getminutes () + ":" + current.getseconds ();
$ ("#content"). Val (s);
}
Load days
function Loadday () {
var year = $ ("#year"). Val ();
var month = $ ("#month"). Val ();
var month = $ ("#month"). Val ();
if (month==4 | | month==6 | | month==9 | | month==11) {
Add_day (30);
}else if (month==2) {
if (year%4==0 && year%100!=0 | | year%400==0) {
Add_day (29);
}else{
Add_day (28);
}
}else{
Add_day (31);
}
}
function Add_day (I_max) {
var str = "";
for (i=1;i<=i_max;i++) {
str = str+ "<option value= '" +i+ ">" +i+ "</option>";
}
$ ("#day"). html (str);
}
</script>
Effect
Using Php+mysql+ajax operation to realize the function of month-date linkage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
