jQuery select年月日(生日)选择器
实际项目中,在用户的个人中心,编辑用户资料时经常会遇到选择生日选项的问题。
因为我项目工程中没有使用如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年月日(生日)选择器的更多相关文章
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- 前端基础-jQuery的内容之选择器
阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...
- 第一百六十八节,jQuery,表单选择器
jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...
- jQuery中的:input选择器
jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...
- Jquery | 基础 | 使用 jQuery 表单过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery select取值,赋值操作
select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- jquery select选中表单特效三级联动
好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...
随机推荐
- Linux下kill命令的学习,(主要根据man手册进行的翻译)
名字 kill -终止一个进程 格式 kill [-s signal | -p] [--] pid .. ...
- ASP.NET for WebApi
WebApi,听说过吧?呵呵. 感觉比WebService,WCF要强.尤其是那个啥WCF,啥鬼东西,真难懂.真难搞.真难用. 说比WebService要强,是因为不用在本地先生成个代理.而且XML也 ...
- android8 Notification
界面Layout: customnotice.xml <?xml version="1.0" encoding="utf-8"?> <Li ...
- linux文件读写 文件锁、select、poll【转】
本文转载自:http://blog.csdn.net/fansongy/article/details/6853395 一.文件锁 文件锁用于多个用户共同使用或操作同一个文件.有读锁的时候可以再加读锁 ...
- android 自定义View开发实战(六) 可拖动的GridView
1前言 由于项目需求,需要把项目的主界面采用GridView显示,并且需要根据模块优先级支持拖动图标(砍死产品狗).为此,自定义了一个支持拖拽图标的GridView.效果如下: 具体效果如上图 2 可 ...
- JSP 与 ACTION 之间的跳转
<script language="javascript">function delconfirm(url){ if(confirm("你确定要删除本条数据吗 ...
- ubuntu中pytesseract 安装与使用示例
1. 安装 tesseract-ocr 包 安装方法: sudo apt-get install tesseract-ocr 2. 安装 PIL PIL(python imaging library) ...
- 并不对劲的bzoj4827:loj2020:p3723:[AHOI/HNOI2017]礼物
题目大意 有两个长度为\(n\)(\(n\leq5*10^4\))的数列\(x_1,x_2,...,x_n\)和\(y_1,y_2,...,y_n\),两个数列里的数都不超过\(m\)(\(m\leq ...
- 使用cgroups限制MongoDB的内存使用
cgroups,其名称源自控制组群(control groups)的简写,是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等). 这个项目最早是由Goo ...
- python的md5和base64加密
在用jmeter测试接口时,有的请求参数会加密,例如,回流接口:http://ip:port/oms-gateway-datareflow-mq/orderReflow/tmsPracticeActi ...