前端实现只显示年月日
【摘要】
视频课：https://edu.csdn.net/course/play/7621
只显示年月日的前端代码：jquery+js
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>演示：jQuery年月日（生日）选择器...
视频课：https://edu.csdn.net/course/play/7621
只显示年月日的前端代码：jquery+js
-
<!DOCTYPE HTML>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>演示：jQuery年月日（生日）选择器</title>
-
<link rel="stylesheet" type="text/css" href="../css/main.css" />
-
<style>
-
.demo{width:420px; margin:40px auto 0 auto; min-height:250px;}
-
.demo p{line-height:42px; font-size:16px}
-
</style>
-
<script type="text/javascript" src="jquery.js"></script>
-
-
</head>
-
-
<body>
-
<div id="header">
-
<div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
-
<div class="demo_topad"><script src="/js/ad_js/demo_topad.js" type="text/javascript"></script></div>
-
</div>
-
-
<div id="main">
-
<h2 class="top_title"><a href="http://www.helloweba.com/view-blog-263.html">jQuery年月日（生日）选择器</a></h2>
-
<div class="demo">
-
<p>
-
初始化：<br/>
-
<label>生日：</label>
-
<select id="sel_year"></select>年
-
<select id="sel_month"></select>月
-
<select id="sel_day"></select>日
-
</p>
-
-
<p>
-
默认值：<br/>
-
<label>生日：</label>
-
<select class="sel_year" rel="2000"></select>年
-
<select class="sel_month" rel="2"></select>月
-
<select class="sel_day" rel="14"></select>日
-
</p>
-
-
</div>
-
<br/><div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
-
</div>
-
-
<script type="text/javascript" src="birthday.js"></script>
-
<script>
-
$(function () {
-
$.ms_DatePicker({
-
YearSelector: ".sel_year",
-
MonthSelector: ".sel_month",
-
DaySelector: ".sel_day"
-
});
-
$.ms_DatePicker();
-
});
-
</script>
-
-
<div id="footer">
-
<p>Powered by helloweba.com 允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
-
</div>
-
<p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p>
-
</body>
-
</html>
所需要的js代码，用来计算年月日，包含闰年之类的
-
(function($){
-
$.extend({
-
ms_DatePicker: function (options) {
-
var defaults = {
-
YearSelector: "#sel_year",
-
MonthSelector: "#sel_month",
-
DaySelector: "#sel_day",
-
FirstText: "--",
-
FirstValue: 0
-
};
-
var opts = $.extend({}, defaults, options);
-
var $YearSelector = $(opts.YearSelector);
-
var $MonthSelector = $(opts.MonthSelector);
-
var $DaySelector = $(opts.DaySelector);
-
var FirstText = opts.FirstText;
-
var FirstValue = opts.FirstValue;
-
-
// 初始化
-
var str = "<option value=\"" + FirstValue + "\">" + FirstText + "</option>";
-
$YearSelector.html(str);
-
$MonthSelector.html(str);
-
$DaySelector.html(str);
-
-
// 年份列表
-
var yearNow = new Date().getFullYear();
-
var yearSel = $YearSelector.attr("rel");
-
for (var i = yearNow; i >= 1900; i--) {
-
var sed = yearSel==i?"selected":"";
-
var yearStr = "<option value=\"" + i + "\" " + sed+">" + i + "</option>";
-
$YearSelector.append(yearStr);
-
}
-
-
// 月份列表
-
var monthSel = $MonthSelector.attr("rel");
-
for (var i = 1; i <= 12; i++) {
-
var sed = monthSel==i?"selected":"";
-
var monthStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";
-
$MonthSelector.append(monthStr);
-
}
-
-
// 日列表(仅当选择了年月)
-
function BuildDay() {
-
if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
-
// 未选择年份或者月份
-
$DaySelector.html(str);
-
} else {
-
$DaySelector.html(str);
-
var year = parseInt($YearSelector.val());
-
var month = parseInt($MonthSelector.val());
-
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:
-
dayCount = 28;
-
if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
-
dayCount = 29;
-
}
-
break;
-
default:
-
break;
-
}
-
-
var daySel = $DaySelector.attr("rel");
-
for (var i = 1; i <= dayCount; i++) {
-
var sed = daySel==i?"selected":"";
-
var dayStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";
-
$DaySelector.append(dayStr);
-
}
-
}
-
}
-
$MonthSelector.change(function () {
-
BuildDay();
-
});
-
$YearSelector.change(function () {
-
BuildDay();
-
});
-
if($DaySelector.attr("rel")!=""){
-
BuildDay();
-
}
-
} // End ms_DatePicker
-
});
-
})(jQuery);
如果要测试取出的年月日
-
<script>
-
function asss(){
-
alert($("#sel_year").val());
-
alert($("#sel_month").val());
-
alert($("#sel_day").val());
-
}
-
-
</script>
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/75943053
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）