<div class="flex flex-col gap-4">
<!-- Single -->
<div class="flex flex-col max-w-3/4 sm:max-w-[320px]">
<p class="block mb-2 font-medium">Single Date</p>
<div id="datepicker-single" class="ina-date-picker">
<button class="ina-date-picker__trigger ina-date-picker__trigger--size-md" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ina-date-picker__trigger-icon icon icon-tabler icons-tabler-outline icon-tabler-calendar"
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path
d="M11 15h1"></path><path d="M12 15v3"></path></svg
>
<span class="ina-date-picker__trigger-text ina-date-picker__trigger-text--placeholder"
>Pilih Tanggal</span
>
</button>
<div class="ina-date-picker__panel">
<div class="ina-date-picker__panel-content">
<!-- Content injected by JS -->
</div>
</div>
</div>
<div style="margin-top: 12px !important; font-size: 14px; color: #6b7280;">
<strong>Nilai yang dipilih:</strong>
<span class="selected-value-display">-</span>
</div>
</div>
<!-- Range -->
<div class="flex flex-col max-w-3/4 sm:max-w-[320px]">
<p class="block mb-2 font-medium">Date Range</p>
<div id="datepicker-range" class="ina-date-picker">
<button class="ina-date-picker__trigger ina-date-picker__trigger--size-md" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ina-date-picker__trigger-icon icon icon-tabler icons-tabler-outline icon-tabler-calendar"
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path
d="M11 15h1"></path><path d="M12 15v3"></path></svg
>
<span class="ina-date-picker__trigger-text ina-date-picker__trigger-text--placeholder"
>Pilih Rentang Tanggal</span
>
</button>
<div class="ina-date-picker__panel">
<div class="ina-date-picker__panel-content">
<!-- Content injected by JS -->
</div>
</div>
</div>
<div style="margin-top: 12px !important; font-size: 14px; color: #6b7280;">
<strong>Nilai yang dipilih:</strong>
<span class="selected-value-display">-</span>
</div>
</div>
<!-- Multiple -->
<div class="flex flex-col max-w-3/4 sm:max-w-[320px]">
<p class="block mb-2 font-medium">Multiple Dates</p>
<div id="datepicker-multiple" class="ina-date-picker">
<button class="ina-date-picker__trigger ina-date-picker__trigger--size-md" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ina-date-picker__trigger-icon icon icon-tabler icons-tabler-outline icon-tabler-calendar"
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path
d="M11 15h1"></path><path d="M12 15v3"></path></svg
>
<span class="ina-date-picker__trigger-text ina-date-picker__trigger-text--placeholder"
>Pilih Beberapa Tanggal</span
>
</button>
<div class="ina-date-picker__panel">
<div class="ina-date-picker__panel-content">
<!-- Content injected by JS -->
</div>
</div>
</div>
<div style="margin-top: 12px !important; font-size: 14px; color: #6b7280;">
<strong>Nilai yang dipilih:</strong>
<span class="selected-value-display">-</span>
</div>
</div>
</div>
<script is:inline>
(function () {
console.log('[InaUI Consumer] Script initializing...');
// Helper to format date consistent with JS (DD/MM/YYYY)
function formatDate(date) {
if (!date) return '';
const d = new Date(date);
const day = d.getDate().toString().padStart(2, '0');
const month = (d.getMonth() + 1).toString().padStart(2, '0');
const year = d.getFullYear();
return `${day}/${month}/${year}`;
}
// Initialize Datepicker
if (window.InaUI && typeof window.InaUI.DatePicker === 'function') {
initDatePickers();
} else {
document.addEventListener('DOMContentLoaded', () => {
if (window.InaUI && typeof window.InaUI.DatePicker === 'function') {
initDatePickers();
}
});
}
function initDatePickers() {
new window.InaUI.DatePicker('#datepicker-single', {
mode: 'single',
onChange: (val) => updateDisplay('#datepicker-single', val, 'single'),
});
new window.InaUI.DatePicker('#datepicker-range', {
mode: 'range',
onChange: (val) => updateDisplay('#datepicker-range', val, 'range'),
});
new window.InaUI.DatePicker('#datepicker-multiple', {
mode: 'multiple',
onChange: (val) => updateDisplay('#datepicker-multiple', val, 'multiple'),
});
}
function updateDisplay(selector, value, mode) {
const picker = document.querySelector(selector);
if (!picker) return;
const display = picker.nextElementSibling?.querySelector('.selected-value-display');
if (!display) return;
if (mode === 'single') {
display.textContent = value ? formatDate(value) : '-';
} else if (mode === 'range') {
const [start, end] = value || [];
if (start && end) {
display.textContent = `${formatDate(start)} - ${formatDate(end)}`;
} else if (start) {
display.textContent = `${formatDate(start)} - ...`;
} else {
display.textContent = '-';
}
} else if (mode === 'multiple') {
if (value && value.length > 0) {
display.textContent = value.map((d) => formatDate(d)).join(', ');
} else {
display.textContent = '-';
}
}
}
console.log('[InaUI Consumer] Listener attached to document');
})();
</script>
