<!-- https://zulns.github.io/libs/calendar-api-doc.html -->

<!-- <link rel="stylesheet" href="calendar.css"/>
<script type="text/javascript" src="hijri-date.js"></script>
<script type="text/javascript" src="calendar.js"></script> -->
<!-- <link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/>
<script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script>
<script type="text/javascript" src="https://ZulNs.github.io/libs/calendar.js"></script>
<div id="calendar-converter"></div>
<script type="text/javascript">
    var cal1 = new Calendar(false, 1, false, true),
        cal2 = new Calendar(true, 0, false, true),
        cal1Mode = cal1.isHijriMode(),
        cal2Mode = cal2.isHijriMode();
    document.getElementById('calendar-converter').appendChild(cal1.getElement());
    document.getElementById('calendar-converter').appendChild(cal2.getElement());
    cal1.setDisplayStyle('inline-block');
    cal2.setDisplayStyle('inline-block');
    cal2.getElement().style.marginLeft = '20px';
    cal1.show();
    cal2.show();

    cal1.callback = function() {
        if (cal1Mode !== cal1.isHijriMode()) {
            cal2.disableCallback(true);
            cal2.changeDateMode();
            cal2.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } // prevent from infinite loop when user change the calendar mode
        else
            cal2.setTime(cal1.getTime());
    };

    cal2.callback = function() {
        if (cal2Mode !== cal2.isHijriMode()) {
            cal1.disableCallback(true);
            cal1.changeDateMode();
            cal1.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } // prevent from infinite loop when user change the calendar mode
        else
            cal1.setTime(cal2.getTime());
    };

    cal1.onHide = function() {
        cal1.show(); // prevent the widget from being closed
    };

    cal2.onHide = function() {
        cal2.show(); // prevent the widget from being closed
    };
</script>


<div id="datepicker"><input id="picked-text" type="text" size="35"/><input id="pick-button" type="button" onclick="pickADate();" value="pick"/></div>
<script type="text/javascript">
    var pickedTxt = document.getElementById('picked-text'),
        pickBtn = document.getElementById('pick-button'),
        datepicker = new Calendar();
    document.getElementById('datepicker').appendChild(datepicker.getElement());
    datepicker.getElement().style.marginTop = '10px';

    datepicker.callback = function() {
        pickedTxt.value = datepicker.getDate().getDateString();
        pickedTxt.selectionStart = 0;
        pickedTxt.selectionEnd = pickedTxt.value.length;
        pickedTxt.focus();
    };

    datepicker.onHide = function() {
        pickBtn.style.display = 'inline-block';
    };

    function pickADate() {
        pickBtn.style.display = 'none';
        datepicker.show();
    }
</script>
 -->




<link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/>
<script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script>
<script type="text/javascript" src="https://ZulNs.github.io/libs/calendar.js"></script>

<!-- <div id="calendar-converter"></div>
<script type="text/javascript">
    var cal1 = new Calendar(false, 1, false, true),
        cal2 = new Calendar(true, 0, false, true),
        cal1Mode = cal1.isHijriMode(),
        cal2Mode = cal2.isHijriMode();
    //document.getElementById('calendar-converter').appendChild(cal1.getElement());
    //document.getElementById('calendar-converter').appendChild(cal2.getElement());
    cal1.setDisplayStyle('inline-block');
    cal2.setDisplayStyle('inline-block');
    cal2.getElement().style.marginLeft = '20px';
    cal1.show();
    cal2.show();

    cal1.callback = function() {
        if (cal1Mode !== cal1.isHijriMode()) {
            cal2.disableCallback(true);
            cal2.changeDateMode();
            cal2.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } else {
            cal2.setTime(cal1.getTime());
        }
    };

    cal2.callback = function() {
        if (cal2Mode !== cal2.isHijriMode()) {
            cal1.disableCallback(true);
            cal1.changeDateMode();
            cal1.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } else {
            cal1.setTime(cal2.getTime());
        }
    };

    cal1.onHide = function() {
        cal1.show();
    };

    cal2.onHide = function() {
        cal2.show();
    };
</script>

<div id="datepicker">
    <input id="picked-text" type="text" size="35"/>
    <input id="pick-button" type="button" onclick="pickADate();" value="pick"/>
