Rayhan/roda-student-web-if-development-kit
2
1
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity

fix(tapops): perlebar field tanggal dan tambah kembali tombol kalender dengan picker tersembunyi

Browse Source
This commit is contained in:
Dodo
2026-06-04 17:09:33 +07:00
parent 9c1de91a82
commit 46d9b1677d
3 changed files with 70 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/Tapops/js/main.js
+27 -7
View File
@@ -430,14 +430,18 @@ class DocumentRepository {
this.statUpdatesEl = document.getElementById('stat-updates-value');
this.dateStartParts = {
dd: document.getElementById('date-start-dd'),
mm: document.getElementById('date-start-mm'),
yyyy: document.getElementById('date-start-yyyy'),
dd: document.getElementById('date-start-dd'),
mm: document.getElementById('date-start-mm'),
yyyy: document.getElementById('date-start-yyyy'),
picker: document.getElementById('date-start-picker'),
calBtn: document.getElementById('date-start-cal-btn'),
};
this.dateEndParts = {
dd: document.getElementById('date-end-dd'),
mm: document.getElementById('date-end-mm'),
yyyy: document.getElementById('date-end-yyyy'),
dd: document.getElementById('date-end-dd'),
mm: document.getElementById('date-end-mm'),
yyyy: document.getElementById('date-end-yyyy'),
picker: document.getElementById('date-end-picker'),
calBtn: document.getElementById('date-end-cal-btn'),
};
this.cards = [];
@@ -474,9 +478,10 @@ class DocumentRepository {
// • numeric-only keydown guard
// • auto-advance dd→mm after 2 chars, mm→yyyy after 2 chars
// • backspace from empty field navigates back
// • calendar button opens native date picker; selection syncs to text inputs
// • calls onUpdate() on every change
_bindDateParts(parts, onUpdate) {
const { dd, mm, yyyy } = parts;
const { dd, mm, yyyy, picker, calBtn } = parts;
const CTRL_KEYS = new Set(['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter']);
const setup = (input, prev, next) => {
@@ -496,6 +501,21 @@ class DocumentRepository {
setup(dd, null, mm);
setup(mm, dd, yyyy);
setup(yyyy, mm, null);
// Calendar button → open native picker, then sync selection back to text inputs.
if (calBtn && picker) {
calBtn.addEventListener('click', () => {
try { picker.showPicker(); } catch { picker.click(); }
});
picker.addEventListener('change', () => {
if (!picker.value) return;
const [y, m, d] = picker.value.split('-');
if (dd) dd.value = d;
if (mm) mm.value = m;
if (yyyy) yyyy.value = y;
onUpdate();
});
}
}
async init() {