jQuery(document).ready(function () {
const datePickerBtn = jQuery('.js-date-range-picker-btn');
const datePickerElement = jQuery('.js-date-range-picker-input');
const datePickerForm = jQuery('.js-date-range-picker-form');
const datePickerField = jQuery('.wps-js-calendar-field');
const wpTimezone = wps_js.isset(wps_js.global, 'options', 'wp_timezone') ? wps_js.global['options']['wp_timezone'] : null;
let validTimezone = wpTimezone;
// Update the week start day based on WordPress setting
if (datePickerBtn.length) {
moment.updateLocale('en', {
week: {
dow: parseInt(wps_js._('start_of_week'))
}
});
}
function phpToMomentFormat(phpFormat) {
const formatMap = {
'd': 'DD',
'j': 'D',
'S': 'Do',
'n': 'M',
'm': 'MM',
'F': 'MMMM',
'M': 'MMM',
'y': 'YY',
'Y': 'YYYY'
};
return phpFormat.replace(/([a-zA-Z])/g, (match) => formatMap[match] || match);
}
function normalizeDate(date, timezone) {
if (!date) return null;
let normalizedDate;
if (timezone && (timezone.startsWith('UTC') || timezone.startsWith('+') || timezone.startsWith('-'))) {
const offset = timezone.startsWith('UTC') ? timezone.replace('UTC', '') : timezone;
normalizedDate = moment(date).utcOffset(offset);
} else if (moment.tz.zone(timezone)) {
normalizedDate = moment(date).tz(timezone);
} else {
normalizedDate = moment(date).utc();
}
return normalizedDate.clone().startOf('day');
}
if (datePickerBtn.length && datePickerElement.length && datePickerForm.length) {
datePickerBtn.on('click', function () {
datePickerElement.trigger('click');
});
if (wpTimezone && (wpTimezone.startsWith('+') || wpTimezone.startsWith('-'))) {
validTimezone = `UTC${wpTimezone}`;
} else if (!moment.tz.zone(validTimezone)) {
validTimezone = 'UTC'; // Fallback to UTC if the timezone is invalid
}
function getLocalTime() {
if (validTimezone) {
if (validTimezone.startsWith('UTC') || validTimezone.startsWith('+') || validTimezone.startsWith('-')) {
const offset = validTimezone.startsWith('UTC') ? validTimezone.replace('UTC', '') : validTimezone;
return moment().utcOffset(offset);
} else if (moment.tz.zone(validTimezone)) {
return moment().tz(validTimezone);
}
}
return moment();
}
const localTime = getLocalTime();
// Define ranges with translated labels as keys
let ranges = {
[wps_js._('str_today')]: [
normalizeDate(localTime.clone(), validTimezone),
normalizeDate(localTime.clone(), validTimezone)
],
[wps_js._('str_yesterday')]: [
normalizeDate(localTime.clone().subtract(1, 'days'), validTimezone),
normalizeDate(localTime.clone().subtract(1, 'days'), validTimezone)
],
[wps_js._('str_this_week')]: [
normalizeDate(localTime.clone().startOf('week'), validTimezone),
normalizeDate(localTime.clone().endOf('week'), validTimezone)
],
[wps_js._('str_last_week')]: [
normalizeDate(localTime.clone().subtract(1, 'week').startOf('week'), validTimezone),
normalizeDate(localTime.clone().subtract(1, 'week').endOf('week'), validTimezone)
],
[wps_js._('str_this_month')]: [
normalizeDate(localTime.clone().startOf('month'), validTimezone),
normalizeDate(localTime.clone().endOf('month'), validTimezone)
],
[wps_js._('str_last_month')]: [
normalizeDate(localTime.clone().subtract(1, 'month').startOf('month'), validTimezone),
normalizeDate(localTime.clone().subtract(1, 'month').endOf('month'), validTimezone)
],
[wps_js._('str_7days')]: [
normalizeDate(localTime.clone().subtract(6, 'days'), validTimezone),
normalizeDate(localTime.clone(), validTimezone)
],
[wps_js._('str_28days')]:[
normalizeDate(localTime.clone().subtract(27, 'days'), validTimezone),
normalizeDate(localTime.clone(), validTimezone)
],
[wps_js._('str_30days')]: [
normalizeDate(localTime.clone().subtract(29, 'days'), validTimezone),
normalizeDate(localTime.clone(), validTimezone)
],
[wps_js._('str_90days')]: [
normalizeDate(localTime.clone().subtract(89, 'days'), validTimezone),
normalizeDate(localTime.clone(), validTimezone)
],
[wps_js._('str_6months')]: [
normalizeDate(localTime.clone().subtract(6, 'months'), validTimezone),
normalizeDate(localTime.clone(), validTimezone)
],
[wps_js._('str_year')]: [
normalizeDate(localTime.clone().startOf('year'), validTimezone),
normalizeDate(localTime.clone().endOf('year'), validTimezone)
]
};
function hasTypeParameter() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('post_id');
}
if (datePickerBtn.hasClass('js-date-range-picker-all-time')) {
let post_date = moment(0);
if (hasTypeParameter()) {
post_date = wps_js.global.post_creation_date ?
normalizeDate(moment(wps_js.global.post_creation_date), validTimezone) :
normalizeDate(moment(0), validTimezone);
} else {
post_date = wps_js.global.initial_post_date ?
normalizeDate(moment(wps_js.global.initial_post_date), validTimezone) :
normalizeDate(moment(0), validTimezone);
}
ranges[wps_js._('all_time')] = [
post_date,
normalizeDate(moment(), validTimezone)
];
}
const phpDateFormat = datePickerBtn.attr('data-date-format') ? datePickerBtn.attr('data-date-format') : 'MM/DD/YYYY';
const createDate = datePickerBtn.attr('data-date-create') ? datePickerBtn.attr('data-date-create') : null;
let momentDateFormat = phpToMomentFormat(phpDateFormat);
const DATE_FORMAT = 'YYYY-MM-DD';
// Default dates for the date picker
let defaultStartDate = moment(wps_js.global.user_date_range.from).format(DATE_FORMAT);
let defaultEndDate = moment(wps_js.global.user_date_range.to).format(DATE_FORMAT);
let minDate = null;
if (createDate) {
const parsedDate = moment(createDate, [momentDateFormat, 'YYYY-MM-DD', 'YYYY/MM/DD', 'YYYY-MM-DD HH:mm:ss'], true);
if (parsedDate.isValid()) {
minDate = parsedDate.clone().startOf('day');
if (moment(defaultStartDate).isBefore(minDate)) {
defaultStartDate = minDate.format(DATE_FORMAT);
}
}
}
if (datePickerBtn.length && datePickerElement.length && datePickerForm.length && !datePickerElement.data('daterangepicker')) {
const datePickerOptions = {
"autoApply": true,
"ranges": ranges,
"locale": {
"customRangeLabel": wps_js._('custom_range')
},
startDate: defaultStartDate,
endDate: defaultEndDate,
isInvalidDate: function (date) {
if (!minDate) return false;
const normalizedDate = normalizeDate(date, validTimezone);
const normalizedMinDate = normalizeDate(minDate, validTimezone);
return normalizedDate.isBefore(normalizedMinDate);
}
};
if (minDate) {
datePickerOptions.minDate = minDate;
}
datePickerElement.daterangepicker(datePickerOptions);
// Hide ranges before createDate
if (minDate) {
const picker = datePickerElement.data('daterangepicker');
const rangeList = picker.container.find('.ranges li');
const normalizedMinDate = moment(minDate).utcOffset(validTimezone, true).startOf('day');
rangeList.each(function() {
const rangeText = $(this).text();
const range = ranges[rangeText];
if (range) {
const rangeStart = moment(range[0]).utcOffset(validTimezone, true).startOf('day');
if (rangeStart.isBefore(normalizedMinDate)) {
$(this).hide();
}
}
});
}
}
if (wps_js.isset(wps_js.global, 'request_params', 'from') && wps_js.isset(wps_js.global, 'request_params', 'to')) {
let requestFromDate = wps_js.global.request_params.from;
if (hasTypeParameter() && requestFromDate && wps_js.global.post_creation_date) {
const postCreationDate = new Date(wps_js.global.post_creation_date);
const fromDate = new Date(requestFromDate);
const fromDateWithoutTime = new Date(fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate());
if (fromDateWithoutTime < postCreationDate) {
// Check if requestFromDate is not within any of the predefined ranges
let isInRange = false;
for (const rangeKey in ranges) {
const range = ranges[rangeKey];
const rangeStart = new Date(range[0]);
const rangeEnd = new Date(range[1]);
const rangeStartWithoutTime = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate());
const rangeEndWithoutTime = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth(), rangeEnd.getDate());
if (fromDateWithoutTime >= rangeStartWithoutTime && fromDateWithoutTime <= rangeEndWithoutTime) {
isInRange = true;
break;
}
}
// If requestFromDate is not in any range, update it to post_creation_date
if (!isInRange) {
requestFromDate = wps_js.global.post_creation_date;
}
}
}
const requestToDate = wps_js.global.request_params.to;
datePickerElement.data('daterangepicker').setStartDate(moment(requestFromDate).format('MM/DD/YYYY'));
datePickerElement.data('daterangepicker').setEndDate(moment(requestToDate).format('MM/DD/YYYY'));
datePickerElement.data('daterangepicker').updateCalendars();
const activeText = datePickerElement.data('daterangepicker').chosenLabel;
const startMoment = moment(requestFromDate).utcOffset(validTimezone, true);
const endMoment = moment(requestToDate).utcOffset(validTimezone, true);
let activeRangeText;
if (startMoment.year() === endMoment.year()) {
const startDateFormat = momentDateFormat.replace(/,?\s?(YYYY|YY)[-/\s]?,?|[-/\s]?(YYYY|YY)[-/\s]?,?/g, "");
activeRangeText = `${startMoment.format(startDateFormat)} - ${endMoment.format(momentDateFormat)}`;
} else {
activeRangeText = `${startMoment.format(momentDateFormat)} - ${endMoment.format(momentDateFormat)}`;
}
if (activeText !== 'Custom Range') {
if (activeText !== 'All time') {
activeRangeText = `<span class="wps-date-range">${activeText}</span>${activeRangeText}`;
document.querySelector('.js-date-range-picker-btn').classList.add('custom-range')
} else {
activeRangeText = activeText
}
}
datePickerBtn.find('span').html(activeRangeText);
} else {
const defaultStartMoment = moment(defaultStartDate).utcOffset(validTimezone, true);
const defaultEndMoment = moment(defaultEndDate).utcOffset(validTimezone, true);
datePickerElement.data('daterangepicker').setStartDate(moment(defaultStartDate).format('MM/DD/YYYY'));
datePickerElement.data('daterangepicker').setEndDate(moment(defaultEndDate).format('MM/DD/YYYY'));
datePickerElement.data('daterangepicker').updateCalendars();
let defaultActiveRangeText;
if (defaultStartMoment.year() === defaultEndMoment.year()) {
const startDateFormat = momentDateFormat.replace(/,?\s?(YYYY|YY)[-/\s]?,?|[-/\s]?(YYYY|YY)[-/\s]?,?/g, "");
defaultActiveRangeText = `${defaultStartMoment.format(startDateFormat)} - ${defaultEndMoment.format(momentDateFormat)}`;
} else {
defaultActiveRangeText = `${defaultStartMoment.format(momentDateFormat)} - ${defaultEndMoment.format(momentDateFormat)}`;
}
const defaultRange = datePickerElement.data('daterangepicker').container.find('.ranges li.active').text();
datePickerElement.data('daterangepicker').container.find('.ranges li.active').removeClass('active');
datePickerElement.data('daterangepicker').container.find('.ranges li[data-range-key="' + defaultRange + '"]').addClass('active');
if (defaultRange !== 'Custom Range') {
if (defaultRange !== 'All time') {
defaultActiveRangeText = `<span class="wps-date-range">${defaultRange}</span>${defaultActiveRangeText}`;
document.querySelector('.js-date-range-picker-btn').classList.add('custom-range')
} else {
defaultActiveRangeText = defaultActiveRangeText
}
}
datePickerBtn.find('span').html(defaultActiveRangeText);
datePickerElement.on('show.daterangepicker', function (ev, picker) {
datePickerElement.data('daterangepicker').container.find('.ranges li.active').removeClass('active');
datePickerElement.data('daterangepicker').container.find('.ranges li[data-range-key="' + defaultRange + '"]').addClass('active');
});
}
datePickerElement.on('show.daterangepicker', function (ev, picker) {
const correspondingPicker = picker.container;
jQuery(correspondingPicker).addClass(ev.target.className);
});
datePickerElement.on('apply.daterangepicker', function (ev, picker) {
const inputFrom = datePickerForm.find('.js-date-range-picker-input-from').first();
const inputTo = datePickerForm.find('.js-date-range-picker-input-to').first();
// Get the dates in the target timezone
const startDate = picker.startDate.clone().startOf('day').format('YYYY-MM-DD');
const endDate = picker.endDate.clone().startOf('day').format('YYYY-MM-DD');
inputFrom.val(startDate);
inputTo.val(endDate);
const selectedRange = datePickerElement.data('daterangepicker').chosenLabel;
datePickerBtn.find('span').html(selectedRange);
if (selectedRange !== 'All time') {
jQuery.ajax({
url: wps_js.global.ajax_url,
method: 'POST',
data: {
wps_nonce: wps_js.global.rest_api_nonce,
action: 'wp_statistics_store_date_range',
date: {
from: startDate,
to: endDate
}
},
beforeSend: function () {
datePickerBtn.addClass('wps-disabled');
},
complete: function (data) {
datePickerForm.submit();
}
});
} else {
datePickerForm.submit();
}
});
}
// Single Calendar
if (datePickerField.length) {
datePickerField.daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1998,
maxYear: parseInt(new Date().getFullYear() + 1),
locale: {
format: 'YYYY-MM-DD'
}
});
datePickerField.on('show.daterangepicker', function (ev, picker) {
const correspondingPicker = picker.container;
jQuery(correspondingPicker).addClass(ev.target.className);
});
datePickerField.on('apply.daterangepicker', function (ev, picker) {
jQuery('.wps-today-datepicker').submit();
});
}
});
function fixDatePickerA11y() {
const datePickers = document.querySelectorAll('.drp-calendar');
datePickers.forEach((datePicker) => {
const headers = datePicker.querySelectorAll('.calendar-table table thead tr:first-child th');
if (headers.length) {
if (headers[0] && headers[0].textContent.trim() === '') {
headers[0].innerHTML = '<span class="screen-reader-text">Previous Month</span>';
}
if (headers[2] && headers[2].textContent.trim() === '') {
headers[2].innerHTML = '<span class="screen-reader-text">Next Month</span>';
}
}
datePicker.querySelectorAll('.calendar-table thead tr:nth-child(2) th').forEach((th) => {
th.setAttribute('scope', 'col');
});
});
}
setTimeout(fixDatePickerA11y, 300);