izu/student-web-if-development-kit
2
0
Fork 11
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat: implementasi custom date range picker dengan preset dan navigasi kalender

Browse Source 
* Mengganti field input tanggal yang sudah ada dengan UI date range picker baru.
* Menambahkan popover kalender untuk memilih rentang tanggal dengan navigasi bulan.
* Menambahkan tombol preset untuk pilihan rentang tanggal umum secara cepat, seperti Hari Ini dan 7 Hari Terakhir.
* Memperbarui string lokalisasi untuk fitur date range picker baru.
* Melakukan refactor JavaScript untuk menangani pemilihan tanggal dan state management pada picker baru.
This commit is contained in:
Dodo
2026-06-04 17:28:18 +07:00
parent b0918c1bb9
commit 529693cd5f
4 changed files with 1226 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/Tapops/index.html
+78 -23
View File
@@ -943,31 +943,86 @@
</div>
<div class="filter-controls">
<div class="control-group date-range-group">
<div class="control-group date-range-group" id="date-range-control-group">
<span class="control-label" data-tp-i18n="label_period">Periode Unggahan</span>
<div class="date-range-inputs">
<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">
<button type="button" class="date-calendar-btn" id="date-start-cal-btn" aria-label="Pilih tanggal mulai">
<i class="far fa-calendar-alt"></i>
</button>
<input type="date" class="date-hidden-picker" id="date-start-picker" tabindex="-1" aria-hidden="true">
<button type="button" id="date-picker-trigger" class="date-picker-trigger">
<div class="trigger-left-content">
<i class="far fa-calendar-alt"></i>
<span id="date-picker-label" data-tp-i18n="filter_all_time">Semua Waktu</span>
</div>
<span class="range-divider" data-tp-i18n="range_divider">s/d</span>
<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">
<button type="button" class="date-calendar-btn" id="date-end-cal-btn" aria-label="Pilih tanggal selesai">
<i class="far fa-calendar-alt"></i>
</button>
<input type="date" class="date-hidden-picker" id="date-end-picker" tabindex="-1" aria-hidden="true">
<i class="fas fa-chevron-down trigger-arrow"></i>
</button>
<div id="date-picker-backdrop" class="date-picker-backdrop"></div>
<div id="date-picker-popover" class="date-picker-popover">
<div class="date-picker-top-bar">
<div class="date-display-inputs">
<div class="date-display-field">
<input type="text" id="picker-start-display" placeholder="DD/MM/YYYY">
</div>
<span class="date-picker-separator">-</span>
<div class="date-display-field">
<input type="text" id="picker-end-display" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="date-picker-body">
<div class="calendar-container">
<div class="calendar-nav">
<button type="button" id="prev-month-btn" class="nav-btn"><i class="fas fa-chevron-left"></i></button>
<div class="month-labels">
<div id="left-month-label" class="month-label">
<span id="left-month-name">Mei</span>
<div class="year-select-wrapper">
<select id="left-year-select" class="calendar-year-select"></select>
<i class="fas fa-chevron-down select-arrow"></i>
</div>
</div>
<div id="right-month-label" class="month-label">
<span id="right-month-name">Juni</span>
<div class="year-select-wrapper">
<select id="right-year-select" class="calendar-year-select"></select>
<i class="fas fa-chevron-down select-arrow"></i>
</div>
</div>
</div>
<button type="button" id="next-month-btn" class="nav-btn"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="calendar-grids">
<div class="calendar-grid-pane" id="left-calendar-pane">
<div class="day-headers"></div>
<div class="days-container" id="left-days-container"></div>
</div>
<div class="calendar-grid-pane" id="right-calendar-pane">
<div class="day-headers"></div>
<div class="days-container" id="right-days-container"></div>
</div>
</div>
</div>
<div class="presets-container">
<span class="presets-title" data-tp-i18n="presets_title">RENTANG WAKTU</span>
<div class="presets-list">
<button type="button" class="preset-btn" data-preset="all" data-tp-i18n="filter_all_time">Semua Waktu</button>
<button type="button" class="preset-btn" data-preset="today" data-tp-i18n="preset_today">Hari Ini</button>
<button type="button" class="preset-btn" data-preset="yesterday" data-tp-i18n="preset_yesterday">Kemarin</button>
<button type="button" class="preset-btn" data-preset="last7" data-tp-i18n="preset_last_7_days">7 Hari Terakhir</button>
<button type="button" class="preset-btn" data-preset="last14" data-tp-i18n="preset_last_14_days">14 Hari Terakhir</button>
<button type="button" class="preset-btn" data-preset="last30" data-tp-i18n="preset_last_30_days">30 Hari Terakhir</button>
<button type="button" class="preset-btn" data-preset="thisWeek" data-tp-i18n="preset_this_week">Minggu Ini</button>
<button type="button" class="preset-btn" data-preset="lastWeek" data-tp-i18n="preset_last_week">Minggu Lalu</button>
<button type="button" class="preset-btn" data-preset="thisMonth" data-tp-i18n="preset_this_month">Bulan Ini</button>
<button type="button" class="preset-btn" data-preset="lastMonth" data-tp-i18n="preset_last_month">Bulan Lalu</button>
</div>
</div>
</div>
<div class="date-picker-footer">
<button type="button" id="picker-cancel-btn" class="action-btn cancel-btn" data-tp-i18n="btn_cancel">Batal</button>
<button type="button" id="picker-apply-btn" class="action-btn apply-btn" data-tp-i18n="btn_update">Perbarui</button>
</div>
</div>
</div>