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

/*
* 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. spoj gss2 : Can you answer these queries II 离线&&线段树

    1557. Can you answer these queries II Problem code: GSS2 Being a completist and a simplist, kid Yang ...

  2. In machine learning, is more data always better than better algorithms?

    In machine learning, is more data always better than better algorithms? No. There are times when mor ...

  3. 自己总结的一些android公共库

    本文主要介绍自己在android开发中总结的一些公共库,目前包括下拉刷新ListView.可以响应各个方向CompoundDrawables点击操作的TextView.图片缓存,不断更新,欢迎交流 ? ...

  4. MVC自学系列之三(MVC视图-Views)

    View的约定 1.根据约定,Views目录下包含着每一个与Controller同名但是没有像Controller后缀的文件夹:因此对于控制器HomeController就对应在views目录下有个目 ...

  5. 从零开始制作jffs2文件系统

    JFFS2 是一个开放源码的项目(www.infradead.org). 它是在闪存上使用非常广泛的读/写文件系统,在嵌入式系统中被普遍的应用. 1.       安装mkfs工具 MTD主页:htt ...

  6. BLE开发的各种坑

    这段时间在做低功耗蓝牙(BLE)应用的开发(并不涉及蓝牙协议栈).总体感觉 Android BLE 还是不太稳定,开发起来也是各种痛苦.这里记录一些杂项和开发中遇到的问题及其解决方法,避免大家踩坑.本 ...

  7. Java 语言中 Enum 类型的使用介绍

    Enum 类型的介绍 枚举类型(Enumerated Type) 很早就出现在编程语言中,它被用来将一组类似的值包含到一种类型当中.而这种枚举类型的名称则会被定义成独一无二的类型描述符,在这一点上和常 ...

  8. 串口传输文件 lrzsz

    假设有一种开发环境,一块板子,除了串口,没有任何外部出入输出设备,没有sd卡,没有网线,这个时候如果你想跟这块板子传输交互文件,要怎么办? 根据modem所采用的文件传输协议:xmodem,ymode ...

  9. 成为Web开发人员的7个简单步骤

    你想成为一名 Web 开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验.你上了一些课程,也花了时间在个人编码项目上,但是你的简历上关于“经验”的部分仍然不为企业承认.过渡到一个 ...

  10. 常用myeclipse的快捷键,对菜鸟超有用的

    1. ctrl + h ,这个键超有用的,可以搜索当前项目的整个文件,并锁定到改文件的 具体位置.如图: 2.ctrl + o,在java文件内,搜索该文件下的所有方法.如图: ctrl + d ,删 ...