年月日日历选择组件
功能：年月日日历选择插件，可指定显示日期。
目的：仅为项目需要，所以封装为一个组件，同时也作为对工作的日常记录，用以以后复用。
1.html简单代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>年月日插件</title> </head> <body> <div class="ymdCalendar"> <select class="year" name="year"></select> <select class="month" name="month"></select> <select class="day" name="day"></select> </div> </body> </html>
2.以下为jquery完整代码：
<script> /** *@file 年月日选择插件 *@author Zhou *@time 2016/10/31 */ ;(function($){ $.fn.ymdCalendar = function (options) { var defaults = { Yclass: '.year', // 默认年份选择器 Mclass: '.month',// 默认月份选择器 Dclass: '.day', // 默认日选择器 Year: '', // 默认年 Month: '', // 默认月 Day: '' // 默认日 }; var opts = $.extend({}, defaults, options); var DateTime = new Date(); var nowY = opts.Year || DateTime.getFullYear(); var nowM = opts.Month || DateTime.getMonth()+1; var nowD = opts.Day || DateTime.getDate(); var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; return this.each(function(){ // 年月日选择器 var Y = $(this).find(opts.Yclass); var M = $(this).find(opts.Mclass); var D = $(this).find(opts.Dclass); // 默认选中当天 if (isRun(nowY)) days[1] = 29; Y.html(tcFn(nowY-30, nowY+30, nowY));// 设置年份,前后30年 M.html(tcFn(1, 12, nowM));// 设置月份 D.html(tcFn(1, days[nowM-1], nowD));// 设置天 // 年份改变日期改变 Y.change(function(){ isRun($(this).val()) ? days[1] = 29 : days[1] = 28; console.log(days) D.html(tcFn(1, days[M.val()-1], $(this).val())); }) // 月份改变日期改变 M.change(function(){ isRun(Y.val()) ? days[1] = 29 : days[1] = 28; D.html(tcFn(1, days[M.val()-1], Y.val())); }) }) // 填充函数 function tcFn(startTime, endTime, date) { var html = ''; var a =''; for (var i = startTime; i <= endTime; i++) { if(i == date){ a = '<option value="' + i + '" selected="selected">' + i + '</option>'; } else { a = '<option value="' + i + '">' + i + '</option>'; } html += a; } return html; } // 判断是否闰年 function isRun(year){ return(year%4 == 0 && (year%100 != 0 || year%400 == 0)); } }; })(jQuery) $(function () { $('.ymdCalendar').ymdCalendar();// 实例组件 $('#ymdCalendar').ymdCalendar({// 设置显示日期 Year: 2007, Month: 8, Day: 8 }); }) </script>
若有幸被您看到，并发现有问题，可留言，楼主看到尽快修改。
3.更新2016-11-07
由于项目需要，该些时间必须在指定范围内可选则，比如从过去10个月至今日，这个时间点才可选择，因此优化为下（一下为完整代码）：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>年月日插件</title> </head> <body> <div class="ymdCalendar1"> <select class="year" name="year"></select> <select class="month" name="month"></select> <select class="day" name="day"></select> </div> <div class="ymdCalendar2"> <select class="year" name="year"></select> <select class="month" name="month"></select> <select class="day" name="day"></select> </div> <div class="ymdCalendar3"> <select class="year" name="year"></select> <select class="month" name="month"></select> <select class="day" name="day"></select> </div> <!--<div class="ymdCalendar" id="ymdCalendar"> <select class="year" name="year"></select> <select class="month" name="month"></select> <select class="day" name="day"></select> </div>--> <script src="http://www.qbaobei.com/Public/Home/qbaobei3/js/jquery.js"></script> <script> /** *@file 年月日选择插件 *@author Zhou *@time 2016/11/07 */ ;(function($){ $.fn.ymdCalendar = function (options) { var defaults = { Yclass: '.year', // 默认年份选择器 Mclass: '.month',// 默认月份选择器 Dclass: '.day', // 默认日选择器 Year: '', // 默认年 Month: '', // 默认月 Day: '', // 默认日 beforeTime: 0 // 从当天开始之前时长（以月为单位） }; var opts = $.extend({}, defaults, options); var DateTime = new Date(); var nowY = opts.Year || DateTime.getFullYear(); var nowM = opts.Month || DateTime.getMonth()+1; var nowD = opts.Day || DateTime.getDate(); var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var lastYear = 5 , lastMonth = 1 , finaMonth = 12; if (opts.beforeTime != 0) { DateTime.setMonth(nowM - opts.beforeTime); // 分别为2个月，分别为10个月，分别为65个月 var beforeYeaar = DateTime.getFullYear();// 开始年份 var beforeMonth = DateTime.getMonth();// 开始月份 console.log(beforeYeaar) if (nowY == beforeYeaar) { lastYear = 0; lastMonth = beforeMonth finaMonth = nowM; } else { lastYear = nowY - beforeYeaar; } } return this.each(function(){ // 年月日选择器 var Y = $(this).find(opts.Yclass); var M = $(this).find(opts.Mclass); var D = $(this).find(opts.Dclass); // 默认选中当天 if (isRun(nowY)) days[1] = 29; Y.html(tcFn(nowY-lastYear, nowY, nowY));// 设置年份,前后30年 M.html(tcFn(lastMonth, finaMonth, nowM));// 设置月份 D.html(tcFn(1, days[nowM-1], nowD));// 设置天 // 年份改变日期改变 Y.change(function(){ isRun($(this).val()) ? days[1] = 29 : days[1] = 28; D.html(tcFn(1, days[M.val()-1], $(this).val())); }) // 月份改变日期改变 M.change(function(){ isRun(Y.val()) ? days[1] = 29 : days[1] = 28; D.html(tcFn(1, days[M.val()-1], Y.val())); }) }) // 填充函数 function tcFn(startTime, endTime, date) { var html = ''; var a =''; for (var i = startTime; i <= endTime; i++) { if(i == date){ a = '<option value="' + i + '" selected="selected">' + i + '</option>'; } else { a = '<option value="' + i + '">' + i + '</option>'; } html += a; } return html; } // 判断是否闰年 function isRun(year){ return(year%4 == 0 && (year%100 != 0 || year%400 == 0)); } }; })(jQuery) $(function () { $('.ymdCalendar1').ymdCalendar({ beforeTime: 2 });// 实例组件 $('.ymdCalendar2').ymdCalendar({ beforeTime: 10 });// 实例组件 $('.ymdCalendar3').ymdCalendar({ beforeTime: 65 });// 实例组件 // $('#ymdCalendar').ymdCalendar({// 设置显示日期 // Year: 2007, // Month: 8, // Day: 8 // }); }) </script> </body> </html>
