前端实现只显示年月日

来源：互联网发布：ajaxfileupload.js ie 编辑：程序博客网时间：2024/05/29 14:51

只显示年月日的前端代码：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>

阅读全文

0 3