onedeuxtriseigo.nullpo.dev
A privacy-first, self-hosted, fully open source personal knowledge management software, written in typescript and golang. (PERSONAL FORK)
1import * as dayjs from "dayjs";
2import {genCellValueByElement, updateCellsValue} from "./cell";
3
4export const getDateHTML = (cellElements: HTMLElement[]) => {
5 const cellValue = genCellValueByElement("date", cellElements[0]).date;
6 const isNotTime = cellValue.isNotTime;
7 let value = "";
8 const currentDate = new Date().getTime();
9 if (cellValue.isNotEmpty) {
10 value = dayjs(cellValue.content).format(isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
11 const year = value.split("-")[0];
12 if (year.length !== 4) {
13 value = new Array(4 - year.length).fill(0).join("") + value;
14 }
15 } else {
16 value = dayjs(currentDate).format(isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
17 }
18 let value2 = "";
19 if (cellValue.isNotEmpty2) {
20 value2 = dayjs(cellValue.content2).format(isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
21 const year = value2.split("-")[0];
22 if (year.length !== 4) {
23 value2 = new Array(4 - year.length).fill(0).join("") + value2;
24 }
25 } else if (cellValue.hasEndDate) {
26 value2 = dayjs(currentDate).format(isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
27 }
28 return `<div class="b3-menu__items">
29<div>
30 <input type="${isNotTime ? "date" : "datetime-local"}" max="${isNotTime ? "9999-12-31" : "9999-12-31 23:59"}" value="${value}" data-value="${dayjs(cellValue.content || currentDate).format("YYYY-MM-DD HH:mm")}" class="b3-text-field fn__size200" style="margin-top: 4px;"><br>
31 <input type="${isNotTime ? "date" : "datetime-local"}" max="${isNotTime ? "9999-12-31" : "9999-12-31 23:59"}" value="${value2}" data-value="${cellValue.isNotEmpty2 ? dayjs(cellValue.content2).format("YYYY-MM-DD HH:mm") : ""}" style="margin-top: 8px;margin-bottom: 4px" class="b3-text-field fn__size200${cellValue.hasEndDate ? "" : " fn__none"}">
32 <button class="b3-menu__separator"></button>
33 <label class="b3-menu__item">
34 <span class="fn__flex-center">${window.siyuan.languages.endDate}</span>
35 <span class="fn__space fn__flex-1"></span>
36 <input type="checkbox" class="b3-switch b3-switch--menu"${cellValue.hasEndDate ? " checked" : ""}>
37 </label>
38 <label class="b3-menu__item">
39 <span class="fn__flex-center">${window.siyuan.languages.includeTime}</span>
40 <span class="fn__space fn__flex-1"></span>
41 <input type="checkbox" class="b3-switch b3-switch--menu"${isNotTime ? "" : " checked"}>
42 </label>
43 <button class="b3-menu__separator"></button>
44 <button class="b3-menu__item" data-type="clearDate">
45 <svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg>
46 <span class="b3-menu__label">${window.siyuan.languages.clear}</span>
47 </button>
48</div>
49</div>`;
50};
51
52export const bindDateEvent = (options: {
53 protyle: IProtyle,
54 data: IAV,
55 menuElement: HTMLElement,
56 blockElement: Element,
57 cellElements: HTMLElement[]
58}) => {
59 const inputElements: NodeListOf<HTMLInputElement> = options.menuElement.querySelectorAll("input");
60 inputElements.forEach(item => {
61 item.addEventListener("keydown", (event) => {
62 if (event.isComposing) {
63 return;
64 }
65 if (event.key === "Enter") {
66 updateCellsValue(options.protyle, options.blockElement as HTMLElement, {
67 content: getFullYearTime(inputElements[0].dataset.value) || 0,
68 isNotEmpty: inputElements[0].value !== "",
69 content2: getFullYearTime(inputElements[1].dataset.value) || 0,
70 isNotEmpty2: inputElements[1].value !== "",
71 hasEndDate: inputElements[2].checked,
72 isNotTime: !inputElements[3].checked,
73 }, options.cellElements);
74 document.querySelector(".av__panel")?.dispatchEvent(new CustomEvent("click", {detail: "close"}));
75 }
76 });
77 });
78 inputElements[0].addEventListener("change", () => {
79 inputElements[0].dataset.value = inputElements[0].value.length > 10 ? inputElements[0].value : inputElements[0].value + " 00:00";
80 });
81 inputElements[1].addEventListener("change", () => {
82 inputElements[1].dataset.value = inputElements[1].value.length > 10 ? inputElements[1].value : inputElements[1].value + " 00:00";
83 });
84 inputElements[2].addEventListener("change", () => {
85 if (inputElements[2].checked) {
86 if (!inputElements[1].dataset.value) {
87 const currentDate = new Date().getTime();
88 inputElements[1].dataset.value = dayjs(currentDate).format("YYYY-MM-DD HH:mm");
89 inputElements[1].value = dayjs(currentDate).format(inputElements[3].checked ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD");
90 }
91 inputElements[1].classList.remove("fn__none");
92 } else {
93 inputElements[1].classList.add("fn__none");
94 }
95 });
96 inputElements[3].addEventListener("change", () => {
97 inputElements[0].value = "";
98 inputElements[1].value = "";
99 if (inputElements[3].checked) {
100 inputElements[0].setAttribute("type", "datetime-local");
101 inputElements[1].setAttribute("type", "datetime-local");
102 inputElements[0].setAttribute("max", "9999-12-31 23:59");
103 inputElements[1].setAttribute("max", "9999-12-31 23:59");
104 inputElements[0].value = inputElements[0].dataset.value;
105 inputElements[1].value = inputElements[1].dataset.value;
106 } else {
107 inputElements[0].setAttribute("type", "date");
108 inputElements[1].setAttribute("type", "date");
109 inputElements[0].setAttribute("max", "9999-12-31");
110 inputElements[1].setAttribute("max", "9999-12-31");
111 inputElements[0].value = inputElements[0].dataset.value.substring(0, 10);
112 inputElements[1].value = inputElements[1].dataset.value.substring(0, 10);
113 }
114 });
115 return () => {
116 updateCellsValue(options.protyle, options.blockElement as HTMLElement, {
117 content: getFullYearTime(inputElements[0].dataset.value) || 0,
118 isNotEmpty: inputElements[0].value !== "",
119 content2: getFullYearTime(inputElements[1].dataset.value) || 0,
120 isNotEmpty2: inputElements[1].value !== "",
121 hasEndDate: inputElements[2].checked,
122 isNotTime: !inputElements[3].checked,
123 }, options.cellElements);
124 };
125};
126
127const getFullYearTime = (dateStr: string) => {
128 const year = dateStr.split("-")[0];
129 const date = new Date(dateStr);
130 if (year.startsWith("00") || year.startsWith("000") || year.length < 3) {
131 date.setFullYear(parseInt(year));
132 return date.getTime();
133 } else {
134 return date.getTime();
135 }
136};