前端实现只显示年月日
生活随笔
收集整理的這篇文章主要介紹了
前端实现只显示年月日
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
視頻課：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>總結
以上是生活随笔為你收集整理的前端实现只显示年月日的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java面试宝典 之 物流配送路径优化问
- 下一篇： 比较两个日期大小和获取当前月最大天数的存