function initDateboxtoDay(id) {
//console.log("The initDateboxtoDay method was called, the id is " + 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'); // Date selection object
var span = p.find('div.calendar-title span'); // Display the trigger control of the month layer
// Check if OK button already exists
if (p.find('.datebox-confirm-btn').length === 0) {
//Add OK button
var btnContainer = $('<div class="datebox-button" style="width: 100%; display: flex;"></div>');
var btnTable = $('<table cellspacing="0" cellpadding="0" style="width:100%"></table>'); // Create button table
var btnRow = $('<tr></tr>'); // Create button row
//var todayBtn = p.find('.datebox-button a:first-child').parent(); // Get the original "Today" button cell
var todayBtnCell = p.find('.datebox-button td:first-child');
var closeBtnCell = p.find('.datebox-button td:last-child');
//Create OK button cell
var confirmBtn = $('<td style="width: 33.3%;"><a href="javascript:void(0)" class="datebox-confirm-btn">Confirm</a></td>' );
confirmBtn.find('a').click(function (e) {
e.preventDefault();
//Write here the logic to handle the OK button click event
});
btnRow.append(todayBtnCell);
btnRow.append(closeBtnCell);
btnRow.append(confirmBtn);
btnTable.append(btnRow);
btnContainer.append(btnTable);
p.find('.datebox-button').replaceWith(btnContainer); // Replace the original button container with the new button container
\t
//Adjust button width
todayBtnCell.css('width', '33.33%');
closeBtnCell.css('width', '33.33%');
confirmBtn.css('width', '33.33%');
}
}
function initDateboxtoMonth(id) {
//console.log("The initDateboxtoMonth method was called, the id is " + id)
var db = $('#' + id);
db.datebox({
onShowPanel: function() {// After displaying the date selection object, the event of popping up the month layer is triggered. The month layer is not generated during initialization.
span.trigger('click'); // Trigger click event to pop up the month layer
setTimeout(function() {//Delayed triggering to obtain the month object, because there is a time interval between the above event triggering and the object generation
// Dynamically adjust width
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(); // Display month selection
// Dynamically adjust height
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(); // Disable bubbling and executing events bound by easyui to the month
var year=/\d{4}/.exec(span.html())[0];//Year
var month=parseInt($(this).attr('abbr'), 10);//month
if(month<10){
month="0" + month;
}
//You can make your own adjustments
db.datebox('hidePanel')//Hide date object
.datebox('setValue', year + '-' + month); // Set the date value
});
}, 0);
},
//This is necessary, otherwise you will find that your input box is always the current day's date
parser: function (s) {
if (!s) return new Date();
//You can use 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'); // Date selection object
var span = p.find('div.calendar-title span'); // Display the trigger control of the month layer
// Check if OK button already exists
if (p.find('.datebox-confirm-btn').length === 0) {
//Add OK button
var btnContainer = $('<div class="datebox-button" style="width: 100%; display: flex;"></div>');
var btnTable = $('<table cellspacing="0" cellpadding="0" style="width:100%"></table>'); // Create button table
var btnRow = $('<tr></tr>'); // Create button row
//var todayBtn = p.find('.datebox-button a:first-child').parent(); // Get the original "Today" button cell
var todayBtnCell = p.find('.datebox-button td:first-child');
var closeBtnCell = p.find('.datebox-button td:last-child');
//Create OK button cell
var confirmBtn = $('<td style="width: 33.3%;"><a href="javascript:void(0)" class="datebox-confirm-btn">Confirm</a></td>' );
confirmBtn.find('a').click(function (e) {
e.preventDefault();
//Write here the logic to handle the OK button click event
});
btnRow.append(todayBtnCell);
btnRow.append(closeBtnCell);
btnRow.append(confirmBtn);
btnTable.append(btnRow);
btnContainer.append(btnTable);
p.find('.datebox-button').replaceWith(btnContainer); // Replace the original button container with the new button container
\t
//Adjust button width
todayBtnCell.css('width', '33.33%');
closeBtnCell.css('width', '33.33%');
confirmBtn.css('width', '33.33%');
}
}
function initDateboxtoYear(id) {
//console.log("The initDateboxtoYear method was called, the id is " + id)
var db = $('#' + id);
db.datebox({
onShowPanel: function () {
span.trigger('click'); // Trigger the click event to pop up the year layer
setTimeout(function () {
// Dynamically adjust width
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(); // Hide month selection
// Dynamically adjust height
//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'); // Get the year selection element
tds.unbind('click').bind('click', function (e) { // Rebind click event
e.stopPropagation();
var year = $(this).html(); // Get the clicked year
db.datebox('hidePanel').datebox('setValue', year); // Set the date value to the 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); // Only parse the year
},
formatter: function (d) {
return d.getFullYear().toString(); // Only display the year
}
});
var p = db.datebox('panel');
var span = p.find('div.calendar-title span');
// Check if OK button already exists
if (p.find('.datebox-confirm-btn').length === 0) {
//Add OK button
var btnContainer = $('<div class="datebox-button" style="width: 100%; display: flex;"></div>');
var btnTable = $('<table cellspacing="0" cellpadding="0" style="width:100%"></table>'); // Create button table
var btnRow = $('<tr></tr>'); // Create button row
//var todayBtn = p.find('.datebox-button a:first-child').parent(); // Get the original "Today" button cell
var todayBtnCell = p.find('.datebox-button td:first-child');
var closeBtnCell = p.find('.datebox-button td:last-child');
//Create OK button cell
var confirmBtn = $('<td style="width: 33.3%;"><a href="javascript:void(0)" class="datebox-confirm-btn">Confirm</a></td>' );
confirmBtn.find('a').click(function (e) {
e.preventDefault();
//Write here the logic to handle the OK button click event
var selectedYear = '';
var yearInput = p.find('div.calendar-menu-year-inner input.calendar-menu-year'); // Get the year input box element
selectedYear = yearInput.val(); // Get the year value in the input box
if (selectedYear !== '') {
db.datebox('hidePanel').datebox('setValue', selectedYear); // Set the date value to the selected year
}
});
btnRow.append(todayBtnCell);
btnRow.append(closeBtnCell);
btnRow.append(confirmBtn);
btnTable.append(btnRow);
btnContainer.append(btnTable);
p.find('.datebox-button').replaceWith(btnContainer); // Replace the original button container with the new button container
\t
//Adjust button width
todayBtnCell.css('width', '33.33%');
closeBtnCell.css('width', '33.33%');
confirmBtn.css('width', '33.33%');
}else {
confirmBtn = p.find('.datebox-confirm-btn'); // Get the OK button element
confirmBtn.unbind('click').click(function (e) {
e.preventDefault();
var selectedYear = '';
var yearInput = p.find('div.calendar-menu-year-inner input.calendar-menu-year'); // Get the year input box element
selectedYear = yearInput.val(); // Get the year value in the input box
if (selectedYear !== '') {
db.datebox('hidePanel').datebox('setValue', selectedYear); // Set the date value to the selected year
}
});
}
}
