参考自：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));
时间： 2025-01-03 20:51:07