此版本为网上的日期联动插件修改版,加入了修改后事件

/*
* jQuery Date Selector Plugin
* 日期联动选择插件
*
* Demo:
$("#calendar").DateSelector({
ctlYearId: <年控件id>,
ctlMonthId: <月控件id>,
ctlDayId: <日控件id>,
defYear: <默认年>,
defMonth: <默认月>,
defDay: <默认日>,
minYear: <最小年|默认为1882年>,
maxYear: <最大年|默认为本年>,
dateChanged: 日期修改后事件,function(yearSelect,monthSelect,daySelect){}
}); HTML:<div id="calendar"><SELECT id=idYear></SELECT>年 <SELECT id=idMonth></SELECT>月 <SELECT id=idDay></SELECT>日</div>
*/
(function ($) {
//SELECT控件设置函数
function setSelectControl(oSelect, iStart, iLength, iIndex) {
oSelect.empty();
for (var i = 0; i < iLength; i++) {
if ((parseInt(iStart) + i) == iIndex)
oSelect.append("<option selected='selected' value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>");
else
oSelect.append("<option value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>");
}
} $.fn.DateSelector = function (options) {
var oThis = this;
options = options || {}; //初始化
this._options = {
ctlYearId: null,
ctlMonthId: null,
ctlDayId: null,
defYear: 0,
defMonth: 0,
defDay: 0,
minYear: 1882,
maxYear: new Date().getFullYear(),
dateChanged:function(yearSelect,monthSelect,daySelect){}
} for (var property in options) {
this._options[property] = options[property];
} this.yearValueId = $("#" + this._options.ctlYearId);
this.monthValueId = $("#" + this._options.ctlMonthId);
this.dayValueId = $("#" + this._options.ctlDayId);
this.dateChanged=this._options.dateChanged;
var dt = new Date(),
iMonth = parseInt(this.monthValueId.attr("data") || this._options.defMonth),
iDay = parseInt(this.dayValueId.attr("data") || this._options.defDay),
iMinYear = parseInt(this._options.minYear),
iMaxYear = parseInt(this._options.maxYear); this.Year = parseInt(this.yearValueId.attr("data") || this._options.defYear) || dt.getFullYear();
this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;
this.Day = iDay > 0 ? iDay : dt.getDate();
this.minYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year;
this.maxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year; //初始化控件
//设置年
setSelectControl(this.yearValueId, this.minYear, this.maxYear - this.minYear + 1, this.Year);
//设置月
setSelectControl(this.monthValueId, 1, 12, this.Month);
//设置日
var daysInMonth = new Date(this.Year, this.Month, 0).getDate(); //获取指定年月的当月天数[new Date(year, month, 0).getDate()]
if (this.Day > daysInMonth) { this.Day = daysInMonth; };
setSelectControl(this.dayValueId, 1, daysInMonth, this.Day); //绑定控件事件
this.yearValueId.change(function () {
oThis.Year = $(this).val();
setSelectControl(oThis.monthValueId, 1, 12, oThis.Month);
oThis.monthValueId.change(); });
this.monthValueId.change(function () {
oThis.Month = $(this).val();
var daysInMonth = new Date(oThis.Year, oThis.Month, 0).getDate();
if (oThis.Day > daysInMonth) { oThis.Day = daysInMonth; };
setSelectControl(oThis.dayValueId, 1, daysInMonth, oThis.Day);
oThis.dayValueId.change();
});
this.dayValueId.change(function () {
oThis.Day = $(this).val();
oThis.dateChanged(oThis.yearValueId,oThis.monthValueId,oThis.dayValueId);
}); this.dateChanged(oThis.yearValueId,oThis.monthValueId,oThis.dayValueId);
}
})(jQuery);

jQuery日期联动插件的更多相关文章

  1. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  2. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  3. JQuery日期选择器插件date-input

    JQuery日期选择器插件之date-input 官方网站:http://jonathanleighton.com/projects/date-input/ 下载地址: http://github.c ...

  4. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

  5. DCalendar增加月份选择功能--简单jQuery日期选择器插件改动

    做时间插件的时候,很多都会遇到要做选择月份的插件,但是DCalendar提供的api只支持日期选择,最近遇到这个问题,所以调整了一下源码,话不多说,先看效果吧 点击日期插件,出现上图,再点击月份就直接 ...

  6. jquery 省市区联动插件

    使用方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  8. 提示用户体验的最佳免费 Jquery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  9. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

随机推荐

  1. [HDOJ - 5208] Where is Bob 【DFS+按位贪心】

    题目链接:HDOJ - 5208 题目分析 使用按位贪心的思想,即从高位向低位枚举,尽量使这一位的答案为 1 . 我们使用 DFS ,每次就是对于  [l1, r1] [l2, r2] x  进行处理 ...

  2. oc调用c++接口时 报错 Undefined symbols for architecture i386:

    当在oc中调用c++中的方法时,发现说c++中的方法没定义或是找不到 Undefined symbols for architecture i386: "_desTYData", ...

  3. DLL ActiveForm 线程同步问题

    本文试着从分析Synchronize同步执行的实现机制入手,来解决DLL/ActiveForm中线程同步的问题. 线程中进行同步时调用的Synchronize函数,仅仅是把调用调用线程.调用方法地址. ...

  4. 在eclipse中安装activiti插件

    最近在学习activiti,先学习安装插件吧. 单击help->Install new Software 然后添加资源 name:activiti location:http://activit ...

  5. Linux Shell编程(15)——操作字符串

    Bash已经支持了令人惊讶的字符串操作的数量.不幸地,这些工具缺乏统一的标准.一些是参数替换的子集,其它受到UNIX的expr命令的功能的影响.这导致不一致的命令语法和冗余的功能,但这些并没有引起混乱 ...

  6. 【转】patch命令

    原文网址:http://bbs.chinaunix.net/thread-1945698-1-1.html patch给文件1应用补丁文件变成另外一个文件2(需要先用"diff 文件1 文件 ...

  7. (转载)javascript实现弹出对话框

    (转载)http://xiezezhun.iteye.com/blog/335898 简单对话框 一般常用的是 alert prompt confirm三种对话框 JavaScript代码: < ...

  8. Win32中目录的操作

    1 系统和当前目录 1.1 获取Windows目录 UINT GetWindowsDirectory( LPTSTR lpBuffer, //BUFF的地址  UINT uSize    //BUFF ...

  9. 青云QingCloud业内率先支持云端全面透明代理功能 | SDNLAB | 专注网络创新技术

    青云QingCloud业内率先支持云端全面透明代理功能 | SDNLAB | 专注网络创新技术 青云QingCloud业内率先支持云端全面透明代理功能

  10. php环境下ckeditor和ckfinder的配置详解

    摘要:老牌编辑器FCK的升级版CKEditor(http://ckeditor.com/) 经过重写,提供了丰富而强大的集成和互动的API.新版编辑器是完全基于插件,它可以扩展所有部件以符合需求.FC ...