`

jQuery插件:简易年月日选择器

阅读更多
HTML部分

<li>
<label class="label"><span class="star">*</span>生日:</label>
<select class="sel_year">
</select>年
<select class="sel_month">
</select>月
<select class="sel_day">
</select>日
</li>

使用方法:

<script type="text/javascript">
$(function () {
// 出生年月插件
$.ms_DatePicker({
YearSelector: ".sel_year",
MonthSelector: ".sel_month",
DaySelector: ".sel_day"
});
});
</script>


插件代码:

(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();
            for (var i = yearNow; i >= 1900; i--) {
                var yearStr = "<option value=\"" + i + "\">" + i + "</option>";
                $YearSelector.append(yearStr);
            }

            // 月份列表
            for (var i = 1; i <= 12; i++) {
                var monthStr = "<option value=\"" + i + "\">" + 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;
                    }

                    for (var i = 1; i <= dayCount; i++) {
                        var dayStr = "<option value=\"" + i + "\">" + i + "</option>";
                        $DaySelector.append(dayStr);
                    }
                }
            }
            $MonthSelector.change(function () {
                BuildDay();
            });
            $YearSelector.change(function () {
                BuildDay();
            });
        } // End ms_DatePicker
});
})(jQuery);


 

分享到:
评论

相关推荐

    jQuery时间选择器datepicker年月日时分秒选择

    这个插件允许用户方便地选择日期,甚至可以扩展到选择时间,实现年月日时分秒的精确选取。 Datepicker插件的核心功能是显示一个可交互的日历,用户可以通过点击或输入来选择日期。在基本用法中,你可以通过简单的...

    jQuery手机端出生年月日选择代码.zip

    《jQuery手机端出生年月日选择代码:打造高效触屏日期选择体验》 在移动互联网时代,优化用户体验成为了开发者的重要任务。特别是在填写表单时,用户需要输入出生年月日等日期信息,传统的方式可能在手机小屏幕上...

    jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs

    jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs

    jquery插件:ajax和iframe加载提示效果

    **jQuery 插件:Ajax 和 Iframe 加载提示效果** 在网页开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)或加载Iframe时,用户往往需要一个明确的反馈,告知他们系统正在进行后台处理。这个jQuery...

    自定义jquery插件:为jquery加入Notification机制

    为了使用这个插件,你可以在jQuery的选择器之后调用`notification`方法,传入所需的参数: ```javascript $('.your-selector').notification({ message: '操作成功!', type: 'success', duration: 5000 }); ```...

    jQuery移动端出生年月日选择插件 .zip

    "jQuery移动端出生年月日选择插件"正是为此目的而设计的工具,它能够提供一个直观且易于操作的日期选择界面,使得用户在移动端填写表单时更加便捷。 这个插件基于jQuery库,jQuery是广泛使用的JavaScript库,简化了...

    jQuery多功能年月日星期时间特效插件.zip

    "jQuery多功能年月日星期时间特效插件"是一个专门为jQuery设计的日期和时间处理工具,它提供了一套直观、易于操作的时间选择界面,可以实现日期的显示、选择、格式化等多种功能。该插件旨在增强用户体验,简化开发者...

    jquery年月日插件

    jQuery 年月日插件适用于需要日期选择功能的各种 Web 应用,如表单填写、预订系统等。由于基于 jQuery,它在主流浏览器上具有良好的兼容性,包括 Chrome、Firefox、Safari、Edge 和旧版本的 Internet Explorer。 ...

    只选年月日期控件(jQuery)

    在这个场景中,jQuery被用来创建年月选择器,因为它提供了方便的API和丰富的插件生态系统。 2. **日期选择器插件**:jQuery有许多第三方插件,如DatePicker、DateTimePicker等,用于实现各种日期选择功能。对于“只...

    jquery出生信息年月日选择插件timeData下载.zip

    该插件的下载文件为"jquery出生信息年月日选择插件timeData下载.zip",内含必要的CSS样式和JavaScript脚本文件,以及可能的示例代码或文档,方便开发者快速集成到项目中。 在使用"timeData"插件前,确保您的项目...

    jQuery插件之三:日期选择器 DatePicker 1.8.12

    DatePicker还可以与其他jQuery UI组件结合使用,如时间选择器TimePicker Addon,以实现日期和时间的联合选择。此外,可以利用API实现更复杂的功能,如限制可选日期范围、禁用特定日期等。 总结,jQuery UI的...

    jquery 插件 颜色选择器

    而"jQuery插件颜色选择器"是jQuery生态中的一款实用工具,用于帮助用户在网页上方便地选取颜色。这类插件通常提供一个交互式的颜色面板,允许用户通过鼠标点击或滑动来选择所需的颜色值,适用于各种需要颜色输入的...

    JQuery插件:facebook输入框(加强版)

    来自James Smith (http://loopj.com)一个JQuery 插件 我对该插件进行了加强化 可以看我的博客 http://hi.baidu.com/hjzheng/blog/item/afc83748d77aaae183025c6d.html

    jQuery插件:可拖动的图片展示实例(效果超酷)

    例如,使用jQuery选择器可以轻松地选取页面中的特定元素,而$.fn.extend()方法则允许我们创建自定义的jQuery插件。 这个"可拖动的图片展示实例"插件是jQuery功能的一个典型应用,它利用了JavaScript的拖放API来实现...

    jQuery日期时间选择器插件.rar

    jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件....

    jQuery日期选择器插件

    **jQuery日期选择器插件**是一种广泛应用于网页开发中的组件,它允许用户通过交互式的日历界面方便地选择日期。这种插件极大地提高了用户在网页上输入日期的体验,尤其适用于需要用户输入生日、预约日期或者截止日期...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    只选择年月的jquery插件

    针对“只选择年月”的需求,这里介绍的是一款名为“simpleCanleder”的jQuery插件,它专门设计用于让用户仅能选择年份和月份,而非完整的日期。以下是对这款插件的详细解析: 1. **使用场景**: - 当用户只需要...

    颜色选择器 - JQUERY插件

    **颜色选择器 - JQUERY插件** 在网页设计和开发中,颜色选择器是一个不可或缺的工具,它允许用户在界面上方便地选取所需的颜色。JQUERY插件中的颜色选择器是一个简洁而功能强大的组件,旨在增强用户体验,使颜色...

    jquery 日历插件 可选年月(中文)

    总的来说,“jQuery日历插件可选年月(中文)”是一个方便且功能强大的工具,它可以为你的网页应用添加专业的日期选择功能,同时适应中文环境。通过理解和利用它的特性,你可以轻松地提升你的项目用户体验。

Global site tag (gtag.js) - Google Analytics