: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
startOfWeek: weekStartsOn = 0
const date = currentDate ? inputToDate(currentDate) : new Date();
selected: [startOfDay_startOfDay(date)],
viewing: startOfDay_startOfDay(date),
// Used to implement a roving tab index. Tracks the day that receives focus
// when the user tabs into the calendar.
const [focusable, setFocusable] = (0,external_wp_element_namespaceObject.useState)(startOfDay_startOfDay(date));
// Allows us to only programmatically focus() a day when focus was already
// within the calendar. This stops us stealing focus from e.g. a TimePicker
const [isFocusWithinCalendar, setIsFocusWithinCalendar] = (0,external_wp_element_namespaceObject.useState)(false);
// Update internal state when currentDate prop changes.
const [prevCurrentDate, setPrevCurrentDate] = (0,external_wp_element_namespaceObject.useState)(currentDate);
if (currentDate !== prevCurrentDate) {
setPrevCurrentDate(currentDate);
setSelected([startOfDay_startOfDay(date)]);
setViewing(startOfDay_startOfDay(date));
setFocusable(startOfDay_startOfDay(date));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Wrapper, {
className: "components-datetime__date",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Calendar'),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Navigator, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_right : arrow_left,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'),
setFocusable(subMonths_subMonths(focusable, 1));
onMonthPreviewed?.(format(subMonths_subMonths(viewing, 1), TIMEZONELESS_FORMAT));
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(NavigatorHeading, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("strong", {
children: (0,external_wp_date_namespaceObject.dateI18n)('F', viewing, -viewing.getTimezoneOffset())
}), ' ', (0,external_wp_date_namespaceObject.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_left : arrow_right,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'),
setFocusable(addMonths_addMonths(focusable, 1));
onMonthPreviewed?.(format(addMonths_addMonths(viewing, 1), TIMEZONELESS_FORMAT));
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Calendar, {
onFocus: () => setIsFocusWithinCalendar(true),
onBlur: () => setIsFocusWithinCalendar(false),
children: [calendar[0][0].map(day => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayOfWeek, {
children: (0,external_wp_date_namespaceObject.dateI18n)('D', day, -day.getTimezoneOffset())
}, day.toString())), calendar[0].map(week => week.map((day, index) => {
if (!isSameMonth(day, viewing)) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_Day, {
isSelected: isSelected(day),
isFocusable: isEqual_isEqual(day, focusable),
isFocusAllowed: isFocusWithinCalendar,
isToday: isSameDay(day, new Date()),
isInvalid: isInvalidDate ? isInvalidDate(day) : false,
numEvents: events.filter(event => isSameDay(event.date, day)).length,
// Don't change the selected date's time fields.
new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT));
if (event.key === 'ArrowLeft') {
nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1);
if (event.key === 'ArrowRight') {
nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1);
if (event.key === 'ArrowUp') {
nextFocusable = subWeeks(day, 1);
if (event.key === 'ArrowDown') {
nextFocusable = addWeeks_addWeeks(day, 1);
if (event.key === 'PageUp') {
nextFocusable = subMonths_subMonths(day, 1);
if (event.key === 'PageDown') {
nextFocusable = addMonths_addMonths(day, 1);
if (event.key === 'Home') {
nextFocusable = startOfWeek_startOfWeek(day);
if (event.key === 'End') {
nextFocusable = startOfDay_startOfDay(endOfWeek_endOfWeek(day));
setFocusable(nextFocusable);
if (!isSameMonth(nextFocusable, viewing)) {
setViewing(nextFocusable);
onMonthPreviewed?.(format(nextFocusable, TIMEZONELESS_FORMAT));
const ref = (0,external_wp_element_namespaceObject.useRef)();
// Focus the day when it becomes focusable, e.g. because an arrow key is
// pressed. Only do this if focus is allowed - this stops us stealing focus
// from e.g. a TimePicker input.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (ref.current && isFocusable && isFocusAllowed) {
// isFocusAllowed is not a dep as there is no point calling focus() on
// an already focused element.
// eslint-disable-next-line react-hooks/exhaustive-deps
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayButton, {
className: "components-datetime__date__day" // Unused, for backwards compatibility.
tabIndex: isFocusable ? 0 : -1,
"aria-label": getDayLabel(day, isSelected, numEvents),
hasEvents: numEvents > 0,
children: (0,external_wp_date_namespaceObject.dateI18n)('j', day, -day.getTimezoneOffset())
function getDayLabel(date, isSelected, numEvents) {
} = (0,external_wp_date_namespaceObject.getSettings)();
const localizedDate = (0,external_wp_date_namespaceObject.dateI18n)(formats.date, date, -date.getTimezoneOffset());
if (isSelected && numEvents > 0) {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: The calendar date. 2: Number of events on the calendar date.
(0,external_wp_i18n_namespaceObject._n)('%1$s. Selected. There is %2$d event', '%1$s. Selected. There are %2$d events', numEvents), localizedDate, numEvents);
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: The calendar date.
(0,external_wp_i18n_namespaceObject.__)('%1$s. Selected'), localizedDate);
} else if (numEvents > 0) {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: The calendar date. 2: Number of events on the calendar date.
(0,external_wp_i18n_namespaceObject._n)('%1$s. There is %2$d event', '%1$s. There are %2$d events', numEvents), localizedDate, numEvents);
/* harmony default export */ const date = (DatePicker);
;// CONCATENATED MODULE: ./node_modules/date-fns/startOfMinute.mjs
* @category Minute Helpers
* @summary Return the start of a minute for the given date.
* Return the start of a minute for the given date.
* The result will be in the local timezone.
* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
* @param date - The original date
* @returns The start of a minute
* // The start of a minute for 1 December 2014 22:15:45.400:
* const result = startOfMinute(new Date(2014, 11, 1, 22, 15, 45, 400))
* //=> Mon Dec 01 2014 22:15:00
function startOfMinute(date) {
const _date = toDate_toDate(date);
// Fallback for modularized imports:
/* harmony default export */ const date_fns_startOfMinute = ((/* unused pure expression or super */ null && (startOfMinute)));
;// CONCATENATED MODULE: ./node_modules/date-fns/getDaysInMonth.mjs
* @category Month Helpers
* @summary Get the number of days in a month of the given date.
* Get the number of days in a month of the given date.
* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
* @param date - The given date
* @returns The number of days in a month
* // How many days are in February 2000?
* const result = getDaysInMonth(new Date(2000, 1))
function getDaysInMonth_getDaysInMonth(date) {
const _date = toDate_toDate(date);
const year = _date.getFullYear();
const monthIndex = _date.getMonth();
const lastDayOfMonth = constructFrom_constructFrom(date, 0);
lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
lastDayOfMonth.setHours(0, 0, 0, 0);
return lastDayOfMonth.getDate();
// Fallback for modularized imports:
/* harmony default export */ const date_fns_getDaysInMonth = ((/* unused pure expression or super */ null && (getDaysInMonth_getDaysInMonth)));
;// CONCATENATED MODULE: ./node_modules/date-fns/setMonth.mjs
* @category Month Helpers
* @summary Set the month to the given date.
* Set the month to the given date.
* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
* @param date - The date to be changed
* @param month - The month index to set (0-11)
* @returns The new date with the month set
* // Set February to 1 September 2014:
* const result = setMonth(new Date(2014, 8, 1), 1)
* //=> Sat Feb 01 2014 00:00:00
function setMonth_setMonth(date, month) {
const _date = toDate_toDate(date);
const year = _date.getFullYear();
const day = _date.getDate();
const dateWithDesiredMonth = constructFrom_constructFrom(date, 0);
dateWithDesiredMonth.setFullYear(year, month, 15);
dateWithDesiredMonth.setHours(0, 0, 0, 0);
const daysInMonth = getDaysInMonth_getDaysInMonth(dateWithDesiredMonth);
// Set the last day of the new month
// if the original date was the last day of the longer month
_date.setMonth(month, Math.min(day, daysInMonth));
// Fallback for modularized imports:
/* harmony default export */ const date_fns_setMonth = ((/* unused pure expression or super */ null && (setMonth_setMonth)));
;// CONCATENATED MODULE: ./node_modules/date-fns/set.mjs
* @category Common Helpers
* @summary Set date values to a given date.
* Set date values to a given date.
* Sets time values to date from object `values`.
* A value is not set if it is undefined or null or doesn't exist in `values`.
* Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
* to use native `Date#setX` methods. If you use this function, you may not want to include the
* other `setX` functions that date-fns provides if you are concerned about the bundle size.
* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
* @param date - The date to be changed
* @param values - The date values to be set
* @returns The new date with options set
* // Transform 1 September 2014 into 20 October 2015 in a single line:
* const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
* //=> Tue Oct 20 2015 00:00:00
* // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
* const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
* //=> Mon Sep 01 2014 12:23:45
function set_set(date, values) {
let _date = toDate_toDate(date);
// Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
return constructFrom_constructFrom(date, NaN);
if (values.year != null) {
_date.setFullYear(values.year);
if (values.month != null) {
_date = setMonth_setMonth(_date, values.month);
if (values.date != null) {
_date.setDate(values.date);
if (values.hours != null) {
_date.setHours(values.hours);
if (values.minutes != null) {
_date.setMinutes(values.minutes);
if (values.seconds != null) {
_date.setSeconds(values.seconds);
if (values.milliseconds != null) {
_date.setMilliseconds(values.milliseconds);
// Fallback for modularized imports:
/* harmony default export */ const date_fns_set = ((/* unused pure expression or super */ null && (set_set)));
;// CONCATENATED MODULE: ./node_modules/date-fns/setHours.mjs
* @summary Set the hours to the given date.
* Set the hours to the given date.
* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
* @param date - The date to be changed
* @param hours - The hours of the new date
* @returns The new date with the hours set
* // Set 4 hours to 1 September 2014 11:30:00:
* const result = setHours(new Date(2014, 8, 1, 11, 30), 4)
* //=> Mon Sep 01 2014 04:30:00
function setHours(date, hours) {
const _date = toDate_toDate(date);
// Fallback for modularized imports:
/* harmony default export */ const date_fns_setHours = ((/* unused pure expression or super */ null && (setHours)));
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/styles.js
function time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
} : 0)("box-sizing:border-box;font-size:", config_values.fontSize, ";" + ( true ? "" : 0));
const Fieldset = /*#__PURE__*/emotion_styled_base_browser_esm("fieldset", true ? {
} : 0)("border:0;margin:0 0 ", space(2 * 2), " 0;padding:0;&:last-child{margin-bottom:0;}" + ( true ? "" : 0));
const TimeWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
styles: "direction:ltr;display:flex"
const baseInput = /*#__PURE__*/emotion_react_browser_esm_css("&&& ", Input, "{padding-left:", space(2), ";padding-right:", space(2), ";text-align:center;}" + ( true ? "" : 0), true ? "" : 0);
const HoursInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {
} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-right:0;}&&& ", BackdropUI, "{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}" + ( true ? "" : 0));
const TimeSeparator = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {
} : 0)("border-top:", config_values.borderWidth, " solid ", COLORS.gray[700], ";border-bottom:", config_values.borderWidth, " solid ", COLORS.gray[700], ";line-height:calc(\n\t\t", config_values.controlHeight, " - ", config_values.borderWidth, " * 2\n\t);display:inline-block;" + ( true ? "" : 0));
const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {
} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-left:0;}&&& ", BackdropUI, "{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;}" + ( true ? "" : 0));
// Ideally we wouldn't need a wrapper, but can't otherwise target the
// <BaseControl> in <SelectControl>
const MonthSelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
const DayInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {
} : 0)(baseInput, " width:", space(9), ";" + ( true ? "" : 0));
const YearInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {
} : 0)(baseInput, " width:", space(14), ";" + ( true ? "" : 0));
const TimeZone = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {
styles: "text-decoration:underline dotted"
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/timezone.js
* Displays timezone information when user timezone is different from site
const timezone_TimeZone = () => {
} = (0,external_wp_date_namespaceObject.getSettings)();