function initDateboxtoDay(id) {
//console.log("调用了initDateboxtoDay方法,id为"+id)
var db = $('#' + id);
db.datebox({
onShowPanel: function () {
var p = db.datebox('panel');
p.find('.calendar-menu').hide();
p.find('.calendar-header').show();
},
parser: function (s) {
if (!s) return new Date();
var year = s.substring(0, 4);
var month = s.substring(5, 7);
var day = s.substring(8, 10);
return new Date(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
},
formatter: function (d) {
var currentMonth = d.getMonth() + 1;
var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
var currentDate = d.getDate();
var currentDateStr = currentDate < 10 ? ('0' + currentDate) : (currentDate + '');
return d.getFullYear() + '-' + currentMonthStr + '-' + currentDateStr;
}
});
var p = db.datebox('panel'); // 日期选择对象
var span = p.find('div.calendar-title span'); // 显示月份层的触发控件
// 检查是否已经存在确定按钮
if (p.find('.datebox-confirm-btn').length === 0) {
// 添加确定按钮
var btnContainer = $('<div class="datebox-button" style="width: 100%; display: flex;"></div>');
var btnTable = $('<table cellspacing="0" cellpadding="0" style="width:100%"></table>'); // 创建按钮表格
var btnRow = $('<tr></tr>'); // 创建按钮行
//var todayBtn = p.find('.datebox-button a:first-child').parent(); // 获取原有的 "今天" 按钮单元格
var todayBtnCell = p.find('.datebox-button td:first-child');
var closeBtnCell = p.find('.datebox-button td:last-child');
// 创建确定按钮单元格
var confirmBtn = $('<td style="width: 33.3%;"><a href="javascript:void(0)" class="datebox-confirm-btn">确定</a></td>');
confirmBtn.find('a').click(function (e) {
e.preventDefault();
// 在这里写处理确定按钮点击事件的逻辑
});
btnRow.append(todayBtnCell);
btnRow.append(closeBtnCell);
btnRow.append(confirmBtn);
btnTable.append(btnRow);
btnContainer.append(btnTable);
p.find('.datebox-button').replaceWith(btnContainer); // 替换原有的按钮容器为新的按钮容器
// 调整按钮宽度
todayBtnCell.css('width', '33.33%');
closeBtnCell.css('width', '33.33%');
confirmBtn.css('width', '33.33%');
}
}
function initDateboxtoMonth(id) {
//console.log("调用了initDateboxtoMonth方法,id为"+id)
var db = $('#' + id);
db.datebox({
onShowPanel : function() {// 显示日期选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
span.trigger('click'); // 触发click事件弹出月份层
setTimeout(function() {// 延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
// 动态调整宽度
if (p.find('div.calendar-menu-year-inner').innerWidth()<
(p.find('span.calendar-menu-prev').outerWidth()+
p.find('input.calendar-menu-year').outerWidth()+
p.find('span.calendar-menu-next').outerWidth())){
p.find('input.calendar-menu-year').outerWidth(
p.find('div.calendar-menu-year-inner').innerWidth()-(p.find('span.calendar-menu-prev').outerWidth(true)+p.find('span.calendar-menu-next').outerWidth(true)));
}
p.find('div.calendar-header').hide();
p.find('div.calendar-menu-month-inner').show(); // 显示月份选择
// 动态调整高度
p.find('div.calendar-menu-month-inner').outerHeight(p.find('div.calendar-menu').height()-p.find('div.calendar-menu-year-inner').outerHeight())
tds = p.find('div.calendar-menu-month-inner td');
tds.click(function(e) {
e.stopPropagation(); // 禁止冒泡执行easyui给月份绑定的事件
var year=/\d{4}/.exec(span.html())[0];//年份
var month=parseInt($(this).attr('abbr'), 10);//月份
if(month<10){
month="0"+month;
}
//可以自做调整
db.datebox('hidePanel')// 隐藏日期对象
.datebox('setValue', year + '-' + month); // 设置日期的值
});
}, 0);
},
//这个是必须要的，不然你会发现你的输入框一直是当天日期
parser: function (s) {
if (!s) return new Date();
//就可以用split了
var year = s.substring(0,4);
var month = s.substring(5,7);
return new Date(parseInt(year, 10), parseInt(month, 10) - 1, 1);
},
formatter: function (d) {
var currentMonth = (d.getMonth()+1);
var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
return d.getFullYear() + '-' + currentMonthStr;
}
});
var p = db.datebox('panel'); // 日期选择对象
var span = p.find('div.calendar-title span'); // 显示月份层的触发控件
// 检查是否已经存在确定按钮
if (p.find('.datebox-confirm-btn').length === 0) {
// 添加确定按钮
var btnContainer = $('<div class="datebox-button" style="width: 100%; display: flex;"></div>');
var btnTable = $('<table cellspacing="0" cellpadding="0" style="width:100%"></table>'); // 创建按钮表格
var btnRow = $('<tr></tr>'); // 创建按钮行
//var todayBtn = p.find('.datebox-button a:first-child').parent(); // 获取原有的 "今天" 按钮单元格
var todayBtnCell = p.find('.datebox-button td:first-child');
var closeBtnCell = p.find('.datebox-button td:last-child');
// 创建确定按钮单元格
var confirmBtn = $('<td style="width: 33.3%;"><a href="javascript:void(0)" class="datebox-confirm-btn">确定</a></td>');
confirmBtn.find('a').click(function (e) {
e.preventDefault();
// 在这里写处理确定按钮点击事件的逻辑
});
btnRow.append(todayBtnCell);
btnRow.append(closeBtnCell);
btnRow.append(confirmBtn);
btnTable.append(btnRow);
btnContainer.append(btnTable);
p.find('.datebox-button').replaceWith(btnContainer); // 替换原有的按钮容器为新的按钮容器
// 调整按钮宽度
todayBtnCell.css('width', '33.33%');
closeBtnCell.css('width', '33.33%');
confirmBtn.css('width', '33.33%');
}
}
function initDateboxtoYear(id) {
//console.log("调用了initDateboxtoYear方法,id为"+id)
var db = $('#' + id);
db.datebox({
onShowPanel: function () {
span.trigger('click'); // 触发click事件弹出年份层
setTimeout(function () {
// 动态调整宽度
if (p.find('div.calendar-menu-year-inner').innerWidth()<
(p.find('span.calendar-menu-prev').outerWidth()+
p.find('input.calendar-menu-year').outerWidth()+
p.find('span.calendar-menu-next').outerWidth())){
p.find('input.calendar-menu-year').outerWidth(
p.find('div.calendar-menu-year-inner').innerWidth()-(p.find('span.calendar-menu-prev').outerWidth(true)+p.find('span.calendar-menu-next').outerWidth(true)));
}
p.find('div.calendar-header').hide();
p.find('div.calendar-menu-month-inner').hide(); // 隐藏月份选择
// 动态调整高度
//p.find('div.datebox-calendar-inner').height(p.find('div.calendar-menu-year-inner').outerHeight()+5)
var tds = p.find('div.calendar-menu-year-inner td'); // 获取年份选择元素
tds.unbind('click').bind('click', function (e) { // 重新绑定点击事件
e.stopPropagation();
var year = $(this).html(); // 获取点击的年份
db.datebox('hidePanel').datebox('setValue', year); // 设置日期的值为年份
//initDateboxtoMonth(id); // Update mode to select months
});
}, 0);
},
parser: function (s) {
if (!s) return new Date();
var year = s.substring(0, 4);
return new Date(parseInt(year, 10), 0, 1); // 只解析年份
},
formatter: function (d) {
return d.getFullYear().toString(); // 只显示年份
}
});
var p = db.datebox('panel');
var span = p.find('div.calendar-title span');
// 检查是否已经存在确定按钮
if (p.find('.datebox-confirm-btn').length === 0) {
// 添加确定按钮
var btnContainer = $('<div class="datebox-button" style="width: 100%; display: flex;"></div>');
var btnTable = $('<table cellspacing="0" cellpadding="0" style="width:100%"></table>'); // 创建按钮表格
var btnRow = $('<tr></tr>'); // 创建按钮行
//var todayBtn = p.find('.datebox-button a:first-child').parent(); // 获取原有的 "今天" 按钮单元格
var todayBtnCell = p.find('.datebox-button td:first-child');
var closeBtnCell = p.find('.datebox-button td:last-child');
// 创建确定按钮单元格
var confirmBtn = $('<td style="width: 33.3%;"><a href="javascript:void(0)" class="datebox-confirm-btn">确定</a></td>');
confirmBtn.find('a').click(function (e) {
e.preventDefault();
// 在这里写处理确定按钮点击事件的逻辑
var selectedYear = '';
var yearInput = p.find('div.calendar-menu-year-inner input.calendar-menu-year'); // 获取年份输入框元素
selectedYear = yearInput.val(); // 获取输入框中的年份值
if (selectedYear !== '') {
db.datebox('hidePanel').datebox('setValue', selectedYear); // 设置日期的值为选中的年份
}
});
btnRow.append(todayBtnCell);
btnRow.append(closeBtnCell);
btnRow.append(confirmBtn);
btnTable.append(btnRow);
btnContainer.append(btnTable);
p.find('.datebox-button').replaceWith(btnContainer); // 替换原有的按钮容器为新的按钮容器
// 调整按钮宽度
todayBtnCell.css('width', '33.33%');
closeBtnCell.css('width', '33.33%');
confirmBtn.css('width', '33.33%');
}else {
confirmBtn = p.find('.datebox-confirm-btn'); // 获取确定按钮元素
confirmBtn.unbind('click').click(function (e) {
e.preventDefault();
var selectedYear = '';
var yearInput = p.find('div.calendar-menu-year-inner input.calendar-menu-year'); // 获取年份输入框元素
selectedYear = yearInput.val(); // 获取输入框中的年份值
if (selectedYear !== '') {
db.datebox('hidePanel').datebox('setValue', selectedYear); // 设置日期的值为选中的年份
}
});
}
}
博客涉及前端开发，重点提及JavaScript和EasyUI。JavaScript是常用开发语言，EasyUI在前端开发中有应用，二者结合可助力前端项目开发。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
