jQuery插件:简易年月日选择器
基于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插件:简易年月日选择器的更多相关文章
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- 10个精选的颜色选择器Javascript脚本及其jQuery插件
Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...
- 简易jQuery插件
之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...
- -_-#【jQuery插件】Colorpicker 颜色选择器
Spectrum - The No Hassle jQuery Colorpicker (jQuery 插件) Color Picker jQuery plugins (jQuery 插件) colo ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- 常用JQuery插件
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- 一些常用的jQuery插件
1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js ...
随机推荐
- android 自动化压力测试-monkey 3 命令参数
使用monkey help 命令查看命令参数,如下: C:\Users\chenfenping>adb shell monkey -help usage: monkey [-p ALLOWED_ ...
- eclipse编辑jsp文件和javascript代码很卡解决办法
1.Window -> Preference -> General -> Editors -> Text Editors -> HyperLinking -> 在用 ...
- DOM中事件绑定补充方法
先将上一篇文章中提到的为元素增加事件的方法和移除事件的方法拿过来: <span style="font-size:18px;">//跨浏览器添加事件 function ...
- 【POJ】【1635】Subway Tree Systems
树的最小表示法 给定两个有根树的dfs序,问这两棵树是否同构 题解:http://blog.sina.com.cn/s/blog_a4c6b95201017tlz.html 题目要求判断两棵树是否是同 ...
- 【BZOJ】【1004】【HNOI2008】Cards
Burnside/Polya+背包DP 这道题目是等价类计数裸题吧……>_> 题解:http://m.blog.csdn.net/blog/njlcazl_11109/8316340 啊其 ...
- 【BZOJ】【1023】【SHOI2008】cactus仙人掌图
DP+单调队列/仙人掌 题解:http://hzwer.com/4645.html->http://z55250825.blog.163.com/blog/static/150230809201 ...
- spring framework项目源码github托管地址
方法一:直接下载,github托管地址:http://repo.spring.io/simple/libs-release-local/org/springframework/spring/ 方法二: ...
- UML状态图(转载)
概述: 图表本身的名称,阐明该图的目的和其他细节.它描述了在一个系统中的一个组成部分不同的状态.状态是特定的一个系统的组件/对象. 状态图描述了一个状态机.我们阐明的状态机可以被定义为一台机器,它定义 ...
- ASP.NET母版页与内容页相对路径的问题
1. 图片问题 图片显示问题:<img runat="server" src="~/images/ad468x60.gif" alt="&quo ...
- Sql调用WebService
DECLARE @scid int,@rt int ) --创建MSSOAP.SoapClient组件(如果安装的是SoapToolkit30,应该是MSSOAP.SoapClient30,否则是MS ...