select_birthday.html
3.0 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_782635_cvxdd8r2ec.css"/>
<link rel="stylesheet" href="css/select_birthday.css "/>
<script src="js/base.js"></script>
<title>选择生日</title>
</head>
<body>
<div class="container">
<div class="fl ">
<select class="ipt" id="nian"></select>
<label class="surname">年</label>
<select class="ipt" id="yue"></select>
<label class="surname">月</label>
<select class="ipt" id="ri"><option>选择</option></select>
<label class="surname">日</label>
</div>
<div class="foot">
<p class="sure">确定</p>
<p class="cancel">取消</p>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var dateOption = (function () {
var option = { 0: "nian", 1: "yue", 2: "ri" };
function renderOption(min, max) {
var i = min, optionHtml = "";
for (; i < max; i++) {
optionHtml += "<option value='" + i + "'>" + i + "</option>";
}
optionHtml = "<option value='-1'>选择</option>" + optionHtml;
return optionHtml;
}
function getTotalDayByDate(year, month) {
var dayCount = 0;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dayCount = 31;
break;
case 4:
case 6:
case 9:
case 11:
dayCount = 30;
break;
case 2:
//闰年计算
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))
dayCount = 29;
else
dayCount = 28;
break;
}
return dayCount;
}
$("#nian").empty().append(renderOption(1920, 2030));
$("#yue").empty().append(renderOption(1, 13));
$("#yue").change(function () {
var year = parseInt($("#nian").val());
var month = parseInt($(this).val());
var dayCount = getTotalDayByDate(year, month);
$("#ri").siblings("span").text("选择");
$("#ri").empty().append(renderOption(1, dayCount + 1));
});
$("#nian,#yue,#ri").change(function () {
var val = $(this).val();
$(this).siblings("span").text(val);
});
})();
//取消按钮
$(".cancel").click(function(){
window.history.back()
})
</script>
</body>
</html>