jQuery日期联动插件
此版本为网上的日期联动插件修改版,加入了修改后事件
/*
* 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日期联动插件的更多相关文章
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
- 贴近用户体验的jQuery日期选择插件
分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览 源码下载 var dateRange = new ...
- JQuery日期选择器插件date-input
JQuery日期选择器插件之date-input 官方网站:http://jonathanleighton.com/projects/date-input/ 下载地址: http://github.c ...
- Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定
一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...
- DCalendar增加月份选择功能--简单jQuery日期选择器插件改动
做时间插件的时候,很多都会遇到要做选择月份的插件,但是DCalendar提供的api只支持日期选择,最近遇到这个问题,所以调整了一下源码,话不多说,先看效果吧 点击日期插件,出现上图,再点击月份就直接 ...
- jquery 省市区联动插件
使用方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 提升用户体验的最佳免费 jQuery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- 提示用户体验的最佳免费 Jquery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...
随机推荐
- ARM920T系统总线时序分析
一.系统总线时序图 二.分析 第一个时钟周期开始,系统地址总线给出需要访问的存储空间地址. 经过Tacs时间后,片选信号也相应给出,并且锁存当前地址线上地址信息. 再经过Tcso时间后,处理器给出当前 ...
- Hdu 3177 Crixalis's Equipment
Crixalis's Equipment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- C#反射(一) 【转】
在还不太熟悉反射的昨天,以为反射很神秘,在网上到处找答案.今天找了段代码敲了一下,茅塞顿开!其实反射也就那么简单的一回事! 反射是一种机制,通过这种机制我们可以知道一个未知类型的类型信息.比如, ...
- ASP.NET(C#)常用数据加密和解密方法汇总
一. 数据加密的概念 1. 基本概念 2. 基本功能 3. 加密形式 二. 数据加密的项目应用和学习 1. 媒体加密:DRM 2. 文件加密:文本 ...
- [BZOJ 3196] 213平衡树 【线段树套set + 树状数组套线段树】
题目链接:BZOJ - 3196 题目分析 区间Kth和区间Rank用树状数组套线段树实现,区间前驱后继用线段树套set实现. 为了节省空间,需要离线,先离散化,这样需要的数组大小可以小一些,可以卡过 ...
- 演示:纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【转】关于 Endnote 与 Word 卡死问题 标记语法错误
转自:http://hi.baidu.com/lvneng/item/8147dcbb1436bfd085dd7962 当使用 Word 写论文或稿件时,Endnote 绝对是一个不错的帮手,不过偶尔 ...
- HDOJ 1716 排列2(next_permutation函数)
Problem Description Ray又对数字的列产生了兴趣: 现有四张卡片,用这四张卡片能排列出很多不同的4位数,要求按从小到大的顺序输出这些4位数. Input 每组数据占一行,代表四张卡 ...
- COM初体验
以前在我学校里培训过一段时间C++,我敬爱的吴老师略有提及.那个时候觉得COM遥不可及,觉得,哇塞好神圣.我觉得自己啥都没学好,我不应该这么早去涉及这片过于光荣的领地.既没有觉悟也没有动力去迎接这样一 ...
- 分布式系统里session同步的那些事儿
几周前,有个盆友问老王,说现在有多台服务器,怎么样来解决这些服务器间的session同步问题?老王一下就来精神了,因为在n年以前,老王还在学校和几个同学一起所谓创业的时候,也遇到了类似的问题.当时查了 ...