@ipohjs/qwik-date-picker
Version:
Stream-able and resumable date picker component, built with Qwik
704 lines (703 loc) • 28.3 kB
JavaScript
import { componentQrl, inlinedQrl, _jsxC, _jsxQ, _jsxBranch, _restProps, useStylesQrl, _jsxS, _IMMUTABLE, _fnSignal, useSignal, useLexicalScope, useVisibleTaskQrl, createElement, _wrapSignal } from "@builder.io/qwik";
import { fromPartsToUtcDate } from "@ipohjs/calendar/from-parts-to-utc-date";
import { QwikCalendar } from "@ipohjs/qwik-calendar";
import { Fragment } from "@builder.io/qwik/jsx-runtime";
import { QwikIconButton } from "@ipohjs/qwik-icon-button";
import { QwikSvg } from "@ipohjs/qwik-svg";
import { QwikButton } from "@ipohjs/qwik-button";
import { useKeyboardEvent } from "@ipohjs/qwik-hooks";
import { toDayDifferenceInclusive } from "@ipohjs/calendar/to-day-difference-inclusive";
const defaultMaxYear = 2100;
const defaultMinYear = 1900;
const defaultMaxYearYear = defaultMaxYear;
const defaultMaxYearMonth = 11;
const defaultMaxYearDate = 31;
const defaultMinYearYear = defaultMinYear;
const defaultMinYearMonth = 0;
const defaultMinYearDate = 1;
const defaultMaxDate = fromPartsToUtcDate(defaultMaxYearYear, defaultMaxYearMonth, defaultMaxYearDate);
const defaultMinDate = fromPartsToUtcDate(defaultMinYearYear, defaultMinYearMonth, defaultMinYearDate);
const ArrowDropDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
return /* @__PURE__ */ _jsxC(QwikSvg, {
...props,
children: [
/* @__PURE__ */ _jsxQ("path", null, {
d: "M0 0h24v24H0z",
fill: "none"
}, null, 3, null),
/* @__PURE__ */ _jsxQ("path", null, {
d: "M7 10l5 5 5-5z"
}, null, 3, null)
]
}, 0, "uu_0");
}, "ArrowDropDown_component_wTwimPurScs"));
const ChevronLeft = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
return /* @__PURE__ */ _jsxC(QwikSvg, {
...props,
children: [
/* @__PURE__ */ _jsxQ("path", null, {
d: "M0 0h24v24H0V0z",
fill: "none"
}, null, 3, null),
/* @__PURE__ */ _jsxQ("path", null, {
d: "M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"
}, null, 3, null)
]
}, 0, "tn_0");
}, "ChevronLeft_component_5vvi0rF0FOI"));
const styles$2 = '.header{grid-gap:0 8px;box-sizing:border-box;grid-template-columns:minmax(32px,auto) minmax(1px,1fr) repeat(2,minmax(24px,auto));grid-template-areas:"monthYear gap left right";align-items:center;display:grid;position:relative}.header>p{grid-area:monthYear}.header>.monthYear{grid-gap:0 8px;grid-template-columns:minmax(1px,auto) 40px;grid-template-areas:"monthYear cta";align-items:center;display:grid}.header>.monthYear p{margin:0}.header>.chevronLeft{grid-area:left;rotate:none}.header>.chevronRight{grid-area:right;rotate:180deg}';
const DatePickerHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
_jsxBranch();
const props1 = _restProps(props, [
"class",
"date",
"initialView",
"locale",
"onMonthYearClick$",
"onNextClick$",
"onPrevClick$"
]);
useStylesQrl(/* @__PURE__ */ inlinedQrl(styles$2, "DatePickerHeader_component_useStyles_erFHXpY0Ybs"));
const monthYearFormat = new Intl.DateTimeFormat(props.locale, {
month: "long",
year: "numeric"
});
const monthYearLabel = monthYearFormat.format(props.date);
return /* @__PURE__ */ _jsxS("date-picker-header", {
...props1,
children: [
/* @__PURE__ */ _jsxQ("div", null, {
class: "monthYear"
}, [
/* @__PURE__ */ _jsxQ("p", null, null, monthYearLabel, 1, null),
/* @__PURE__ */ _jsxC(QwikIconButton, {
"aria-label": "Click to select year",
children: /* @__PURE__ */ _jsxC(ArrowDropDown, {
"q:slot": "icon",
[_IMMUTABLE]: {
"q:slot": _IMMUTABLE
}
}, 3, "QV_0"),
onClick$: props.onMonthYearClick$,
title: "Click to select year",
[_IMMUTABLE]: {
"aria-label": _IMMUTABLE,
title: _IMMUTABLE
}
}, 0, "QV_1")
], 1, null),
props.initialView === "calendar" && /* @__PURE__ */ _jsxC(Fragment, {
children: [
/* @__PURE__ */ _jsxC(QwikIconButton, {
"aria-label": "Go to previous month",
children: /* @__PURE__ */ _jsxC(ChevronLeft, {
"q:slot": "icon",
[_IMMUTABLE]: {
"q:slot": _IMMUTABLE
}
}, 3, "QV_2"),
class: "chevronLeft",
onClick$: props.onPrevClick$,
title: "Go to previous month",
[_IMMUTABLE]: {
"aria-label": _IMMUTABLE,
class: _IMMUTABLE,
title: _IMMUTABLE
}
}, 0, "QV_3"),
/* @__PURE__ */ _jsxC(QwikIconButton, {
"aria-label": "Go to next month",
children: /* @__PURE__ */ _jsxC(ChevronLeft, {
"q:slot": "icon",
[_IMMUTABLE]: {
"q:slot": _IMMUTABLE
}
}, 3, "QV_4"),
class: "chevronRight",
onClick$: props.onNextClick$,
title: "Go to next month",
[_IMMUTABLE]: {
"aria-label": _IMMUTABLE,
class: _IMMUTABLE,
title: _IMMUTABLE
}
}, 0, "QV_5")
]
}, 1, "QV_6")
]
}, {
class: _fnSignal((p0) => [
"header",
p0.class
], [
props
], '["header",p0.class]')
}, 0, "QV_7");
}, "DatePickerHeader_component_Yg6mrCEBD4I"));
const styles$1 = ".yearGrid{--_cols:4;grid-template-columns:repeat(4,minmax(1px,auto));grid-template-columns:repeat(var(--_cols),minmax(1px,auto));box-sizing:border-box;place-items:center;gap:12px;display:grid;position:relative}.yearGrid button{width:72px;height:36px}.yearGrid button[aria-pressed=true]{--button-overlay-backgroundColor:var(--ip-background);background-color:var(--ip-primary);color:var(--ip-on-primary)}";
function toYearGrid({ len, locale, min }) {
const formatYear = new Intl.DateTimeFormat(locale, {
year: "numeric"
}).format;
const list = Array.from(Array(len)).map((_, i) => {
const value = min + i;
const date = new Date(Date.UTC(value, 0, 1));
return {
label: formatYear(date),
value
};
});
return list;
}
const DatePickerYearGrid = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
const props1 = _restProps(props, [
"class",
"locale",
"max",
"min",
"onYearChange$",
"selectedYear"
]);
useStylesQrl(/* @__PURE__ */ inlinedQrl(styles$1, "DatePickerYearGrid_component_useStyles_0rveDD5UH0E"));
const len = props.max - props.min + 1;
const yearList = toYearGrid({
len,
locale: props.locale,
maxCol: 4,
min: props.min
});
const $host = useSignal();
const $year = useSignal(props.selectedYear);
useKeyboardEvent({
$node: $host,
onKeyDown$: /* @__PURE__ */ inlinedQrl((ev) => {
if (ev.key !== "Enter" && ev.key !== " ")
ev.preventDefault();
}, "DatePickerYearGrid_component_useKeyboardEvent_LWk6sUcrJ9c"),
onKeyUp$: /* @__PURE__ */ inlinedQrl((ev) => {
const [$year2, props2] = useLexicalScope();
switch (ev.key) {
case "ArrowDown":
$year2.value += 4;
break;
case "ArrowLeft":
$year2.value -= 1;
break;
case "ArrowRight":
$year2.value += 1;
break;
case "ArrowUp":
$year2.value -= 4;
break;
case "End":
$year2.value = props2.max;
break;
case "Home":
$year2.value = props2.min;
break;
}
}, "DatePickerYearGrid_component_useKeyboardEvent_1_4rHvsYB6a0I", [
$year,
props
])
});
useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
const [$host2, $year2] = useLexicalScope();
const host = track(() => $host2.value);
const newYear = track(() => $year2.value);
if (host) {
const buttons = Array.from(host?.children ?? []);
const button = buttons.find((n) => n.getAttribute("aria-pressed") === "true" && n.dataset.key === String(newYear));
if (button) {
button.scrollIntoView({
block: "center"
});
button.focus();
}
}
}, "DatePickerYearGrid_component_useVisibleTask_bh9FDn0FnxQ", [
$host,
$year
]));
return /* @__PURE__ */ _jsxS("date-picker-year-grid", {
...props1,
children: yearList.map(({ label, value }) => {
const isSelected = $year.value === value;
const ariaPressed = isSelected ? "true" : "false";
const tabIndex = isSelected ? 0 : -1;
const onClick$ = /* @__PURE__ */ inlinedQrl(() => {
const [props2, value2] = useLexicalScope();
props2.onYearChange$?.(value2, props2.selectedYear);
}, "DatePickerYearGrid_component_date_picker_year_grid_onClick_0kh9ARKERjo", [
props,
value
]);
return /* @__PURE__ */ _jsxC(QwikButton, {
"aria-label": label,
"aria-pressed": ariaPressed,
children: label,
"data-key": value,
onClick$,
tabIndex,
title: label,
[_IMMUTABLE]: {
onClick$: _IMMUTABLE
}
}, 1, value);
}),
ref: $host
}, {
class: _fnSignal((p0) => [
"yearGrid",
p0.class
], [
props
], '["yearGrid",p0.class]')
}, 0, "9a_0");
}, "DatePickerYearGrid_component_Bd0J4ia0tw4"));
const keyArrowDown = "ArrowDown";
const keyArrowLeft = "ArrowLeft";
const keyArrowRight = "ArrowRight";
const keyArrowUp = "ArrowUp";
const keyEnd = "End";
const keyHome = "Home";
const keyPageDown = "PageDown";
const keyPageUp = "PageUp";
const navigationKeyListNext = [
keyArrowDown,
keyPageDown,
keyEnd
];
const navigationKeyListPrevious = [
keyArrowUp,
keyPageUp,
keyHome
];
const navigationKeySetDayNext = /* @__PURE__ */ new Set([
...navigationKeyListNext,
keyArrowRight
]);
const navigationKeySetDayPrevious = /* @__PURE__ */ new Set([
...navigationKeyListPrevious,
keyArrowLeft
]);
const navigationKeySetGrid = /* @__PURE__ */ new Set([
...navigationKeySetDayNext,
...navigationKeySetDayPrevious
]);
function isSameMonth(targetDate, sourceDate) {
const targetDateFy = targetDate.getUTCFullYear();
const targetDateM = targetDate.getUTCMonth();
const sourceDateFY = sourceDate.getUTCFullYear();
const sourceDateM = sourceDate.getUTCMonth();
return targetDateFy === sourceDateFY && targetDateM === sourceDateM;
}
function toNextSelectableDate({ date, disabledDatesSet, disabledDaysSet, keyboardEventKey, maxTime, minTime }) {
if (toDayDifferenceInclusive(minTime, maxTime) <= 1)
return date;
const focusedDateTime = +date;
let isBeforeMinTime = focusedDateTime < minTime;
let iaAfterMaxTime = focusedDateTime > maxTime;
let isDisabledDay = isBeforeMinTime || iaAfterMaxTime || disabledDaysSet.has(date.getUTCDay()) || disabledDatesSet.has(focusedDateTime);
if (!isDisabledDay)
return date;
let newSelectableDate = isBeforeMinTime === iaAfterMaxTime ? date : new Date(isBeforeMinTime ? minTime - 864e5 : 864e5 + maxTime);
let newSelectableDateTime = +newSelectableDate;
const fy = newSelectableDate.getUTCFullYear();
const m = newSelectableDate.getUTCMonth();
let d = newSelectableDate.getUTCDate();
while (isDisabledDay) {
if (isBeforeMinTime || !iaAfterMaxTime && navigationKeySetDayNext.has(keyboardEventKey))
d += 1;
if (iaAfterMaxTime || !isBeforeMinTime && navigationKeySetDayPrevious.has(keyboardEventKey))
d -= 1;
newSelectableDate = fromPartsToUtcDate(fy, m, d);
newSelectableDateTime = +newSelectableDate;
if (!isBeforeMinTime) {
isBeforeMinTime = newSelectableDateTime < minTime;
if (isBeforeMinTime) {
newSelectableDate = new Date(minTime);
d = newSelectableDate.getUTCDate();
}
}
if (!iaAfterMaxTime) {
iaAfterMaxTime = newSelectableDateTime > maxTime;
if (iaAfterMaxTime) {
newSelectableDate = new Date(maxTime);
d = newSelectableDate.getUTCDate();
}
}
isDisabledDay = disabledDaysSet.has(newSelectableDate.getUTCDay()) || disabledDatesSet.has(+newSelectableDate);
}
return newSelectableDate;
}
function toNextDate({ disabledDatesSet, disabledDaysSet, focusedDate, hasAltKey, keyboardEventKey, maxTime, minTime, selectedDate }) {
const dateFullYear = selectedDate.getUTCFullYear();
const dateMonth = selectedDate.getUTCMonth();
const dateDate = selectedDate.getUTCDate();
const dateTime = +selectedDate;
const currentDateFullYear = focusedDate.getUTCFullYear();
const currentDateMonth = focusedDate.getUTCMonth();
const notInCurrentMonth = currentDateMonth !== dateMonth || currentDateFullYear !== dateFullYear;
let fy = dateFullYear;
let m = dateMonth;
let d = dateDate;
let shouldRunSwitch = true;
if (notInCurrentMonth) {
fy = currentDateFullYear;
m = currentDateMonth;
d = 1;
shouldRunSwitch = keyboardEventKey === keyPageDown || keyboardEventKey === keyPageUp || keyboardEventKey === keyEnd;
}
switch (shouldRunSwitch) {
case (dateTime === minTime && navigationKeySetDayPrevious.has(keyboardEventKey)):
case (dateTime === maxTime && navigationKeySetDayNext.has(keyboardEventKey)):
break;
case keyboardEventKey === keyArrowUp:
d -= 7;
break;
case keyboardEventKey === keyArrowDown:
d += 7;
break;
case keyboardEventKey === keyArrowLeft:
d -= 1;
break;
case keyboardEventKey === keyArrowRight:
d += 1;
break;
case keyboardEventKey === keyPageDown:
hasAltKey ? fy += 1 : m += 1;
break;
case keyboardEventKey === keyPageUp:
hasAltKey ? fy -= 1 : m -= 1;
break;
case keyboardEventKey === keyEnd:
m += 1;
d = 0;
break;
case keyboardEventKey === keyHome:
d = 1;
break;
}
if (keyboardEventKey === keyPageDown || keyboardEventKey === keyPageUp) {
const totalDaysOfMonth = fromPartsToUtcDate(fy, m + 1, 0).getUTCDate();
if (d > totalDaysOfMonth)
d = totalDaysOfMonth;
}
const nextSelectableDate = toNextSelectableDate({
date: fromPartsToUtcDate(fy, m, d),
disabledDatesSet,
disabledDaysSet,
keyboardEventKey,
maxTime,
minTime
});
return nextSelectableDate;
}
function toUTCDate(inputDate, offset) {
const d = inputDate.getUTCDate();
const m = inputDate.getUTCMonth();
const y = inputDate.getUTCFullYear();
const d2 = d + (offset?.date ?? 0);
const m2 = m + (offset?.month ?? 0);
const y2 = y + (offset?.year ?? 0);
return new Date(Date.UTC(y2, m2, d2));
}
const styles = '.datePicker{background-color:var(--ip-surface);color:var(--ip-on-surface);box-sizing:border-box;grid-template-areas:"header""body";gap:8px 0;display:grid;position:relative}.datePicker.has-footer{grid-template-areas:"header""body""footer"}.datePicker .datePicker_header{grid-area:header;padding:4px 0 0 16px}.datePicker .datePicker_body{aspect-ratio:1;overscroll-behavior:contain;grid-area:body;position:relative;overflow:hidden auto}.datePicker .datePicker_body.is-calendar{padding:0 16px 8px}.datePicker .datePicker_footer{grid-area:footer}.datePicker_calendar{--_bw:0px}.datePicker_calendar td.dataCell,.datePicker_calendar th.weekNumber{--qwikCalendar_cell-paddingTop:calc(100% - (var(--_bw)*2))}.datePicker_calendar td.dataCell:focus-visible,.datePicker_calendar th.weekNumber:focus-visible{outline:none}.datePicker_calendar td.dataCell[aria-disabled=true],.datePicker_calendar th.weekNumber[aria-disabled=true]{--_dc:rgba(230,225,229,var(--ip-disabled-opacity))}.datePicker_calendar td.dataCell[aria-disabled=true]:before,.datePicker_calendar th.weekNumber[aria-disabled=true]:before{color:var(--_dc)}@media screen and (prefers-color-scheme:light){.datePicker_calendar td.dataCell[aria-disabled=true]:before,.datePicker_calendar th.weekNumber[aria-disabled=true]:before{--_dc:rgba(255,251,254,var(--ip-disabled-opacity))}}.datePicker_calendar td.dataCell:before,.datePicker_calendar th.weekNumber:before{--_g:2px;top:calc(var(--_bw) + 2px);right:calc(var(--_bw) + 2px);bottom:calc(var(--_bw) + 2px);left:calc(var(--_bw) + 2px);top:calc(var(--_bw) + var(--_g));right:calc(var(--_bw) + var(--_g));bottom:calc(var(--_bw) + var(--_g));left:calc(var(--_bw) + var(--_g));pointer-events:none;width:calc(100% - ((var(--_bw) + 2px)*2));width:calc(100% - ((var(--_bw) + var(--_g))*2));height:calc(100% - ((var(--_bw) + 2px)*2));height:calc(100% - ((var(--_bw) + var(--_g))*2));place-items:center;display:grid;position:absolute}.datePicker_calendar td.dataCell[data-day]{--_bc:unset;--_bgc:inherit;--_c:inherit}.datePicker_calendar td.dataCell[data-day],.datePicker_calendar td.dataCell[data-day]:before,.datePicker_calendar td.dataCell[data-day]:after{border-radius:var(--ip-corner-lf)}.datePicker_calendar td.dataCell[data-day]:before{content:attr(data-day);background-color:var(--_bgc);color:var(--_c)}.datePicker_calendar td.dataCell[data-day]:after{border-color:var(--_bc);border-style:solid;border-width:var(--_bw)}.datePicker_calendar td.dataCell[data-day]:hover,.datePicker_calendar td.dataCell[data-day][tabindex="0"]:focus,.datePicker_calendar td.dataCell[data-day][tabindex="0"]:focus-visible,.datePicker_calendar td.dataCell[data-day][aria-current=date]{--_bc:var(--ip-primary);--_bw:var(--qwikCalendar_day-borderWidth,2px)}.datePicker_calendar td.dataCell[data-day][aria-current=date]{--_c:var(--ip-primary)}.datePicker_calendar td.dataCell[data-day][tabindex="0"][aria-selected=true]{--_bgc:var(--ip-primary);--_c:var(--ip-on-primary)}.datePicker_calendar th.weekNumber:before{content:attr(data-week-number)}.datePicker_yearGrid{padding:4px 20px 8px 2px}';
const QwikDatePicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
_jsxBranch();
const props1 = _restProps(props, [
"class",
"date",
"disabledDates",
"disabledDays",
"firstDayOfWeek",
"focusedDate",
"initialView",
"key",
"locale",
"renderFooter$",
"shortWeekLabel",
"showWeekNumber",
"weekLabel",
"weekNumberTemplate",
"weekNumberType"
]);
useStylesQrl(/* @__PURE__ */ inlinedQrl(styles, "QwikDatePicker_component_useStyles_7Ejr4TUJh88"));
const $calendarRef = useSignal();
const $focusedDate = useSignal(toUTCDate(props.focusedDate ?? props.date));
const $selectedDate = useSignal(toUTCDate(props.date));
const $selectedView = useSignal(props.initialView || "calendar");
const $tabbableDate = useSignal($focusedDate.value);
const $todayDate = useSignal(toUTCDate(/* @__PURE__ */ new Date()));
const footer = props.renderFooter$ ? /* @__PURE__ */ _jsxQ("div", null, {
class: "datePicker_footer"
}, props.renderFooter$(), 1, "Zl_0") : null;
const max = props1.max ?? defaultMaxDate;
const min = props1.min ?? defaultMinDate;
const onDateChangeByKey$ = /* @__PURE__ */ inlinedQrl((ev, { disabledDates, disabledDays }) => {
const [$focusedDate2, $selectedDate2, max2, min2] = useLexicalScope();
if (navigationKeySetGrid.has(ev.key)) {
const nextDate = toNextDate({
disabledDatesSet: new Set(disabledDates),
disabledDaysSet: new Set(disabledDays),
focusedDate: $focusedDate2.value,
hasAltKey: ev.altKey,
keyboardEventKey: ev.key,
maxTime: max2.getTime(),
minTime: min2.getTime(),
selectedDate: $selectedDate2.value
});
const nextDateTime = nextDate.getTime();
if (nextDateTime !== $focusedDate2.value.getTime() || nextDateTime !== $selectedDate2.value.getTime())
$focusedDate2.value = $selectedDate2.value = nextDate;
}
}, "QwikDatePicker_component_onDateChangeByKey_RK0gvZzEvnc", [
$focusedDate,
$selectedDate,
max,
min
]);
const onMonthYearClick$ = /* @__PURE__ */ inlinedQrl(() => {
const [$selectedView2] = useLexicalScope();
$selectedView2.value = $selectedView2.value === "calendar" ? "yearGrid" : "calendar";
}, "QwikDatePicker_component_onMonthYearClick_IIf2kHgGQRk", [
$selectedView
]);
const onNextMonthClick$ = /* @__PURE__ */ inlinedQrl(() => {
const [$focusedDate2] = useLexicalScope();
$focusedDate2.value = toUTCDate($focusedDate2.value, {
month: 1
});
}, "QwikDatePicker_component_onNextMonthClick_JGh5a9cTU6M", [
$focusedDate
]);
const onPrevMonthClick$ = /* @__PURE__ */ inlinedQrl(() => {
const [$focusedDate2] = useLexicalScope();
$focusedDate2.value = toUTCDate($focusedDate2.value, {
month: -1
});
}, "QwikDatePicker_component_onPrevMonthClick_tXsaYKuH0zk", [
$focusedDate
]);
const onYearChange$ = /* @__PURE__ */ inlinedQrl((newYear, _oldYear) => {
const [$focusedDate2, $selectedDate2, $selectedView2] = useLexicalScope();
const newDate = fromPartsToUtcDate(newYear, $focusedDate2.value.getUTCMonth(), $focusedDate2.value.getUTCDate());
$focusedDate2.value = $selectedDate2.value = newDate;
$selectedView2.value = "calendar";
}, "QwikDatePicker_component_onYearChange_pD4c0iJJ2T8", [
$focusedDate,
$selectedDate,
$selectedView
]);
const renderDataCell$ = /* @__PURE__ */ inlinedQrl((init, _rowIndex, _colIndex) => {
const [$focusedDate2, $selectedDate2, $tabbableDate2, $todayDate2] = useLexicalScope();
const colTime = init.col.fullDate?.getTime();
const isEmpty = !init.col.label && !init.col.value;
const isSelected = colTime === $selectedDate2.value.getTime();
const isTabbable = $tabbableDate2.value.getTime() === colTime;
const isToday = colTime === $todayDate2.value.getTime();
return /* @__PURE__ */ _jsxS("td", {
...init.defaultProps,
...isEmpty ? void 0 : {
tabIndex: isTabbable ? 0 : -1
},
"aria-current": isToday ? "date" : void 0,
"aria-selected": isSelected ? "true" : void 0,
"data-day": isEmpty ? void 0 : init.col.value,
onClick$: /* @__PURE__ */ inlinedQrl(() => {
const [$focusedDate3, $selectedDate3, init2] = useLexicalScope();
if (init2.col.fullDate)
$focusedDate3.value = $selectedDate3.value = init2.col.fullDate;
}, "QwikDatePicker_component_renderDataCell_td_onClick_nwMKgHh1VEY", [
$focusedDate2,
$selectedDate2,
init
])
}, {
class: "dataCell"
}, 0, init.col.key);
}, "QwikDatePicker_component_renderDataCell_Ez0VSPO0mZo", [
$focusedDate,
$selectedDate,
$tabbableDate,
$todayDate
]);
const renderWeekNumber$ = /* @__PURE__ */ inlinedQrl((init, _rowIdx, _colIdx) => {
return /* @__PURE__ */ _jsxS("th", {
...init.defaultProps,
"data-week-number": _wrapSignal(init.col, "value")
}, {
class: "weekNumber"
}, 0, init.col.value);
}, "QwikDatePicker_component_renderWeekNumber_doe0ibKthxU");
useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
const [$focusedDate2, $selectedDate2, $tabbableDate2, max2, min2, props2] = useLexicalScope();
track(() => $focusedDate2.value);
track(() => $selectedDate2.value);
const isWithinSameMonth = isSameMonth($selectedDate2.value, $focusedDate2.value);
$tabbableDate2.value = isWithinSameMonth ? $selectedDate2.value : toNextDate({
disabledDatesSet: new Set(props2.disabledDates?.map((d) => d.getTime())),
disabledDaysSet: new Set(props2.disabledDays),
focusedDate: $focusedDate2.value,
hasAltKey: false,
keyboardEventKey: keyHome,
maxTime: max2.getTime(),
minTime: min2.getTime(),
selectedDate: $selectedDate2.value
});
}, "QwikDatePicker_component_useVisibleTask_wx9k9AdW8aU", [
$focusedDate,
$selectedDate,
$tabbableDate,
max,
min,
props
]));
return /* @__PURE__ */ createElement("qwik-date-picker", {
...props1,
class: [
"datePicker",
footer && "has-footer",
props.class
],
key: props.key,
children: [
/* @__PURE__ */ _jsxC(DatePickerHeader, {
class: "datePicker_header",
get date() {
return $focusedDate.value;
},
get initialView() {
return $selectedView.value;
},
get locale() {
return props.locale;
},
onMonthYearClick$,
onNextClick$: onNextMonthClick$,
onPrevClick$: onPrevMonthClick$,
[_IMMUTABLE]: {
class: _IMMUTABLE,
date: _fnSignal((p0) => p0.value, [
$focusedDate
], "p0.value"),
initialView: _fnSignal((p0) => p0.value, [
$selectedView
], "p0.value"),
locale: _fnSignal((p0) => p0.locale, [
props
], "p0.locale"),
onMonthYearClick$: _IMMUTABLE,
onNextClick$: _IMMUTABLE,
onPrevClick$: _IMMUTABLE
}
}, 3, "Zl_1"),
/* @__PURE__ */ _jsxQ("div", null, {
class: _fnSignal((p0) => [
"datePicker_body",
`is-${p0.value}`
], [
$selectedView
], '["datePicker_body",`is-${p0.value}`]')
}, $selectedView.value === "calendar" ? /* @__PURE__ */ _jsxC(QwikCalendar, {
class: "datePicker_calendar",
get date() {
return $focusedDate.value;
},
get disabledDates() {
return props.disabledDates;
},
get disabledDays() {
return props.disabledDays;
},
get firstDayOfWeek() {
return props.firstDayOfWeek;
},
get locale() {
return props.locale;
},
max,
min,
onDateChangeByKey$,
ref: $calendarRef,
renderDataCell$,
renderWeekNumber$,
get shortWeekLabel() {
return props.shortWeekLabel;
},
get showWeekNumber() {
return props.showWeekNumber;
},
get weekLabel() {
return props.weekLabel;
},
get weekNumberTemplate() {
return props.weekNumberTemplate;
},
get weekNumberType() {
return props.weekNumberType;
},
[_IMMUTABLE]: {
class: _IMMUTABLE,
date: _fnSignal((p0) => p0.value, [
$focusedDate
], "p0.value"),
disabledDates: _fnSignal((p0) => p0.disabledDates, [
props
], "p0.disabledDates"),
disabledDays: _fnSignal((p0) => p0.disabledDays, [
props
], "p0.disabledDays"),
firstDayOfWeek: _fnSignal((p0) => p0.firstDayOfWeek, [
props
], "p0.firstDayOfWeek"),
locale: _fnSignal((p0) => p0.locale, [
props
], "p0.locale"),
ref: _IMMUTABLE,
shortWeekLabel: _fnSignal((p0) => p0.shortWeekLabel, [
props
], "p0.shortWeekLabel"),
showWeekNumber: _fnSignal((p0) => p0.showWeekNumber, [
props
], "p0.showWeekNumber"),
weekLabel: _fnSignal((p0) => p0.weekLabel, [
props
], "p0.weekLabel"),
weekNumberTemplate: _fnSignal((p0) => p0.weekNumberTemplate, [
props
], "p0.weekNumberTemplate"),
weekNumberType: _fnSignal((p0) => p0.weekNumberType, [
props
], "p0.weekNumberType")
}
}, 0, "Zl_2") : /* @__PURE__ */ _jsxC(DatePickerYearGrid, {
class: "datePicker_yearGrid",
get locale() {
return props.locale;
},
max: toUTCDate(max ?? defaultMaxDate).getUTCFullYear(),
min: toUTCDate(min ?? defaultMinDate).getUTCFullYear(),
onYearChange$,
get selectedYear() {
return $selectedDate.value.getUTCFullYear();
},
[_IMMUTABLE]: {
class: _IMMUTABLE,
locale: _fnSignal((p0) => p0.locale, [
props
], "p0.locale"),
onYearChange$: _IMMUTABLE,
selectedYear: _fnSignal((p0) => p0.value.getUTCFullYear(), [
$selectedDate
], "p0.value.getUTCFullYear()")
}
}, 3, "Zl_3"), 1, null),
footer
]
});
}, "QwikDatePicker_component_QZdOzDzefMg"));
export {
QwikDatePicker
};