一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > jquery

推荐专题

最新下载

热门教程

jQuery日历（生日）选择器使用详解

时间：2014-07-26 编辑：简简单单 来源：一聚教程网

我们在编辑用户资料时经常会遇到选择生日选项的问题，今天我给大家介绍如何使用js来实现年月日（生日）选择器，能够准确计算闰年的年月日，方便表单处理。

 

jQuery日历（生日）选择器使用详解


HTML

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

 代码如下 复制代码
 
年
月
日

加载jQuery库和选择器插件：
 

 代码如下 复制代码


jQuery
我们将选择器封装成jQuyer插件的形式，只需使用以下方式调用即可：
 

 代码如下 复制代码
$(function () {
$.ms_DatePicker({
YearSelector: ".sel_year",
MonthSelector: ".sel_month",
DaySelector: ".sel_day"
});
});

以下是插件的具体代码：
 

 代码如下 复制代码
(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 = "";
$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 = "";
$YearSelector.append(yearStr);
}
 
// 月份列表
var monthSel = $MonthSelector.attr("rel");
for (var i = 1; i <= 12; i++) {
var sed = monthSel==i?"selected":"";
var monthStr = "";
$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 = "";
$DaySelector.append(dayStr);
 }
 }
  }
  $MonthSelector.change(function () {
 BuildDay();
  });
  $YearSelector.change(function () {
 BuildDay();
  });
  if($DaySelector.attr("rel")!=""){
 BuildDay();
  }
} // End ms_DatePicker
});
})(jQuery);

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理