基于jquery写的选择年月日出生日期的插件

<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插件:简易年月日选择器的更多相关文章

  1. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  2. jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  3. 10个精选的颜色选择器Javascript脚本及其jQuery插件

     Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...

  4. 简易jQuery插件

    之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...

  5. -_-#【jQuery插件】Colorpicker 颜色选择器

    Spectrum - The No Hassle jQuery Colorpicker (jQuery 插件) Color Picker jQuery plugins (jQuery 插件) colo ...

  6. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

  7. 40个让你的网站屌到爆的jQuery插件

    一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...

  8. 常用JQuery插件

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  9. 一些常用的jQuery插件

    1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js ...

随机推荐

  1. django Forgienkey字段 在前台用js做处理

    在我做的项目中有个选择省城市的选项,这两个字段的关系是一对多的关系class Province(models.Model): # 省会      name = models.CharField(max ...

  2. Poj 1904 King's Quest 强连通分量

    题目链接: http://poj.org/problem?id=1904 题意: 有n个王子和n个公主,王子只能娶自己心仪的公主(一个王子可能会有多个心仪的公主),现已给出一个完美匹配,问每个王子都可 ...

  3. 【BZOJ】【3007】拯救小云公主

    思路题 我的naive的做法是二分答案+判定是否有路径可走……但是没有正确理解[走的方向任意]这句话…… 其实就是说想咋走咋走= =360°无死角乱走…… 所以其实是个平面上的问题…… 我们可以换个方 ...

  4. YEBIS

    在往项目里加yebis做各种后处理 就是看起来很高大上的各种味精 我又热!泪!盈!眶!了 压缩包解开 有各种文档 恩哼~ 大概看了下找到sample build.... 直接就success了.... ...

  5. .NET4.0下网站应用法度用UrlRewriter.dll重写无后缀路径 (在IIS7.5中的设备办法)

    .NET4.0下网站应用法度用UrlRewriter.dll重写无后缀路径 在IIS中新建网站(端标语8111) 直接运行http://localhost:8111/ 设备办法: 二.添加通配符脚本映 ...

  6. IT主要在线学习网站

    大的模式来说,目前做编程学习网站的大概有两种.一种是视频模式,如优才,麦可,开课吧等,一种是非视频模式如计蒜客(泡面吧),实验楼和他们汇智网等.其中多数产品的创新也都是在“视频+交互式学习”模式上.要 ...

  7. 2015年4月 15款免费jQuery插件

    点这里 We have collected for you the 15 fresh, free and handy jQuery plugins that will help to speed up ...

  8. JDBC资料集

    1.基本的JDBC概念: http://dev.mysql.com/doc/refman/5.1/zh/connectors.html#cj-basic-jdbc 2.JSP&Servlet学 ...

  9. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  10. 凌乱的yyy

    题目背景 快noip了,yyy很紧张! 题目描述 现在各大oj上有n个比赛,每个比赛的开始.结束的时间点是知道的. yyy认为,参加越多的比赛,noip就能考的越好(假的) 所以,他想知道他最多能参加 ...