实际项目中,在用户的个人中心,编辑用户资料时经常会遇到选择生日选项的问题。

因为我项目工程中没有使用如jQuery UI的插件性下拉列表,所以选择select + option的原生方式,实现选择器。

能够准确计算闰年的年月日,方便表单处理。

实际效果如下图,式样略粗糙

HTML

生日中的年月日以<select>下拉方式,我们给每个select加个rel的属性,当已知用户生日时,直接通过rel属性标注,插件会将rel属性的数值转换成select的值。

jQuery

$.date_picker({

YearSelector:  "#date-sel-year",

MonthSelector: "#date-sel-month",

DaySelector:   "#date-sel-day"

});

$.ms_DatePicker();

******

实际使用,最终提交时,需要获得用户输入的生日,直接 $('#date-sel-year').val() 可以获得select的内容,

有时页面逻辑是,显示生日,用户点击 [编辑] 按钮后,初始化select的内容,此时用 $('#date-sel-year').val(year) 可以完成赋值的操作。

这时候,需要注意的是,很多生日显示时,会显示为,2015-09-01,但是直接赋值 09 给date-sel-month,是不能正确显示的。

需要判断如果变量第一个字符是0,要将第二位的字符赋值给select。

******

以下是插件的具体代码:

(function($){  
        $.extend({  
            date_picker: 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();  
                }  
            }  
        });  
    })(jQuery);

jQuery select年月日(生日)选择器的更多相关文章

  1. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  3. 前端基础-jQuery的内容之选择器

    阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...

  4. 第一百六十八节,jQuery,表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

  5. jQuery中的:input选择器

    jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...

  6. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery select取值,赋值操作

    select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...

  8. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  9. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

随机推荐

  1. 使用python在极坐标中生成一条直线

    在测试雷达时,往往需要测试雷达的数据是否准确,这时就需要在雷达图中显示一条标准的直线作为对比. "create a wall" import numpy as np import ...

  2. Ubuntu14.04常用安装

    sudo apt-get update sudo apt-get install flashplugin-nonfree ================= 类飞秋软件 sudo apt-get in ...

  3. 使用Java对100以内偶数求和

    /** * 根据for循环的描述: for(变量初始化:循环条件:修改循环变量的值),求出100以内的所有偶数,for(int i = 0; i<=100; i+=2),把这些偶数累加到一个空的 ...

  4. 【iOS系列】-iOS中内存管理

    iOS中创建对象的步骤: 1,分配内存空间,存储对象 2,初始化成员变量 3,返回对象的指针地址 第一:非ARC机制: 1,对象在创建完成的同时,内部会自动创建一个引用计数器,是系统用来判断是否回收对 ...

  5. js可视区域图片懒加载

    可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...

  6. [读书笔记]《没人会告诉你的PPT真相》

    这本书分了三部分.第一部分偏重于基础技能,其中分为三部分,打印.放映.保存.第二部分是进阶,分为模板下载.模板修改.增加自定义页面等.第三部分是打造商业范的PPT,分为商业范的特征,具体技能体现(重复 ...

  7. 2016/05/23 thinkphp M方法和D方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  8. 打造字符界面的多媒体Linux系统

    0 环境与目标 硬件:ThinkPad R52笔记本一台. 目标:字符界面的Linux系统,同时可以看图片,听音乐,看视频,无线上网,重要的是可以听着音乐编程了! 注意:本文打造的系统主要是供一个工程 ...

  9. 设备没有可用空间 /var/spool/clientmqueue sendmail

    [root@hadoop3 /]# crontab -e/tmp/crontab.TB7A7w: 设备上没有空间[root@hadoop3 /]# df -Bg文件系统 1G-块 已用 可用 已用% ...

  10. Spring Boot集成MyBatis与分页插件

    Maven依赖: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>p ...