diff --git a/groups/Tapops/css/documents.css b/groups/Tapops/css/documents.css
index 0b6e850..61bf593 100644
--- a/groups/Tapops/css/documents.css
+++ b/groups/Tapops/css/documents.css
@@ -365,6 +365,7 @@
 
 /* Custom dd/mm/yyyy date input */
 .custom-date-input {
+    position: relative;
     display: flex;
     align-items: center;
     gap: 1px;
@@ -376,7 +377,8 @@
     font-weight: 700;
     color: #94a3b8;
     user-select: none;
-    padding: 0 1px;
+    padding: 0 2px;
+    flex-shrink: 0;
 }
 
 .date-part {
@@ -387,14 +389,14 @@
     font-weight: 700;
     color: var(--primary-blue);
     text-align: center;
-    padding: 2px 3px;
+    padding: 2px 4px;
     border-radius: 3px;
     transition: background 0.15s ease;
     min-width: 0;
 }
 
-.date-dd, .date-mm { width: 2.2ch; }
-.date-yyyy         { width: 4.2ch; }
+.date-dd, .date-mm { width: 34px; }
+.date-yyyy         { width: 56px; }
 
 .date-part::placeholder {
     color: #94a3b8;
@@ -406,6 +408,35 @@
     background: rgba(0, 49, 80, 0.07);
 }
 
+.date-calendar-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #94a3b8;
+    padding: 4px 2px 4px 6px;
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+    transition: color 0.2s ease;
+}
+
+.date-calendar-btn:hover {
+    color: var(--primary-blue);
+}
+
+.date-hidden-picker {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    border: none;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
 .range-divider {
     font-size: 0.7rem;
     font-weight: 800;
diff --git a/groups/Tapops/index.html b/groups/Tapops/index.html
index 898939f..23ca707 100644
--- a/groups/Tapops/index.html
+++ b/groups/Tapops/index.html
@@ -952,6 +952,10 @@
                                         <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">
                                     </div>
                                     <span class="range-divider" data-tp-i18n="range_divider">s/d</span>
                                     <div class="input-wrapper custom-date-input">
@@ -960,6 +964,10 @@
                                         <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">
                                     </div>
                                 </div>
                             </div>
diff --git a/groups/Tapops/js/main.js b/groups/Tapops/js/main.js
index 1633c26..9d81bf3 100644
--- a/groups/Tapops/js/main.js
+++ b/groups/Tapops/js/main.js
@@ -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() {