jquery全年日期选择器日历插件
2017-8-2更新
1)：新增setColors设置单元格颜色，param格式为{defaultColor:'#f00',dc:[{d:'2017-8-2',c:'blue'}..]}，dc数组c缺省会用defaultColor代替，defaultColor也缺省默认红色
2)将2016-9-28更新整合到yearScale配置里面，配置这个年份变为下拉框，格式如{min:2000,max:2020}
2016-9-28更新：如果需要年份选择可以下拉，修改如下源代码
return this.addClass('fullYearPicker').each(function () {.................});这部分替换为下面的
return this.addClass('fullYearPicker').each(function () { var me = $(this), year = config.year || new Date().getFullYear(), newConifg = { cellClick: config.cellClick, disabledDay: config.disabledDay, year: year, value: config.value }; me.data('config', newConifg); var selYear = '<select>', nYear = new Date().getFullYear(); //前后20年，更加多自己修改这个循环 for (var i = nYear - 20, j = nYear + 20; i < j; i++) selYear += '<option value="' + i + '"' + (i == year ? ' selected' : '') + '>' + i + '</option>'; selYear += '</select>'; me.append('<div class="year"><a href="#">上一年</a>' + selYear + '年<a href="#" class="next">下一年</a></div><div class="picker"></div>') .find('a').click(function (e, setYear) { if (setYear) year = me.data('config').year; else this.innerHTML == '上一年' ? year-- : year++; me.find('select').val(year); renderYear(year, $(this).closest('div.fullYearPicker'), newConifg.disabledDay, newConifg.value); this.parentNode.firstChild.nextSibling.data = year + '年'; return false; }).end().find('select').change(function () { me.fullYearPicker('setYear', this.value); }); renderYear(year, me, newConifg.disabledDay, newConifg.value); });
显示一年中的１２个月份的年选择器日历插件，效果如下
具体使用方法看源代码，有详细注释。
jquery年选择器日历插件源代码如下
<style>
.fullYearPicker,.fullYearPicker table{font-size:12px}
.fullYearPicker div.year{text-align:center}
.fullYearPicker div.year a{margin-right:30px}
.fullYearPicker div.year a.next{margin-right:0;margin-left:30px}
.fullYearPicker table{background:#888;margin-top:5px;float:left;margin-right:10px}
.fullYearPicker table.right{margin-right:0}
.fullYearPicker table th.head{text-align:center;line-height:13px;cursor:default;background:#fff}
.fullYearPicker table td{background:#fff;text-align:center;line-height:13px;cursor:pointer}
.fullYearPicker table th{background:#aaa;}
.fullYearPicker table td.weekend,.fullYearPicker table th.weekend{background:#ccc;color:blue;}
.fullYearPicker table td.disabled{color:#f00;text-decoration:line-through;cursor:not-allowed}
.fullYearPicker table td.selected{background:green;color:#fff}
.fullYearPicker table td.empty{text-decoration:none;cursor:default}
.fullYearPicker br{clear:both}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<div id="div1"></div>
<input type="button" value="获取日历当前选中值" />
<input type="button" value="更新日历值" />
<input type="button" value="设置为指定年份" />
<input type="button" value="设置为指定星期不可选" />
<input type="button" value="设置制定日期单元格背景色" />
<script>
(function () {
function tdClass(i, disabledDay, sameMonth, values, dateStr) {
var cls = i == 0 || i == 6 ? 'weekend' : '';
if (disabledDay && disabledDay.indexOf(i) != -1) cls += (cls ? ' ' : '') + 'disabled';
if (!sameMonth) cls += (cls ? ' ' : '') + 'empty';
if (sameMonth && values && cls.indexOf('disabled') == -1 && values.indexOf(',' + dateStr + ',') != -1) cls += (cls ? ' ' : '') + 'selected';
return cls == '' ? '' : ' class="' + cls + '"';
}
function renderMonth(year, month, clear, disabledDay, values) {
var d = new Date(year, month - 1, 1), s = '<table cellpadding="3" cellspacing="1" border="0"' + (clear ? ' class="right"' : '') + '>'
+ '<tr><th colspan="7" class="head">' + year + '年' + month + '月</th></tr>'
+ '<tr><th class="weekend">日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="weekend">六</th></tr>';
var dMonth = month - 1;
var firstDay = d.getDay(), hit = false;
s += '<tr>';
for (var i = 0; i < 7; i++)
if (firstDay == i || hit) {
s += '<td' + tdClass(i, disabledDay, true, values, year + '-' + month + '-' + d.getDate()) + '>' + d.getDate() + '</td>';
d.setDate(d.getDate() + 1);
hit = true;
} else s += '<td' + tdClass(i, disabledDay, false) + '> </td>';
s += '</tr>';
for (var i = 0; i < 5; i++) {
s += '<tr>';
for (var j = 0; j < 7; j++) {
s += '<td' + tdClass(j, disabledDay, d.getMonth() == dMonth, values, year + '-' + month + '-' + d.getDate()) + '>' + (d.getMonth() == dMonth ? d.getDate() : ' ') + '</td>';
d.setDate(d.getDate() + 1);
}
s += '</tr>';
}
return s + '</table>' + (clear ? '<br>' : '');
}
function getDateStr(td) { return td.parentNode.parentNode.rows[0].cells[0].innerHTML.replace(/[年月]/g, '-') + td.innerHTML }
function renderYear(year, el, disabledDay, value) {
el.find('td').unbind();
var s = '', values = ',' + value.join(',') + ',';
for (var i = 1; i <= 12; i++) s += renderMonth(year, i, i % 4 == 0, disabledDay, values);
el.find('div.picker').html(s).find('td').click(function () {
if (!/disabled|empty/g.test(this.className)) $(this).toggleClass('selected');
if (this.className.indexOf('empty') == -1 && typeof el.data('config').cellClick == 'function')
el.data('config').cellClick(getDateStr(this), this.className.indexOf('disabled') != -1);
});
}
//Power by Showbo,http://www.w3dev.cn/
//@config：配置，具体配置项目看下面
//@param：为方法时需要传递的参数
$.fn.fullYearPicker = function (config, param) {
if (config === 'setDisabledDay' || config === 'setYear' || config === 'getSelected' || config === 'acceptChange' || config === 'setColors') {//方法
var me = $(this);
if (config == 'setYear') {//重置年份
me.data('config').year = param;//更新缓存数据年份
me.find('div.year a:first').trigger('click', true);
}
else if (config == 'getSelected') {//获取当前当前年份选中的日期集合（注意不更新默认传入的值，要更新值请调用acceptChange方法）
return me.find('td.selected').map(function () { return getDateStr(this); }).get();
}
else if (config == 'acceptChange') {//更新日历值，这样才会保存选中的值，更换其他年份后，再切换到当前年份才会自动选中上一次选中的值
me.data('config').value = me.fullYearPicker('getSelected');
}
else if (config == 'setColors') {//设置单元格颜色 param格式为{defaultColor:'#f00',dc:[{d:'2017-8-2',c:'blue'}..]}，dc数组c缺省会用defaultColor代替，defaultColor也缺省默认红色
return me.find('td').each(function () {
var d = getDateStr(this);
for (var i = 0; i < param.dc.length; i++) if (d == param.dc[i].d) this.style.backgroundColor = param.dc[i].c || param.defaultColor || '#f00';
});
}
else {
me.find('td.disabled').removeClass('disabled');
me.data('config').disabledDay = param;//更新不可点击星期
if (param) {
me.find('table tr:gt(1)').find('td').each(function () {
if (param.indexOf(this.cellIndex) != -1)
this.className = (this.className || '').replace('selected', '') + (this.className ? ' ' : '') + 'disabled';
});
}
}
return this;
}
//@year:显示的年份
//@disabledDay:不允许选择的星期列，注意星期日是0，其他一样
//@cellClick:单元格点击事件（可缺省）。事件有2个参数，第一个@dateStr：日期字符串，格式“年-月-日”，第二个@isDisabled，此单元格是否允许点击
//@value:选中的值，注意为数组字符串，格式如['2016-6-25','2016-8-26'.......]
//@yearScale:配置这个年份变为下拉框，格式如{min:2000,max:2020}
config = $.extend({ year: new Date().getFullYear(), disabledDay: '', value: [] }, config);
return this.addClass('fullYearPicker').each(function () {
var me = $(this), year = config.year || new Date().getFullYear(),
newConifg = { cellClick: config.cellClick, disabledDay: config.disabledDay, year: year, value: config.value, yearScale: config.yearScale };
me.data('config', newConifg);
console.log(newConifg)
var selYear = '';
if (newConifg.yearScale) {
selYear = '<select>';
for (var i = newConifg.yearScale.min, j = newConifg.yearScale.max; i < j; i++) selYear += '<option value="' + i + '"' + (i == year ? ' selected' : '') + '>' + i + '</option>';
selYear += '</select>';
}
selYear = selYear || year;
me.append('<div class="year"><a href="#">上一年</a>' + selYear + '年<a href="#" class="next">下一年</a></div><div class="picker"></div>')
.find('a').click(function (e, setYear) {
if (setYear) year = me.data('config').year;
else this.innerHTML == '上一年' ? year-- : year++;
me.find('select').val(year);
renderYear(year, $(this).closest('div.fullYearPicker'), newConifg.disabledDay, newConifg.value);
this.parentNode.firstChild.nextSibling.data = year + '年';
return false;
}).end().find('select').change(function () {
me.fullYearPicker('setYear', this.value);
});
renderYear(year, me, newConifg.disabledDay, newConifg.value);
});
};
})();
//示例
$('#div1').fullYearPicker({
disabledDay: '0',
value: ['2016-6-25', '2016-8-26'],
yearScale: { min: 2000, max: 2020 },
cellClick: function (dateStr, isDisabled) {
console.log(arguments)
}
});
$('input').click(function () {
switch (this.value) {
case '获取日历当前选中值': alert($('#div1').fullYearPicker('getSelected')); break;
case '更新日历值': $('#div1').fullYearPicker('acceptChange'); alert('更新值成功，切换年份查看效果'); break;
case '设置为指定年份': var year = prompt('请输入4位年份数字'); if (/^\d{4}$/.test(year)) $('#div1').fullYearPicker('setYear', parseInt(year)); else alert('年份为4位数字！'); break;
case '设置为指定星期不可选': var day = prompt('请输入0~6的数字，不输入则设置所有星期可选'); if (/^[0-6]*$/.test(day)) $('#div1').fullYearPicker('setDisabledDay', day); else alert('请输入0~6的数字！'); break;
case '设置制定日期单元格背景色': $('#div1').fullYearPicker('setColors', { dc: [{d:'2017-9-1'},{ d: '2017-6-1', c: 'blue' }, { d: '2017-5-1', c: 'yellow' }, { d: '2017-8-1', c: 'green' }] });
}
});
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jquery全年日期选择器日历插件