</div>
<script type="text/javascript">
    // Menggunakan kalender Hijriah
    var pickedTxt = document.getElementById('picked-text'),
        pickBtn = document.getElementById('pick-button'),
        datepicker = new Calendar(true, 0, false, true); // Siapkan sebagai kalender Hijriah

    document.getElementById('datepicker').appendChild(datepicker.getElement());
    datepicker.getElement().style.marginTop = '10px';

    datepicker.callback = function() {
        pickedTxt.value = datepicker.getDate().getDateString();
        pickedTxt.selectionStart = 0;
        pickedTxt.selectionEnd = pickedTxt.value.length;
        pickedTxt.focus();
    };

    datepicker.onHide = function() {
        pickBtn.style.display = 'inline-block';
    };

    function pickADate() {
        pickBtn.style.display = 'none';
        datepicker.show();
    }
</script> -->

<link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/>
<script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script>
<script type="text/javascript" src="https://ZulNs.github.io/libs/calendar.js"></script>

<!-- <div id="calendar-converter"></div>
<script type="text/javascript">
    var cal1 = new Calendar(false, 1, false, true),
        cal2 = new Calendar(true, 0, false, true),
        cal1Mode = cal1.isHijriMode(),
        cal2Mode = cal2.isHijriMode();
    //document.getElementById('calendar-converter').appendChild(cal1.getElement());
    //document.getElementById('calendar-converter').appendChild(cal2.getElement());
    cal1.setDisplayStyle('inline-block');
    cal2.setDisplayStyle('inline-block');
    cal2.getElement().style.marginLeft = '20px';
    cal1.show();
    cal2.show();

    cal1.callback = function() {
        if (cal1Mode !== cal1.isHijriMode()) {
            cal2.disableCallback(true);
            cal2.changeDateMode();
            cal2.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } else {
            cal2.setTime(cal1.getTime());
        }
    };

    cal2.callback = function() {
        if (cal2Mode !== cal2.isHijriMode()) {
            cal1.disableCallback(true);
            cal1.changeDateMode();
            cal1.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } else {
            cal1.setTime(cal2.getTime());
        }
    };

    cal1.onHide = function() {
        cal1.show();
    };

    cal2.onHide = function() {
        cal2.show();
    };
</script> -->

<div id="datepicker">
    <input id="picked-text" type="text" size="35"/>
    <input id="pick-button" type="button" onclick="pickADate();" value="pick"/>
</div>
<script type="text/javascript">
    var pickedTxt = document.getElementById('picked-text'),
        pickBtn = document.getElementById('pick-button'),
        datepicker = new Calendar(true, 0, false, true); // Siapkan sebagai kalender Hijriah

    document.getElementById('datepicker').appendChild(datepicker.getElement());
    datepicker.getElement().style.marginTop = '10px';

    datepicker.callback = function() {
        pickedTxt.value = datepicker.getDate().getDateString();
        pickedTxt.selectionStart = 0;
        pickedTxt.selectionEnd = pickedTxt.value.length;
        pickedTxt.focus();

        datepicker.hide(); // Tutup datepicker setelah memilih tanggal
    };

     datepicker.onHide = function() {
        // Tidak perlu menyembunyikan tombol di sini
        // pickBtn.style.display = 'inline-block'; // Hapus baris ini
    };

    function pickADate() {
        datepicker.show(); // Buka datepicker
    }
</script>



<!-- <link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/>
<script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script>
<script type="text/javascript" src="https://ZulNs.github.io/libs/calendar.js"></script>

<div id="datepicker">
    <input id="picked-text" type="text" size="35" placeholder="Pilih Tanggal Hijriah"/>
    <input id="pick-button" type="button" onclick="pickADate();" value="pick"/>
</div>

<script type="text/javascript">
    var pickedTxt = document.getElementById('picked-text'),
        pickBtn = document.getElementById('pick-button'),
        datepicker = new Calendar(true, 0, false, true); // Siapkan sebagai kalender Hijriah

    document.getElementById('datepicker').appendChild(datepicker.getElement());
    datepicker.getElement().style.marginTop = '10px';

    // Callback untuk saat tanggal dipilih
    datepicker.callback = function() {
        var hijriDate = datepicker.getDate(); // Ambil tanggal yang dipilih
        var day = hijriDate.getDate(); // Ambil tanggal (hari)
        var month = hijriDate.getMonth() + 1; // Ambil bulan (0-11), perlu ditambah 1
        var year = hijriDate.getYear(); // Ambil tahun

        // Format tanggal menjadi dd-mm-yyyy
        if (day < 10) { 
            day = '0' + day; // Tambahkan 0 di depan untuk hari < 10
        } 
        if (month < 10) { 
            month = '0' + month; // Tambahkan 0 di depan untuk bulan < 10
        }

        // Set nilai input dengan format dd-mm-yyyy
        pickedTxt.value = day + '-' + month + '-' + year; 
        pickedTxt.selectionStart = 0;
        pickedTxt.selectionEnd = pickedTxt.value.length;
        pickedTxt.focus();

        datepicker.hide(); // Tutup datepicker setelah memilih tanggal
    };

    datepicker.onHide = function() {
        // Tombol tetap terlihat di sini
    };

    function pickADate() {
        datepicker.show(); // Buka datepicker
    }
