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

fix(tapops): ganti input date native dengan dd/mm/yyyy text input terpisah agar tahun max 4 digit

Browse Source
This commit is contained in:
Dodo
2026-06-04 17:06:11 +07:00
parent 5bb704ac88
commit 9c1de91a82
3 changed files with 102 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/Tapops/css/documents.css
+29 -28
View File
@@ -363,36 +363,47 @@
background: white;
}
.date-range-inputs .input-wrapper {
position: relative;
/* Custom dd/mm/yyyy date input */
.custom-date-input {
display: flex;
align-items: center;
gap: 1px;
padding: 6px 0;
}
.date-range-inputs input[type="date"] {
.date-sep {
font-size: 0.85rem;
font-weight: 700;
color: #94a3b8;
user-select: none;
padding: 0 1px;
}
.date-part {
border: none;
background: transparent;
padding: 8px 0;
font-family: inherit;
font-size: 0.85rem;
font-weight: 700;
color: var(--primary-blue);
cursor: pointer;
min-width: 120px;
text-align: center;
padding: 2px 3px;
border-radius: 3px;
transition: background 0.15s ease;
min-width: 0;
}
.date-range-inputs input[type="date"]:focus {
.date-dd, .date-mm { width: 2.2ch; }
.date-yyyy { width: 4.2ch; }
.date-part::placeholder {
color: #94a3b8;
font-weight: 400;
}
.date-part:focus {
outline: none;
}
.date-range-inputs input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
}
.date-range-inputs input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
background: rgba(0, 49, 80, 0.07);
}
.range-divider {
@@ -701,18 +712,8 @@ a.btn-action-outline:hover {
box-shadow: 0 0 0 3px rgba(0, 49, 80, 0.08);
}
.date-range-inputs input[type="date"] {
width: 100%;
border: none;
background: transparent;
padding: 0;
font-family: inherit;
.date-part {
font-size: 0.82rem;
font-weight: 700;
color: var(--primary-blue);
min-width: 0;
flex: 1;
cursor: pointer;
}
.range-divider {
groups/Tapops/index.html
+12 -4
View File
@@ -946,12 +946,20 @@
<div class="control-group date-range-group">
<span class="control-label" data-tp-i18n="label_period">Periode Unggahan</span>
<div class="date-range-inputs">
<div class="input-wrapper">
<input type="date" id="date-start" placeholder="Mulai">
<div class="input-wrapper custom-date-input">
<input type="text" inputmode="numeric" maxlength="2" placeholder="DD" class="date-part date-dd" id="date-start-dd" autocomplete="off">
<span class="date-sep">/</span>
<input type="text" inputmode="numeric" maxlength="2" placeholder="MM" class="date-part date-mm" id="date-start-mm" autocomplete="off">
<span class="date-sep">/</span>
<input type="text" inputmode="numeric" maxlength="4" placeholder="YYYY" class="date-part date-yyyy" id="date-start-yyyy" autocomplete="off">
</div>
<span class="range-divider" data-tp-i18n="range_divider">s/d</span>
<div class="input-wrapper">
<input type="date" id="date-end" placeholder="Selesai">
<div class="input-wrapper custom-date-input">
<input type="text" inputmode="numeric" maxlength="2" placeholder="DD" class="date-part date-dd" id="date-end-dd" autocomplete="off">
<span class="date-sep">/</span>
<input type="text" inputmode="numeric" maxlength="2" placeholder="MM" class="date-part date-mm" id="date-end-mm" autocomplete="off">
<span class="date-sep">/</span>
<input type="text" inputmode="numeric" maxlength="4" placeholder="YYYY" class="date-part date-yyyy" id="date-end-yyyy" autocomplete="off">
</div>
</div>
</div>
groups/Tapops/js/main.js
+61 -26
View File
@@ -423,14 +423,23 @@ class DocumentRepository {
this.filterWrapper = document.getElementById('tag-filter-wrapper');
this.mobileFilterWrapper = document.getElementById('mobile-tag-filter-wrapper');
this.searchInput = document.getElementById('doc-search');
this.dateStartInput = document.getElementById('date-start');
this.dateEndInput = document.getElementById('date-end');
this.sortFilterWrapper = document.getElementById('sort-filter-wrapper');
// Hero stat values (filled from real API data after fetch).
this.statActiveEl = document.getElementById('stat-active-value');
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'),
};
this.dateEndParts = {
dd: document.getElementById('date-end-dd'),
mm: document.getElementById('date-end-mm'),
yyyy: document.getElementById('date-end-yyyy'),
};
this.cards = [];
this.paginationContainer = null;
this.state = {
@@ -443,6 +452,52 @@ class DocumentRepository {
};
}
// Returns YYYY-MM-DD string only when dd, mm, and yyyy are all filled and valid.
_getDateString(parts) {
const dd = parts.dd?.value.trim() || '';
const mm = parts.mm?.value.trim() || '';
const yyyy = parts.yyyy?.value.trim() || '';
if (!dd || !mm || yyyy.length < 4) return '';
const d = parseInt(dd, 10);
const m = parseInt(mm, 10);
const y = parseInt(yyyy, 10);
if (isNaN(d) || isNaN(m) || isNaN(y)) return '';
if (d < 1 || d > 31 || m < 1 || m > 12 || y < 1 || y > 9999) return '';
return `${String(y).padStart(4, '0')}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
}
// Wire up a set of dd/mm/yyyy text inputs:
// • numeric-only keydown guard
// • auto-advance dd→mm after 2 chars, mm→yyyy after 2 chars
// • backspace from empty field navigates back
// • calls onUpdate() on every change
_bindDateParts(parts, onUpdate) {
const { dd, mm, yyyy } = parts;
const CTRL_KEYS = new Set(['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter']);
const setup = (input, prev, next) => {
if (!input) return;
input.addEventListener('keydown', (e) => {
if (!/^\d$/.test(e.key) && !CTRL_KEYS.has(e.key)) e.preventDefault();
if (e.key === 'Backspace' && !input.value && prev) prev.focus();
});
input.addEventListener('input', () => {
input.value = input.value.replace(/\D/g, '');
onUpdate();
const max = parseInt(input.getAttribute('maxlength'), 10);
if (next && input.value.length >= max) next.focus();
});
};
setup(dd, null, mm);
setup(mm, dd, yyyy);
setup(yyyy, mm, null);
}
async init() {
if (!this.gridContainer) return;
this._bindControls();
@@ -581,40 +636,20 @@ class DocumentRepository {
}
_bindControls() {
// Limit date inputs to a 4-digit year (max 9999).
[this.dateStartInput, this.dateEndInput].forEach(input => {
if (!input) return;
input.setAttribute('max', '9999-12-31');
input.setAttribute('min', '1000-01-01');
// Clamp year on both input (fires while typing) and change (fires on blur).
const clampYear = () => {
if (!input.value) return;
const parts = input.value.split('-');
if (parts.length !== 3) return;
const year = parseInt(parts[0], 10);
if (!Number.isNaN(year) && year > 9999) {
parts[0] = '9999';
input.value = parts.join('-');
}
};
input.addEventListener('input', clampYear);
input.addEventListener('change', clampYear);
});
this.searchInput?.addEventListener('input', (e) => {
this.state.search = e.target.value.toLowerCase().trim();
this.state.page = 1;
this._applyFilters();
});
this.dateStartInput?.addEventListener('change', (e) => {
this.state.startDate = e.target.value;
this._bindDateParts(this.dateStartParts, () => {
this.state.startDate = this._getDateString(this.dateStartParts);
this.state.page = 1;
this._applyFilters();
});
this.dateEndInput?.addEventListener('change', (e) => {
this.state.endDate = e.target.value;
this._bindDateParts(this.dateEndParts, () => {
this.state.endDate = this._getDateString(this.dateEndParts);
this.state.page = 1;
this._applyFilters();
});