From 0892e5d17c1bc3ef8784960c757ae751e61700f8 Mon Sep 17 00:00:00 2001 From: Theeraphat Sorasetsakul Date: Mon, 6 Jan 2025 11:16:49 +0700 Subject: [PATCH 1/4] docs(datetime-picker): fix code in sandbox --- documents/src/pages/elements/datetime-picker.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/documents/src/pages/elements/datetime-picker.md b/documents/src/pages/elements/datetime-picker.md index c586fc9c20..058886f75c 100644 --- a/documents/src/pages/elements/datetime-picker.md +++ b/documents/src/pages/elements/datetime-picker.md @@ -376,6 +376,7 @@ document.getElementById('3-months').addEventListener('tap', () => { const to = now.setSeconds(0, 0); const from = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate(), now.getHours(), now.getMinutes()); rangePicker.values = toValues(from, to); + rangePicker.views = [formatToDateTime(from),formatToDateTime(to)]; }); ``` ```css @@ -546,7 +547,7 @@ datetimePicker.addEventListener('before-cell-render', (event) => { const { cell, calendar } = event.detail; const prefix = calendar.id === 'calendar-to' ? 'to-' : 'from-'; const customCell = sourceDatetimePicker.querySelector(`[slot="${prefix}${cell.value}"]`); - + // skip style overriding if there is no content for the cell if (!customCell) { return; } @@ -576,7 +577,7 @@ datetimePicker?.addEventListener('before-cell-render', (event) => { // skip style overriding if there is no content for the cell if (!customCell) { return; } - + // use text from component as calendar has built-in locale support // for instance, Mai instead of May in German customCell.textContent = cell.text; @@ -615,7 +616,7 @@ datetimePicker?.addEventListener('before-cell-render', (event) => { if (!customCell) { return; } - + // skip style overriding if there is no content for the cell if (!customCell) { return; } @@ -738,7 +739,7 @@ ef-datetime-picker .custom-cell.selected { ``` ```html - ``` From dfd565eb90031b59467c917bd0002153bd1352cc Mon Sep 17 00:00:00 2001 From: Theeraphat Sorasetsakul Date: Mon, 6 Jan 2025 14:04:38 +0700 Subject: [PATCH 2/4] docs(datetime-picker): fix code in sandbox --- documents/src/pages/elements/datetime-picker.md | 8 +++++--- packages/elements/src/datetime-picker/__demo__/index.html | 4 ++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/documents/src/pages/elements/datetime-picker.md b/documents/src/pages/elements/datetime-picker.md index 058886f75c..c95864b93c 100644 --- a/documents/src/pages/elements/datetime-picker.md +++ b/documents/src/pages/elements/datetime-picker.md @@ -349,8 +349,7 @@ const formatToDateTime = (value) => { const date = pad(value.getDate(), 2); const hours = pad(value.getHours(), 2); const minutes = pad(value.getMinutes(), 2); - const seconds = pad(value.getSeconds(), 2); - return year + '-' + month + '-' + date + 'T' + hours + ':' + minutes + ':' + seconds; + return year + '-' + month + '-' + date + 'T' + hours + ':' + minutes; }; const toValues = (from, to) => [formatToDateTime(from), formatToDateTime(to)]; @@ -359,24 +358,27 @@ document.getElementById('today').addEventListener('tap', () => { const to = new Date().setSeconds(0, 0); const from = new Date(to).setHours(0, 0, 0, 0); rangePicker.values = toValues(from, to); + rangePicker.views = toValues(from, to); }); document.getElementById('1-week').addEventListener('tap', () => { const to = new Date().setSeconds(0, 0); const from = new Date(to) - 7 * 24 * 60 * 60 * 1000; rangePicker.values = toValues(from, to); + rangePicker.views = toValues(from, to); }); document.getElementById('1-month').addEventListener('tap', () => { const now = new Date(); const to = now.setSeconds(0, 0); const from = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate(), now.getHours(), now.getMinutes()); rangePicker.values = toValues(from, to); + rangePicker.views = toValues(from, to); }); document.getElementById('3-months').addEventListener('tap', () => { const now = new Date(); const to = now.setSeconds(0, 0); const from = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate(), now.getHours(), now.getMinutes()); rangePicker.values = toValues(from, to); - rangePicker.views = [formatToDateTime(from),formatToDateTime(to)]; + rangePicker.views = toValues(from, to); }); ``` ```css diff --git a/packages/elements/src/datetime-picker/__demo__/index.html b/packages/elements/src/datetime-picker/__demo__/index.html index 10778ffccc..8e8ba8bc1b 100644 --- a/packages/elements/src/datetime-picker/__demo__/index.html +++ b/packages/elements/src/datetime-picker/__demo__/index.html @@ -468,11 +468,13 @@ const to = new Date().setSeconds(0, 0); const from = new Date(to).setHours(0, 0, 0, 0); rangePicker.values = toValues(new Date(from), new Date(to)); + rangePicker.views = toValues(from, new Date(to)); }); document.getElementById('default-range-1-week').addEventListener('tap', () => { const to = new Date().setSeconds(0, 0); const from = new Date(to) - 7 * 24 * 60 * 60 * 1000; rangePicker.values = toValues(new Date(from), new Date(to)); + rangePicker.views = toValues(from, new Date(to)); }); document.getElementById('default-range-1-month').addEventListener('tap', () => { const now = new Date(); @@ -485,6 +487,7 @@ now.getMinutes() ); rangePicker.values = toValues(from, new Date(to)); + rangePicker.views = toValues(from, new Date(to)); }); document.getElementById('default-range-3-month').addEventListener('tap', () => { const now = new Date(); @@ -497,6 +500,7 @@ now.getMinutes() ); rangePicker.values = toValues(from, new Date(to)); + rangePicker.views = toValues(from, new Date(to)); }); })(); From 20a55eacaf04742762933b5c44c1118b5962fe5e Mon Sep 17 00:00:00 2001 From: Theeraphat-Sorasetsakul <86758473+Theeraphat-Sorasetsakul@users.noreply.github.com> Date: Tue, 14 Jan 2025 14:35:49 +0700 Subject: [PATCH 3/4] Update packages/elements/src/datetime-picker/__demo__/index.html Co-authored-by: wattachai <117723407+wattachai-lseg@users.noreply.github.com> --- packages/elements/src/datetime-picker/__demo__/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements/src/datetime-picker/__demo__/index.html b/packages/elements/src/datetime-picker/__demo__/index.html index 8e8ba8bc1b..9be43047fa 100644 --- a/packages/elements/src/datetime-picker/__demo__/index.html +++ b/packages/elements/src/datetime-picker/__demo__/index.html @@ -468,7 +468,7 @@ const to = new Date().setSeconds(0, 0); const from = new Date(to).setHours(0, 0, 0, 0); rangePicker.values = toValues(new Date(from), new Date(to)); - rangePicker.views = toValues(from, new Date(to)); + rangePicker.views = toValues(from, to); }); document.getElementById('default-range-1-week').addEventListener('tap', () => { const to = new Date().setSeconds(0, 0); From 096eed22e9003f8f8b04c5d44eb132e0b573897a Mon Sep 17 00:00:00 2001 From: Theeraphat Sorasetsakul Date: Tue, 14 Jan 2025 15:33:49 +0700 Subject: [PATCH 4/4] docs(datetime-picker): update docs --- .../src/pages/elements/datetime-picker.md | 16 ++++++++--- .../src/datetime-picker/__demo__/index.html | 28 +++++++++++-------- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/documents/src/pages/elements/datetime-picker.md b/documents/src/pages/elements/datetime-picker.md index c95864b93c..be3bde840d 100644 --- a/documents/src/pages/elements/datetime-picker.md +++ b/documents/src/pages/elements/datetime-picker.md @@ -353,32 +353,40 @@ const formatToDateTime = (value) => { }; const toValues = (from, to) => [formatToDateTime(from), formatToDateTime(to)]; +const toViews = (from, to) => { + from = new Date(from) + to = new Date(to) + const year = (value) => pad(value.getFullYear(), 4); + const month = (value) => pad(value.getMonth() + 1, 2); + return [`${year(from)}-${month(from)}`, `${year(to)}-${month(to)}`] +}; + const rangePicker = document.querySelector('ef-datetime-picker'); document.getElementById('today').addEventListener('tap', () => { const to = new Date().setSeconds(0, 0); const from = new Date(to).setHours(0, 0, 0, 0); rangePicker.values = toValues(from, to); - rangePicker.views = toValues(from, to); + rangePicker.views = toViews(from, to); }); document.getElementById('1-week').addEventListener('tap', () => { const to = new Date().setSeconds(0, 0); const from = new Date(to) - 7 * 24 * 60 * 60 * 1000; rangePicker.values = toValues(from, to); - rangePicker.views = toValues(from, to); + rangePicker.views = toViews(from, to); }); document.getElementById('1-month').addEventListener('tap', () => { const now = new Date(); const to = now.setSeconds(0, 0); const from = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate(), now.getHours(), now.getMinutes()); rangePicker.values = toValues(from, to); - rangePicker.views = toValues(from, to); + rangePicker.views = toViews(from, to); }); document.getElementById('3-months').addEventListener('tap', () => { const now = new Date(); const to = now.setSeconds(0, 0); const from = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate(), now.getHours(), now.getMinutes()); rangePicker.values = toValues(from, to); - rangePicker.views = toValues(from, to); + rangePicker.views = toViews(from, to); }); ``` ```css diff --git a/packages/elements/src/datetime-picker/__demo__/index.html b/packages/elements/src/datetime-picker/__demo__/index.html index 8e8ba8bc1b..324975800e 100644 --- a/packages/elements/src/datetime-picker/__demo__/index.html +++ b/packages/elements/src/datetime-picker/__demo__/index.html @@ -455,26 +455,30 @@ @@ -595,7 +599,7 @@ dynamicSingleDatetimePicker.addEventListener('before-cell-render', beforeCellRenderHandlerSingle); - +
10
11
Oct