专栏首页编程微刊jQuery年月日(年龄)选择插件

jQuery年月日(年龄)选择插件


下载地址:https://www.helloweba.net/javascript/263.html


<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8">
        <title>jQuery年月日(生日)选择器</title>
        <style>

        </style>
        <script type="text/javascript" src="jquery.js"></script>
    </head>

    <body>
        <div class="demo">
            <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>
        <script type="text/javascript" src="birthday.js"></script>
        <script>
            $(function() {
                $.ms_DatePicker({
                    YearSelector: ".sel_year",
                    MonthSelector: ".sel_month",
                    DaySelector: ".sel_day"
                });
                $.ms_DatePicker();
            });
        </script>
    </body>

</html>

birthday.js内容:(来自github)

(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);

怎么得到选择的值?

function getBirthday() {
                var date = "";
                date += $(".sel_year").val();
                date += "-";
                if (parseInt($(".sel_month").val()) < 10) {
                    date += "0";
                    date += $(".sel_month").val();
                } else {
                    date += $(".sel_month").val();
                }
                date += "-";
                if (parseInt($(".sel_day").val()) < 10) {
                    date += "0";
                    date += $(".sel_day").val();
                } else {
                    date += $(".sel_day").val();
                }
                return date;
            }

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript获取默认时间的上一个月

    王小婷
  • 微信开发笔记

    王小婷
  • uniapp学习笔记:一套代码,运行到7个平台(一)

    前两天总结了一下小程序的一些开源的框架之后,有大佬在底下留言评论补充,uniapp没有写上,去年有小伙伴把我拉到这个群聊里面去了,当时还没有怎么了解这个框架,当...

    王小婷
  • JavaScript优化细节(一)

    1、置空Closure(闭包)引起的Memory leak滞留的Object和domain 2、用fragment实现append大量元素 var f= doc...

    寒月十八
  • 编程书说的“Go程序员应该让聚合类型的零值也具有意义”是在讲什么

    在《Go语言编程》这本书和很多其他Go 编程教程中很多都提到过“Go程序员应该让一些聚合类型的零值也具有意义”的概念,我们这篇文章主要说一下有意义的零值这个话题...

    KevinYan
  • WebWorker 在文本标注中的应用

    在之前数据瓦片方案的介绍中,我们提到过希望将瓦片裁剪放入 WebWorker 中进行,以保证主线程中用户流畅的地图交互(缩放、平移、旋转)。

    ConardLi
  • json.stringfy()和json.parse()

    json.stringfy()将对象、数组转换成字符串;json.parse()将字符串转成json对象。

    CherishTheYouth
  • “AS3.0高级动画编程”学习:第一章高级碰撞检测

    AdvancED ActionScript 3.0 Animation 是Keith Peters大师继"Make Things Move"之后的又一力作,网上...

    菩提树下的杨过
  • Spring 中 BeanFactory 的生命周期与源码解析(附例程)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    剑影啸清寒
  • Three.js 粒子系统学习小记:礼花效果实现

    在3D建模过程中,当我们需要创建很多细小的物体时,并不会一个个地创建这些物体,而是通过创建粒子,粒子可以模拟很多效果,例如烟花、火焰、雨滴、雪花、云朵等等。Th...

    郭诗雅

扫码关注云+社区

领取腾讯云代金券