前端实现只显示年月日

用户9184480

发布于 2024-12-17 10:37:29

9300

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

script