日期组件--仿
Posted 落暮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了日期组件--仿相关的知识，希望对你有一定的参考价值。
参考自：https://github.com/ALiuNa/YTD
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src=‘../node_modules/jquery/dist/jquery.min.js‘></script> </head> <body> <div class="from-group "> <select class=‘public_year‘ data-date=‘{year:1920,month:5,date:1,maxAfter:2020,minBefore:1900,year_text:"年",month_text:"月",date_text:"日"}‘ name="" id=""></select> <select class=‘public_month‘ name="" id=""></select> <select class=‘public_date‘ name="" id=""></select> </div> <div class="from-group "> <select class=‘public_year‘ data-date=‘{year:1932,month:5,date:1,maxAfter:2080,minBefore:1930,year_text:"xxx年",month_text:"xxx月",date_text:"xxx日"}‘ name="" id=""></select> <select class=‘public_month‘ name="" id=""></select> <select class=‘public_date‘ name="" id=""></select> </div> <div class="from-group "> <select class=‘public_year‘ data-date=‘{year:1901,month:5,date:1,maxAfter:2080,minBefore:1900,year_text:"xxx年",month_text:"xxx月",date_text:"xxx日"}‘ name="" id=""></select> <select class=‘public_month‘ name="" id=""></select> <select class=‘public_date‘ name="" id=""></select> </div> <button id=‘aaa‘>11111</button> </body> <script src=‘index.js‘></script> <script> $(‘#aaa‘).on(‘click‘,function(){ var html=‘<div class="from-group "> <select class="public_year" name="" id=""></select> <select class="public_month" name="" id=""></select> <select class="public_date" name="" id=""></select> </div>‘; $(‘body‘).append(html); $.selectDate_zd_ready(); }) </script> </html>
(function($) { $.fn.selectDate_zd = function(call) { // $.fn.selectDate_zd /*参数规则说明 $domYear为默认的年组件select $domMonth为默认的月组件select $domDate 为默认的日组件select year 设置默认年，可为空 month 设置默认月,可为空 date 设置默认日，可为空 maxAfter 最多到今年后的哪一年+ minBefore 最多到哪一年- nowYear,nowMonth,nowDate分别代表当前年月日 year_text，month_text，date_text代表默認的年月日第一天默認值 例子： <select class=‘public_year‘ data-date=‘{year:1920,month:5,date:1,maxAfter:2020,minBefore:1900,year_text:"年",month_text:"月",date_text:"日"}‘ name="" id=""></select> <select class=‘public_month‘ name="" id=""></select> <select class=‘public_date‘ name="" id=""></select> 插件信息： author:jl, 參考自：https://github.com/ALiuNa/YTD /---------注意--------------/ 在外围后生成的元素需要更启用下 代码为： $.selectDate_zd_ready(); 例： $(‘#aaa‘).on(‘click‘,function(){ var html=‘<div><select class=‘public_year‘></select></div>‘; $(body).append(html); //启用 $.selectDate_zd_ready(); }) */ //默认参数 var $domYear = $(‘.‘ + call).find(‘.public_year‘), $domMonth = $(‘.‘ + call).find(‘.public_month‘), $domDate = $(‘.‘ + call).find(‘.public_date‘); if (!$domYear.length) return false; var defaults = { year: 0, month: 0, date: 0, maxAfter: new Date().getFullYear(), minBefore: 1948, year_text: "-请选择年份-", month_text: "-请选择月份-", date_text: "-请选择日期-" } $domYear.each(function(index, el) { opts = toObject($(this).data(‘date‘)); }); //如果有设置值则引用设置值否则默认 // var self={}; this.options = $.extend({}, defaults, opts); //声明公用变量名 var year = this.options.year, month = this.options.month, date = this.options.date, maxAfter = this.options.maxAfter, minBefore = this.options.minBefore, year_text = this.options.year_text, month_text = this.options.month_text, date_text = this.options.date_text, nowYear = new Date().getFullYear(), nowMonth = new Date().getMonth() + 1, nowDate = new Date().getDate(); $domYear.on(‘change‘, set_month); $domMonth.on(‘change‘, set_date); // 设置年 function set_year() { $domYear.empty(); $domYear.append("<option value=‘0‘>" + year_text + "</option>"); for (var i = maxAfter; i > minBefore; i--) { $domYear.append("<option value=‘" + i + "‘>" + i + "年</option>"); if (year === i) { $domYear.val(i); } } if ($domMonth.length) set_month($domYear.val()); } //設置月 function set_month() { $domMonth.empty(); if ($domYear.val() === 0) { $domMonth.val(0) } $domMonth.append("<option value=‘0‘>" + month_text + "</option>"); if ($domYear.val() > 0) { for (var i = 1; i < 13; i++) { $domMonth.append("<option value=‘" + i + "‘>" + i + "月</option>"); if (month === i) { $domMonth.val(i); } } } if ($domDate.length) set_date($domMonth.val()); } //設置日期 function set_date() { $domDate.empty(); if ($domMonth.val() === 0) { $domDate.val(0) } $domDate.append("<option value=‘0‘>" + date_text + "</option>"); if ($domYear.val() > 0 && $domMonth.val() > 0) { //獲取設置年月的時間,月份比當前月份少一，1代表月第一天，0就可以獲取上個月的最後一天 var settingData = new Date($domYear.val(), $domMonth.val(), 0), settingDate = settingData.getDate(); for (var i = 1; i <= parseInt(settingDate); i++) { $domDate.append("<option value=‘" + i + "‘>" + i + "日</option>"); if (date === i) { $domDate.val(i); } } } } //公用方法：将字符串转化为object对象 function toObject(a) { return (new Function(‘return ‘ + a))(); }; set_year(); } //作用域问题，生成父级class用来区分，所以一组select必须用一个父级包起来 jQuery.selectDate_zd_ready = function() { $(‘.public_year‘).each(function(i, e) { $(this).parent().addClass(‘selectRandom_‘ + i); $(document).selectDate_zd(‘selectRandom_‘ + i) }) } $.selectDate_zd_ready(); }(jQuery));
以上是关于日期组件--仿的主要内容，如果未能解决你的问题，请参考以下文章