</script> -->



<!-- <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datepicker Hijriah</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-hijri/2.1.0/moment-hijri.min.js"></script>
    <style>
        .datepicker {
            width: 200px;
        }
    </style>
</head>
<body>

    <h1>Pilih Tanggal Hijriah</h1>
    <input type="text" id="hijriDate" class="datepicker" placeholder="Pilih Tanggal Hijriah">

    <script>
        $(function() {
            $("#hijriDate").datepicker({
                dateFormat: "yy-mm-dd",
                onSelect: function(dateText) {
                    // Konversi tanggal ke Hijriah
                    var gregorianDate = moment(dateText);
                    var hijriDate = gregorianDate.hijri().format('iYYYY/iM/iD');
                    alert("Tanggal Hijriah: " + hijriDate);
                }
            });
        });
    </script>

</body>
</html> -->


<!-- <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datepicker Hijriah</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-datepicker/1.12.1/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>

    <h1>Pilih Tanggal Hijriah</h1>
    <input type="text" id="hijriDate" class="form-control" placeholder="Pilih Tanggal Hijriah">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-hijri/2.1.0/moment-hijri.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hijriDate').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true,
                language: 'id'
            }).on('changeDate', function(e) {
                // Konversi ke tanggal Hijriah
                var gregorianDate = moment(e.date);
                var hijriDate = gregorianDate.hijri().format('iYYYY/iM/iD');
                alert("Tanggal Hijriah: " + hijriDate);
            });
        });
    </script>

</body>
</html>
 -->

