55291c72de6ddc144c107a515efa19ab461eeba34db723652fb0a839fac8a951e3ba93d9104da74178d2241d340310c459665679f2059785154e49a289272e 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715
  1. import { defineComponent, useAttrs, useSlots, inject, toRef, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withDirectives, withCtx, vShow, withKeys, createBlock, createTextVNode, nextTick } from 'vue';
  2. import dayjs from 'dayjs';
  3. import { ElButton } from '../../../button/index.mjs';
  4. import { ElInput } from '../../../input/index.mjs';
  5. import '../../../time-picker/index.mjs';
  6. import { ElIcon } from '../../../icon/index.mjs';
  7. import { DArrowLeft, ArrowLeft, ArrowRight, DArrowRight } from '@element-plus/icons-vue';
  8. import { panelDatePickProps } from '../props/panel-date-pick.mjs';
  9. import { getValidDateOfMonth, getValidDateOfYear, correctlyParseUserInput } from '../utils.mjs';
  10. import { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants.mjs';
  11. import DateTable from './basic-date-table.mjs';
  12. import MonthTable from './basic-month-table.mjs';
  13. import YearTable from './basic-year-table.mjs';
  14. import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
  15. import { PICKER_BASE_INJECTION_KEY, DEFAULT_FORMATS_TIME, DEFAULT_FORMATS_DATE } from '../../../time-picker/src/constants.mjs';
  16. import { extractTimeFormat, extractDateFormat } from '../../../time-picker/src/utils.mjs';
  17. import { extractFirst } from '../../../../utils/arrays.mjs';
  18. import TimePickPanel from '../../../time-picker/src/time-picker-com/panel-time-pick.mjs';
  19. import ClickOutside from '../../../../directives/click-outside/index.mjs';
  20. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  21. import { useLocale } from '../../../../hooks/use-locale/index.mjs';
  22. import { isArray, isFunction } from '@vue/shared';
  23. import { EVENT_CODE } from '../../../../constants/aria.mjs';
  24. const _sfc_main = /* @__PURE__ */ defineComponent({
  25. __name: "panel-date-pick",
  26. props: panelDatePickProps,
  27. emits: ["pick", "set-picker-option", "panel-change"],
  28. setup(__props, { emit: contextEmit }) {
  29. const props = __props;
  30. const timeWithinRange = (_, __, ___) => true;
  31. const ppNs = useNamespace("picker-panel");
  32. const dpNs = useNamespace("date-picker");
  33. const attrs = useAttrs();
  34. const slots = useSlots();
  35. const { t, lang } = useLocale();
  36. const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
  37. const isDefaultFormat = inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, void 0);
  38. const { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props;
  39. const defaultValue = toRef(pickerBase.props, "defaultValue");
  40. const currentViewRef = ref();
  41. const innerDate = ref(dayjs().locale(lang.value));
  42. const isChangeToNow = ref(false);
  43. let isShortcut = false;
  44. const defaultTimeD = computed(() => {
  45. return dayjs(defaultTime).locale(lang.value);
  46. });
  47. const month = computed(() => {
  48. return innerDate.value.month();
  49. });
  50. const year = computed(() => {
  51. return innerDate.value.year();
  52. });
  53. const selectableRange = ref([]);
  54. const userInputDate = ref(null);
  55. const userInputTime = ref(null);
  56. const checkDateWithinRange = (date) => {
  57. return selectableRange.value.length > 0 ? timeWithinRange(date, selectableRange.value, props.format || "HH:mm:ss") : true;
  58. };
  59. const formatEmit = (emitDayjs) => {
  60. if (defaultTime && !visibleTime.value && !isChangeToNow.value && !isShortcut) {
  61. return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
  62. }
  63. if (showTime.value)
  64. return emitDayjs.millisecond(0);
  65. return emitDayjs.startOf("day");
  66. };
  67. const emit = (value, ...args) => {
  68. if (!value) {
  69. contextEmit("pick", value, ...args);
  70. } else if (isArray(value)) {
  71. const dates = value.map(formatEmit);
  72. contextEmit("pick", dates, ...args);
  73. } else {
  74. contextEmit("pick", formatEmit(value), ...args);
  75. }
  76. userInputDate.value = null;
  77. userInputTime.value = null;
  78. isChangeToNow.value = false;
  79. isShortcut = false;
  80. };
  81. const handleDatePick = async (value, keepOpen) => {
  82. if (selectionMode.value === "date" && dayjs.isDayjs(value)) {
  83. const parsedDateValue = extractFirst(props.parsedValue);
  84. let newDate = parsedDateValue ? parsedDateValue.year(value.year()).month(value.month()).date(value.date()) : value;
  85. if (!checkDateWithinRange(newDate)) {
  86. newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date());
  87. }
  88. innerDate.value = newDate;
  89. emit(newDate, showTime.value || keepOpen);
  90. } else if (selectionMode.value === "week") {
  91. emit(value.date);
  92. } else if (selectionMode.value === "dates") {
  93. emit(value, true);
  94. }
  95. };
  96. const moveByMonth = (forward) => {
  97. const action = forward ? "add" : "subtract";
  98. innerDate.value = innerDate.value[action](1, "month");
  99. handlePanelChange("month");
  100. };
  101. const moveByYear = (forward) => {
  102. const currentDate = innerDate.value;
  103. const action = forward ? "add" : "subtract";
  104. innerDate.value = currentView.value === "year" ? currentDate[action](10, "year") : currentDate[action](1, "year");
  105. handlePanelChange("year");
  106. };
  107. const currentView = ref("date");
  108. const yearLabel = computed(() => {
  109. const yearTranslation = t("el.datepicker.year");
  110. if (currentView.value === "year") {
  111. const startYear = Math.floor(year.value / 10) * 10;
  112. if (yearTranslation) {
  113. return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`;
  114. }
  115. return `${startYear} - ${startYear + 9}`;
  116. }
  117. return `${year.value} ${yearTranslation}`;
  118. });
  119. const handleShortcutClick = (shortcut) => {
  120. const shortcutValue = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
  121. if (shortcutValue) {
  122. isShortcut = true;
  123. emit(dayjs(shortcutValue).locale(lang.value));
  124. return;
  125. }
  126. if (shortcut.onClick) {
  127. shortcut.onClick({
  128. attrs,
  129. slots,
  130. emit: contextEmit
  131. });
  132. }
  133. };
  134. const selectionMode = computed(() => {
  135. const { type } = props;
  136. if (["week", "month", "months", "year", "years", "dates"].includes(type))
  137. return type;
  138. return "date";
  139. });
  140. const isMultipleType = computed(() => {
  141. return selectionMode.value === "dates" || selectionMode.value === "months" || selectionMode.value === "years";
  142. });
  143. const keyboardMode = computed(() => {
  144. return selectionMode.value === "date" ? currentView.value : selectionMode.value;
  145. });
  146. const hasShortcuts = computed(() => !!shortcuts.length);
  147. const handleMonthPick = async (month2, keepOpen) => {
  148. if (selectionMode.value === "month") {
  149. innerDate.value = getValidDateOfMonth(innerDate.value, innerDate.value.year(), month2, lang.value, disabledDate);
  150. emit(innerDate.value, false);
  151. } else if (selectionMode.value === "months") {
  152. emit(month2, keepOpen != null ? keepOpen : true);
  153. } else {
  154. innerDate.value = getValidDateOfMonth(innerDate.value, innerDate.value.year(), month2, lang.value, disabledDate);
  155. currentView.value = "date";
  156. if (["month", "year", "date", "week"].includes(selectionMode.value)) {
  157. emit(innerDate.value, true);
  158. await nextTick();
  159. handleFocusPicker();
  160. }
  161. }
  162. handlePanelChange("month");
  163. };
  164. const handleYearPick = async (year2, keepOpen) => {
  165. if (selectionMode.value === "year") {
  166. const data = innerDate.value.startOf("year").year(year2);
  167. innerDate.value = getValidDateOfYear(data, lang.value, disabledDate);
  168. emit(innerDate.value, false);
  169. } else if (selectionMode.value === "years") {
  170. emit(year2, keepOpen != null ? keepOpen : true);
  171. } else {
  172. const data = innerDate.value.year(year2);
  173. innerDate.value = getValidDateOfYear(data, lang.value, disabledDate);
  174. currentView.value = "month";
  175. if (["month", "year", "date", "week"].includes(selectionMode.value)) {
  176. emit(innerDate.value, true);
  177. await nextTick();
  178. handleFocusPicker();
  179. }
  180. }
  181. handlePanelChange("year");
  182. };
  183. const showPicker = async (view) => {
  184. if (props.disabled)
  185. return;
  186. currentView.value = view;
  187. await nextTick();
  188. handleFocusPicker();
  189. };
  190. const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
  191. const footerVisible = computed(() => {
  192. const showDateFooter = showTime.value || selectionMode.value === "dates";
  193. const showYearFooter = selectionMode.value === "years";
  194. const showMonthFooter = selectionMode.value === "months";
  195. const isDateView = currentView.value === "date";
  196. const isYearView = currentView.value === "year";
  197. const isMonthView = currentView.value === "month";
  198. return showDateFooter && isDateView || showYearFooter && isYearView || showMonthFooter && isMonthView;
  199. });
  200. const footerFilled = computed(() => !isMultipleType.value && props.showNow || props.showConfirm);
  201. const disabledConfirm = computed(() => {
  202. if (!disabledDate)
  203. return false;
  204. if (!props.parsedValue)
  205. return true;
  206. if (isArray(props.parsedValue)) {
  207. return disabledDate(props.parsedValue[0].toDate());
  208. }
  209. return disabledDate(props.parsedValue.toDate());
  210. });
  211. const onConfirm = () => {
  212. if (isMultipleType.value) {
  213. emit(props.parsedValue);
  214. } else {
  215. let result = extractFirst(props.parsedValue);
  216. if (!result) {
  217. const defaultTimeD2 = dayjs(defaultTime).locale(lang.value);
  218. const defaultValueD = getDefaultValue();
  219. result = defaultTimeD2.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date());
  220. }
  221. innerDate.value = result;
  222. emit(result);
  223. }
  224. };
  225. const disabledNow = computed(() => {
  226. if (!disabledDate)
  227. return false;
  228. return disabledDate(dayjs().locale(lang.value).toDate());
  229. });
  230. const changeToNow = () => {
  231. const now = dayjs().locale(lang.value);
  232. const nowDate = now.toDate();
  233. isChangeToNow.value = true;
  234. if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
  235. innerDate.value = dayjs().locale(lang.value);
  236. emit(innerDate.value);
  237. }
  238. };
  239. const timeFormat = computed(() => {
  240. return props.timeFormat || extractTimeFormat(props.format) || DEFAULT_FORMATS_TIME;
  241. });
  242. const dateFormat = computed(() => {
  243. return props.dateFormat || extractDateFormat(props.format) || DEFAULT_FORMATS_DATE;
  244. });
  245. const visibleTime = computed(() => {
  246. if (userInputTime.value)
  247. return userInputTime.value;
  248. if (!props.parsedValue && !defaultValue.value)
  249. return;
  250. const dateValue = extractFirst(props.parsedValue) || innerDate.value;
  251. return dateValue.format(timeFormat.value);
  252. });
  253. const visibleDate = computed(() => {
  254. if (userInputDate.value)
  255. return userInputDate.value;
  256. if (!props.parsedValue && !defaultValue.value)
  257. return;
  258. const dateValue = extractFirst(props.parsedValue) || innerDate.value;
  259. return dateValue.format(dateFormat.value);
  260. });
  261. const timePickerVisible = ref(false);
  262. const onTimePickerInputFocus = () => {
  263. timePickerVisible.value = true;
  264. };
  265. const handleTimePickClose = () => {
  266. timePickerVisible.value = false;
  267. };
  268. const getUnits = (date) => {
  269. return {
  270. hour: date.hour(),
  271. minute: date.minute(),
  272. second: date.second(),
  273. year: date.year(),
  274. month: date.month(),
  275. date: date.date()
  276. };
  277. };
  278. const handleTimePick = (value, visible, first) => {
  279. const { hour, minute, second } = getUnits(value);
  280. const parsedDateValue = extractFirst(props.parsedValue);
  281. const newDate = parsedDateValue ? parsedDateValue.hour(hour).minute(minute).second(second) : value;
  282. innerDate.value = newDate;
  283. emit(innerDate.value, true);
  284. if (!first) {
  285. timePickerVisible.value = visible;
  286. }
  287. };
  288. const handleVisibleTimeChange = (value) => {
  289. const newDate = dayjs(value, timeFormat.value).locale(lang.value);
  290. if (newDate.isValid() && checkDateWithinRange(newDate)) {
  291. const { year: year2, month: month2, date } = getUnits(innerDate.value);
  292. innerDate.value = newDate.year(year2).month(month2).date(date);
  293. userInputTime.value = null;
  294. timePickerVisible.value = false;
  295. emit(innerDate.value, true);
  296. }
  297. };
  298. const handleVisibleDateChange = (value) => {
  299. const newDate = correctlyParseUserInput(value, dateFormat.value, lang.value, isDefaultFormat);
  300. if (newDate.isValid()) {
  301. if (disabledDate && disabledDate(newDate.toDate())) {
  302. return;
  303. }
  304. const { hour, minute, second } = getUnits(innerDate.value);
  305. innerDate.value = newDate.hour(hour).minute(minute).second(second);
  306. userInputDate.value = null;
  307. emit(innerDate.value, true);
  308. }
  309. };
  310. const isValidValue = (date) => {
  311. return dayjs.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true);
  312. };
  313. const formatToString = (value) => {
  314. return isArray(value) ? value.map((_) => _.format(props.format)) : value.format(props.format);
  315. };
  316. const parseUserInput = (value) => {
  317. return correctlyParseUserInput(value, props.format, lang.value, isDefaultFormat);
  318. };
  319. const getDefaultValue = () => {
  320. const parseDate = dayjs(defaultValue.value).locale(lang.value);
  321. if (!defaultValue.value) {
  322. const defaultTimeDValue = defaultTimeD.value;
  323. return dayjs().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value);
  324. }
  325. return parseDate;
  326. };
  327. const handleFocusPicker = () => {
  328. var _a;
  329. if (["week", "month", "year", "date"].includes(selectionMode.value)) {
  330. (_a = currentViewRef.value) == null ? void 0 : _a.focus();
  331. }
  332. };
  333. const _handleFocusPicker = () => {
  334. handleFocusPicker();
  335. if (selectionMode.value === "week") {
  336. handleKeyControl(EVENT_CODE.down);
  337. }
  338. };
  339. const handleKeydownTable = (event) => {
  340. const { code } = event;
  341. const validCode = [
  342. EVENT_CODE.up,
  343. EVENT_CODE.down,
  344. EVENT_CODE.left,
  345. EVENT_CODE.right,
  346. EVENT_CODE.home,
  347. EVENT_CODE.end,
  348. EVENT_CODE.pageUp,
  349. EVENT_CODE.pageDown
  350. ];
  351. if (validCode.includes(code)) {
  352. handleKeyControl(code);
  353. event.stopPropagation();
  354. event.preventDefault();
  355. }
  356. if ([EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(code) && userInputDate.value === null && userInputTime.value === null) {
  357. event.preventDefault();
  358. emit(innerDate.value, false);
  359. }
  360. };
  361. const handleKeyControl = (code) => {
  362. var _a;
  363. const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE;
  364. const mapping = {
  365. year: {
  366. [up]: -4,
  367. [down]: 4,
  368. [left]: -1,
  369. [right]: 1,
  370. offset: (date, step) => date.setFullYear(date.getFullYear() + step)
  371. },
  372. month: {
  373. [up]: -4,
  374. [down]: 4,
  375. [left]: -1,
  376. [right]: 1,
  377. offset: (date, step) => date.setMonth(date.getMonth() + step)
  378. },
  379. week: {
  380. [up]: -1,
  381. [down]: 1,
  382. [left]: -1,
  383. [right]: 1,
  384. offset: (date, step) => date.setDate(date.getDate() + step * 7)
  385. },
  386. date: {
  387. [up]: -7,
  388. [down]: 7,
  389. [left]: -1,
  390. [right]: 1,
  391. [home]: (date) => -date.getDay(),
  392. [end]: (date) => -date.getDay() + 6,
  393. [pageUp]: (date) => -new Date(date.getFullYear(), date.getMonth(), 0).getDate(),
  394. [pageDown]: (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
  395. offset: (date, step) => date.setDate(date.getDate() + step)
  396. }
  397. };
  398. const newDate = innerDate.value.toDate();
  399. while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) {
  400. const map = mapping[keyboardMode.value];
  401. if (!map)
  402. return;
  403. map.offset(newDate, isFunction(map[code]) ? map[code](newDate) : (_a = map[code]) != null ? _a : 0);
  404. if (disabledDate && disabledDate(newDate)) {
  405. break;
  406. }
  407. const result = dayjs(newDate).locale(lang.value);
  408. innerDate.value = result;
  409. contextEmit("pick", result, true);
  410. break;
  411. }
  412. };
  413. const handlePanelChange = (mode) => {
  414. contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
  415. };
  416. watch(() => selectionMode.value, (val) => {
  417. if (["month", "year"].includes(val)) {
  418. currentView.value = val;
  419. return;
  420. } else if (val === "years") {
  421. currentView.value = "year";
  422. return;
  423. } else if (val === "months") {
  424. currentView.value = "month";
  425. return;
  426. }
  427. currentView.value = "date";
  428. }, { immediate: true });
  429. watch(() => defaultValue.value, (val) => {
  430. if (val) {
  431. innerDate.value = getDefaultValue();
  432. }
  433. }, { immediate: true });
  434. watch(() => props.parsedValue, (val) => {
  435. if (val) {
  436. if (isMultipleType.value)
  437. return;
  438. if (isArray(val))
  439. return;
  440. innerDate.value = val;
  441. } else {
  442. innerDate.value = getDefaultValue();
  443. }
  444. }, { immediate: true });
  445. contextEmit("set-picker-option", ["isValidValue", isValidValue]);
  446. contextEmit("set-picker-option", ["formatToString", formatToString]);
  447. contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
  448. contextEmit("set-picker-option", ["handleFocusPicker", _handleFocusPicker]);
  449. return (_ctx, _cache) => {
  450. return openBlock(), createElementBlock("div", {
  451. class: normalizeClass([
  452. unref(ppNs).b(),
  453. unref(dpNs).b(),
  454. unref(ppNs).is("border", _ctx.border),
  455. unref(ppNs).is("disabled", _ctx.disabled),
  456. {
  457. "has-sidebar": _ctx.$slots.sidebar || unref(hasShortcuts),
  458. "has-time": unref(showTime)
  459. }
  460. ])
  461. }, [
  462. createElementVNode("div", {
  463. class: normalizeClass(unref(ppNs).e("body-wrapper"))
  464. }, [
  465. renderSlot(_ctx.$slots, "sidebar", {
  466. class: normalizeClass(unref(ppNs).e("sidebar"))
  467. }),
  468. unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
  469. key: 0,
  470. class: normalizeClass(unref(ppNs).e("sidebar"))
  471. }, [
  472. (openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
  473. return openBlock(), createElementBlock("button", {
  474. key,
  475. type: "button",
  476. disabled: _ctx.disabled,
  477. class: normalizeClass(unref(ppNs).e("shortcut")),
  478. onClick: ($event) => handleShortcutClick(shortcut)
  479. }, toDisplayString(shortcut.text), 11, ["disabled", "onClick"]);
  480. }), 128))
  481. ], 2)) : createCommentVNode("v-if", true),
  482. createElementVNode("div", {
  483. class: normalizeClass(unref(ppNs).e("body"))
  484. }, [
  485. unref(showTime) ? (openBlock(), createElementBlock("div", {
  486. key: 0,
  487. class: normalizeClass(unref(dpNs).e("time-header"))
  488. }, [
  489. createElementVNode("span", {
  490. class: normalizeClass(unref(dpNs).e("editor-wrap"))
  491. }, [
  492. createVNode(unref(ElInput), {
  493. placeholder: unref(t)("el.datepicker.selectDate"),
  494. "model-value": unref(visibleDate),
  495. size: "small",
  496. "validate-event": false,
  497. disabled: _ctx.disabled,
  498. onInput: (val) => userInputDate.value = val,
  499. onChange: handleVisibleDateChange
  500. }, null, 8, ["placeholder", "model-value", "disabled", "onInput"])
  501. ], 2),
  502. withDirectives((openBlock(), createElementBlock("span", {
  503. class: normalizeClass(unref(dpNs).e("editor-wrap"))
  504. }, [
  505. createVNode(unref(ElInput), {
  506. placeholder: unref(t)("el.datepicker.selectTime"),
  507. "model-value": unref(visibleTime),
  508. size: "small",
  509. "validate-event": false,
  510. disabled: _ctx.disabled,
  511. onFocus: onTimePickerInputFocus,
  512. onInput: (val) => userInputTime.value = val,
  513. onChange: handleVisibleTimeChange
  514. }, null, 8, ["placeholder", "model-value", "disabled", "onInput"]),
  515. createVNode(unref(TimePickPanel), {
  516. visible: timePickerVisible.value,
  517. format: unref(timeFormat),
  518. "parsed-value": innerDate.value,
  519. onPick: handleTimePick
  520. }, null, 8, ["visible", "format", "parsed-value"])
  521. ], 2)), [
  522. [unref(ClickOutside), handleTimePickClose]
  523. ])
  524. ], 2)) : createCommentVNode("v-if", true),
  525. withDirectives(createElementVNode("div", {
  526. class: normalizeClass([
  527. unref(dpNs).e("header"),
  528. (currentView.value === "year" || currentView.value === "month") && unref(dpNs).e("header--bordered")
  529. ])
  530. }, [
  531. createElementVNode("span", {
  532. class: normalizeClass(unref(dpNs).e("prev-btn"))
  533. }, [
  534. createElementVNode("button", {
  535. type: "button",
  536. "aria-label": unref(t)(`el.datepicker.prevYear`),
  537. class: normalizeClass(["d-arrow-left", unref(ppNs).e("icon-btn")]),
  538. disabled: _ctx.disabled,
  539. onClick: ($event) => moveByYear(false)
  540. }, [
  541. renderSlot(_ctx.$slots, "prev-year", {}, () => [
  542. createVNode(unref(ElIcon), null, {
  543. default: withCtx(() => [
  544. createVNode(unref(DArrowLeft))
  545. ]),
  546. _: 1
  547. })
  548. ])
  549. ], 10, ["aria-label", "disabled", "onClick"]),
  550. withDirectives(createElementVNode("button", {
  551. type: "button",
  552. "aria-label": unref(t)(`el.datepicker.prevMonth`),
  553. class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
  554. disabled: _ctx.disabled,
  555. onClick: ($event) => moveByMonth(false)
  556. }, [
  557. renderSlot(_ctx.$slots, "prev-month", {}, () => [
  558. createVNode(unref(ElIcon), null, {
  559. default: withCtx(() => [
  560. createVNode(unref(ArrowLeft))
  561. ]),
  562. _: 1
  563. })
  564. ])
  565. ], 10, ["aria-label", "disabled", "onClick"]), [
  566. [vShow, currentView.value === "date"]
  567. ])
  568. ], 2),
  569. createElementVNode("span", {
  570. role: "button",
  571. class: normalizeClass(unref(dpNs).e("header-label")),
  572. "aria-live": "polite",
  573. tabindex: "0",
  574. onKeydown: withKeys(($event) => showPicker("year"), ["enter"]),
  575. onClick: ($event) => showPicker("year")
  576. }, toDisplayString(unref(yearLabel)), 43, ["onKeydown", "onClick"]),
  577. withDirectives(createElementVNode("span", {
  578. role: "button",
  579. "aria-live": "polite",
  580. tabindex: "0",
  581. class: normalizeClass([
  582. unref(dpNs).e("header-label"),
  583. { active: currentView.value === "month" }
  584. ]),
  585. onKeydown: withKeys(($event) => showPicker("month"), ["enter"]),
  586. onClick: ($event) => showPicker("month")
  587. }, toDisplayString(unref(t)(`el.datepicker.month${unref(month) + 1}`)), 43, ["onKeydown", "onClick"]), [
  588. [vShow, currentView.value === "date"]
  589. ]),
  590. createElementVNode("span", {
  591. class: normalizeClass(unref(dpNs).e("next-btn"))
  592. }, [
  593. withDirectives(createElementVNode("button", {
  594. type: "button",
  595. "aria-label": unref(t)(`el.datepicker.nextMonth`),
  596. class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
  597. disabled: _ctx.disabled,
  598. onClick: ($event) => moveByMonth(true)
  599. }, [
  600. renderSlot(_ctx.$slots, "next-month", {}, () => [
  601. createVNode(unref(ElIcon), null, {
  602. default: withCtx(() => [
  603. createVNode(unref(ArrowRight))
  604. ]),
  605. _: 1
  606. })
  607. ])
  608. ], 10, ["aria-label", "disabled", "onClick"]), [
  609. [vShow, currentView.value === "date"]
  610. ]),
  611. createElementVNode("button", {
  612. type: "button",
  613. "aria-label": unref(t)(`el.datepicker.nextYear`),
  614. class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
  615. disabled: _ctx.disabled,
  616. onClick: ($event) => moveByYear(true)
  617. }, [
  618. renderSlot(_ctx.$slots, "next-year", {}, () => [
  619. createVNode(unref(ElIcon), null, {
  620. default: withCtx(() => [
  621. createVNode(unref(DArrowRight))
  622. ]),
  623. _: 1
  624. })
  625. ])
  626. ], 10, ["aria-label", "disabled", "onClick"])
  627. ], 2)
  628. ], 2), [
  629. [vShow, currentView.value !== "time"]
  630. ]),
  631. createElementVNode("div", {
  632. class: normalizeClass(unref(ppNs).e("content")),
  633. onKeydown: handleKeydownTable
  634. }, [
  635. currentView.value === "date" ? (openBlock(), createBlock(DateTable, {
  636. key: 0,
  637. ref_key: "currentViewRef",
  638. ref: currentViewRef,
  639. "selection-mode": unref(selectionMode),
  640. date: innerDate.value,
  641. "parsed-value": _ctx.parsedValue,
  642. "disabled-date": unref(disabledDate),
  643. disabled: _ctx.disabled,
  644. "cell-class-name": unref(cellClassName),
  645. "show-week-number": _ctx.showWeekNumber,
  646. onPick: handleDatePick
  647. }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name", "show-week-number"])) : createCommentVNode("v-if", true),
  648. currentView.value === "year" ? (openBlock(), createBlock(YearTable, {
  649. key: 1,
  650. ref_key: "currentViewRef",
  651. ref: currentViewRef,
  652. "selection-mode": unref(selectionMode),
  653. date: innerDate.value,
  654. "disabled-date": unref(disabledDate),
  655. disabled: _ctx.disabled,
  656. "parsed-value": _ctx.parsedValue,
  657. "cell-class-name": unref(cellClassName),
  658. onPick: handleYearPick
  659. }, null, 8, ["selection-mode", "date", "disabled-date", "disabled", "parsed-value", "cell-class-name"])) : createCommentVNode("v-if", true),
  660. currentView.value === "month" ? (openBlock(), createBlock(MonthTable, {
  661. key: 2,
  662. ref_key: "currentViewRef",
  663. ref: currentViewRef,
  664. "selection-mode": unref(selectionMode),
  665. date: innerDate.value,
  666. "parsed-value": _ctx.parsedValue,
  667. "disabled-date": unref(disabledDate),
  668. disabled: _ctx.disabled,
  669. "cell-class-name": unref(cellClassName),
  670. onPick: handleMonthPick
  671. }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name"])) : createCommentVNode("v-if", true)
  672. ], 34)
  673. ], 2)
  674. ], 2),
  675. _ctx.showFooter && unref(footerVisible) && unref(footerFilled) ? (openBlock(), createElementBlock("div", {
  676. key: 0,
  677. class: normalizeClass(unref(ppNs).e("footer"))
  678. }, [
  679. withDirectives(createVNode(unref(ElButton), {
  680. text: "",
  681. size: "small",
  682. class: normalizeClass(unref(ppNs).e("link-btn")),
  683. disabled: unref(disabledNow),
  684. onClick: changeToNow
  685. }, {
  686. default: withCtx(() => [
  687. createTextVNode(toDisplayString(unref(t)("el.datepicker.now")), 1)
  688. ]),
  689. _: 1
  690. }, 8, ["class", "disabled"]), [
  691. [vShow, !unref(isMultipleType) && _ctx.showNow]
  692. ]),
  693. _ctx.showConfirm ? (openBlock(), createBlock(unref(ElButton), {
  694. key: 0,
  695. plain: "",
  696. size: "small",
  697. class: normalizeClass(unref(ppNs).e("link-btn")),
  698. disabled: unref(disabledConfirm),
  699. onClick: onConfirm
  700. }, {
  701. default: withCtx(() => [
  702. createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
  703. ]),
  704. _: 1
  705. }, 8, ["class", "disabled"])) : createCommentVNode("v-if", true)
  706. ], 2)) : createCommentVNode("v-if", true)
  707. ], 2);
  708. };
  709. }
  710. });
  711. var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "panel-date-pick.vue"]]);
  712. export { DatePickPanel as default };
  713. //# sourceMappingURL=panel-date-pick.mjs.map