<!-- <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DatePicker Hijriah</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-hijri/2.1.2/moment-hijri.min.js"></script>

    <style>

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 500px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #006400;
        }
        .input-container {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .calendar {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: absolute;
            z-index: 1000;
            display: none;
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #006400;
            color: white;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        .calendar-body {
            padding: 10px;
        }
        .calendar-title {
            text-align: center;
            font-weight: bold;
        }
        .calendar-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            text-align: center;
            padding: 8px;
        }
        th {
            font-weight: bold;
            color: #006400;
        }
        .day {
            cursor: pointer;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            line-height: 30px;
            display: inline-block;
        }
        .day:hover {
            background-color: #e6f7e6;
        }
        .selected {
            background-color: #006400;
            color: white;
        }
        .today {
            border: 1px solid #006400;
        }
        .other-month {
            color: #ccc;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>DatePicker Hijriah</h1>
        <div class="input-container">
            <label for="hijri-date">Pilih Tanggal Hijriah:</label>
            <input type="text" id="hijri-date" placeholder="Klik untuk memilih tanggal" readonly>
        </div>
        <div id="calendar" class="calendar">
            <div class="calendar-header">
                <button class="calendar-btn" id="prev-month">&lt;</button>
                <div class="calendar-title" id="current-month"></div>
                <button class="calendar-btn" id="next-month">&gt;</button>
            </div>
            <div class="calendar-body">
                <table>
                    <thead>
                        <tr>
                            <th>Ahd</th>
                            <th>Isn</th>
                            <th>Sel</th>
                            <th>Rab</th>
                            <th>Kam</th>
                            <th>Jum</th>
                            <th>Sab</th>
                        </tr>
                    </thead>
                    <tbody id="calendar-days"></tbody>
                </table>
            </div>
        </div>
        <div class="result" id="result"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const hijriInput = document.getElementById('hijri-date');
            const calendarElement = document.getElementById('calendar');
            const calendarDays = document.getElementById('calendar-days');
            const currentMonthElement = document.getElementById('current-month');
            const prevMonthButton = document.getElementById('prev-month');
            const nextMonthButton = document.getElementById('next-month');
            const resultElement = document.getElementById('result');
            
            let currentDate = moment();
            let selectedDate = null;
            
            // Nama bulan Hijriah dalam bahasa Indonesia
            const hijriMonths = [
                'Muharram', 'Safar', 'Rabiul Awal', 'Rabiul Akhir', 
                'Jumadil Awal', 'Jumadil Akhir', 'Rajab', 'Sya\'ban', 
                'Ramadhan', 'Syawal', 'Dzulqaidah', 'Dzulhijjah'
            ];
            
            // Mendapatkan nama bulan Hijriah
            function getHijriMonthName(month) {
                return hijriMonths[month - 1];
            }
            
            // Membuka kalender saat input diklik
            hijriInput.addEventListener('click', function() {
                calendarElement.style.display = 'block';
                renderCalendar();
            });
            
            // Menutup kalender saat klik di luar kalender
            document.addEventListener('click', function(event) {
                if (!calendarElement.contains(event.target) && event.target !== hijriInput) {
                    calendarElement.style.display = 'none';
                }
            });
            
            // Navigasi bulan sebelumnya
            prevMonthButton.addEventListener('click', function() {
                currentDate = currentDate.subtract(1, 'month');
                renderCalendar();
            });
            
            // Navigasi bulan berikutnya
            nextMonthButton.addEventListener('click', function() {
                currentDate = currentDate.add(1, 'month');
                renderCalendar();
            });
            
            // Render kalender
            function renderCalendar() {
                const hijriDate = currentDate.clone().iHijri();
                const hijriMonth = hijriDate.iMonth() + 1;
                const hijriYear = hijriDate.iYear();
                
                currentMonthElement.textContent = `${getHijriMonthName(hijriMonth)} ${hijriYear}`;
                
                // Mengatur tanggal ke awal bulan
                const firstDay = currentDate.clone().startOf('iMonth');
                const startDay = firstDay.clone().startOf('week');
                const endDay = firstDay.clone().endOf('iMonth').endOf('week');
                
                calendarDays.innerHTML = '';
                
                let currentWeek = document.createElement('tr');
                let day = startDay.clone();
                
                while (day.isBefore(endDay) || day.isSame(endDay, 'day')) {
                    const hijriDay = day.clone().iHijri();
                    const isCurrentMonth = hijriDay.iMonth() + 1 === hijriMonth;
                    const isToday = day.isSame(moment(), 'day');
                    const isSelected = selectedDate && day.isSame(selectedDate, 'day');
                    
                    const dayElement = document.createElement('td');
                    const daySpan = document.createElement('span');
                    daySpan.className = 'day';
                    
                    if (isCurrentMonth) {
                        daySpan.textContent = hijriDay.iDate();
                        daySpan.dataset.date = day.format('YYYY-MM-DD');
                        
                        if (isSelected) {
                            daySpan.classList.add('selected');
                        }
                        
                        if (isToday) {
                            daySpan.classList.add('today');
                        }
                        
                        daySpan.addEventListener('click', function() {
                            const clickedDate = moment(this.dataset.date);
                            selectedDate = clickedDate;
                            
                            const hijriSelectedDate = clickedDate.clone().iHijri();
                            const formattedDate = `${hijriSelectedDate.iDate()} ${getHijriMonthName(hijriSelectedDate.iMonth() + 1)} ${hijriSelectedDate.iYear()}`;
                            
                            hijriInput.value = formattedDate;
                            
                            // Menampilkan informasi tambahan
                            const gregorianDate = clickedDate.format('DD MMMM YYYY');
                            resultElement.innerHTML = `
                                <p><strong>Tanggal Hijriah:</strong> ${formattedDate}</p>
                                <p><strong>Tanggal Masehi:</strong> ${gregorianDate}</p>
                            `;
                            
                            calendarElement.style.display = 'none';
                            renderCalendar();
                        });
                    } else {
                        daySpan.textContent = hijriDay.iDate();
                        daySpan.classList.add('other-month');
                    }
                    
                    dayElement.appendChild(daySpan);
                    currentWeek.appendChild(dayElement);
                    
                    if (day.day() === 6) {
                        calendarDays.appendChild(currentWeek);
                        currentWeek = document.createElement('tr');
                    }
                    
                    day.add(1, 'day');
                }
                
                if (currentWeek.hasChildNodes()) {
                    calendarDays.appendChild(currentWeek);
                }
            }
            
            // Set tanggal awal
            const today = moment();
            const hijriToday = today.clone().iHijri();
            const formattedToday = `${hijriToday.iDate()} ${getHijriMonthName(hijriToday.iMonth() + 1)} ${hijriToday.iYear()}`;
            
            hijriInput.value = formattedToday;
            selectedDate = today;
            
            renderCalendar();
        });
    </script>
</body>
</html>
 -->