Postingan lainnya

Bagaimana menghitung total hari dari tanggal mulai dan tanggal akhir? (zebra_datepicker)

saya ingin menghitung total hari dari dua tanggal yg telah terpilih dari dua date picker?

saya sudah mengikuti satu-satunya petunjuk yg saya temukan <a href=' https://stackoverflow.com/questions/44815929/how-do-i-display-the-number-of-days-selected-from-two-dates-selected-from-zebra '>stack overflow</a>, tapi hasil akhir yg ditampilkan selalu NaN.

<!doctype html>

<div class="container">
    <div class="row">
        <div class="col-md-8 mx-auto">

            <!-- div.card -->
            <div class="card text-white bg-dark">
                <div class="card-header bg-dark">
                    <?= $title; ?>
                </div>

                <!-- div.card-body -->
                <div class="card-body">
                    <form action="<?= base_url('user/insertcutitahunan'); ?>" method="post">
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label for="nip">NIP</label>
                                <input type="text" class="form-control" id="nip" name="nip" value="<?= $user['nip']; ?>" readonly>
                            </div>

                            <div class="form-group col-md-9">
                                <label for="nama">Nama</label>
                                <input type="text" class="form-control" id="nama" name="nama" value="<?= $user['nama']; ?>" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="tanggal_pengajuan">Tanggal Pengajuan</label>
                            <input type="text" class="form-control" id="tanggal_pengajuan" name="tanggal_pengajuan" value="<?php date_default_timezone_set('Asia/Jakarta'); ?><?= date('d F Y - H:i:s'); ?>" readonly>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="tanggal_mulai_cuti_t">Tanggal Mulai Cuti</label>
                                <input type="text" class="form-control" id="tanggal_mulai_cuti_t" name="tanggal_mulai_cuti_t" value="" data-zdp_readonly_element="false">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="tanggal_akhir_cuti_t">Tanggal Akhir Cuti</label>
                                <input type="text" class="form-control" id="tanggal_akhir_cuti_t" name="tanggal_akhir_cuti_t" value="" data-zdp_readonly_element="false">
                            </div>
                        </div>

                        <input class="form-control" type="hidden" name="jct" id="jct" value="Cuti Tahunan">

                        <div class="form-group">
                            <label for="alasan">Alasan</label>
                            <input type="text" class="form-control" id="alasan" name="alasan">
                        </div>

                        <div class="form-group">
                            <label for="sisa_cuti">Sisa Cuti</label>
                            <input type="text" class="form-control" id="sisa_cuti" name="sisa_cuti" value="<?= $user['sisa_cuti_tahunan']; ?>" readonly>
                        </div>

                        <div class="form-group">
                            <label for="total_cuti">Total Cuti</label>
                            <input type="text" class="form-control" id="total_cuti" name="total_cuti" readonly>
                        </div>

                        <!-- tombol simpan -->
                        <div class="form-group">
                            <button type="submit" class="btn btn-sm btn-primary btn-icon-split">
                                <span class="icon text-white-50">
                                    <i class="fas fa-fw fa-save"></i>
                                </span>
                                <span class="text">Ajukan Cuti</span>
                            </button>
                        </div>
                        <!-- akhir tombol simpan -->
                    </form>

                </div>
                <!-- akhir div.card-body -->
            </div>
            <!-- akhir div.card -->

        </div>
    </div>
</div>

</html>

<script>
    $(document).ready(function() {
        $('#tanggal_mulai_cuti_t').Zebra_DatePicker({
            pair: $('#tanggal_akhir_cuti_t'),
            direction: 1,
            select_other_months: 1,
            onClose: function(el) {
                tampilHari(el)
            }
        })
        $('#tanggal_akhir_cuti_t').Zebra_DatePicker({
            direction: [1, 14],
            select_other_months: 1,
            onClose: function(el) {
                tampilHari(el)
            }
        })

        function tampilHari() {
            // get tanggal
            var start = $('#tanggal_mulai_cuti_t').val()
            var end = $('#tanggal_akhir_cuti_t').val()
            if (!start || !end) return

            // parse data
            var startArr = start.split("/")
            var endArr = end.split("/")
            var startDate = new Date(startArr[2], startArr[0] - 1, startArr[1])
            var endDate = new Date(endArr[2], endArr[0] - 1, endArr[1])

            // calculate days
            var days = Math.round((endDate - startDate) / (1000 * 60 * 60 * 24))

            $('#total_cuti').val(days)
        }
     }
</script>

salahnya dimana ya? atau mungkin ada yg punya solusi yg lebih mudah dimengerti? soalnya saya udah pernah nyoba pakai momentjs, karena sulit sekali dimengerti cara pemakaiannya dan saya hanya mengerti sedikit tentang js/pun jquery jadi saya balik lagi ke zebra_datepicker.

tujuan akhirnya saya pengen buat total hari - sisa cuti

terima kasih yg udah mau bantu :)

javascript jquery php

@MuhammadFathurRachman

25 Kontribusi 7 Poin

Diperbarui 4 tahun yang lalu

3 Jawaban:

sepertinya nama bulan harus dikonversi menjadi angka dahulu. contoh <pre> var oneDay = 2460601000; // hoursminutessecondsmilliseconds var firstDate = new Date('2019/07/24'); var secondDate = new Date('2019/07/31'); var diffDays = Math.round(Math.round((secondDate.getTime() - firstDate.getTime()) / (oneDay))); console.log(diffDays); // 7 hari </pre>

edit, coba tambahkan format <pre> $('#tanggal_mulai_cuti_t').Zebra_DatePicker({ pair: $('#tanggal_akhir_cuti_t'), direction: 1, select_other_months: 1, format: 'd/m/Y', onClose: function(el) { tampilHari(el) } }) $('#tanggal_akhir_cuti_t').Zebra_DatePicker({ direction: [1, 14], select_other_months: 1, format: 'd/m/Y', onClose: function(el) { tampilHari(el) } })

function tampilHari() { // get tanggal var start = $('#tanggal_mulai_cuti_t').val() var end = $('#tanggal_akhir_cuti_t').val() if (!start || !end) return

var oneDay = 2460601000; // hoursminutessecondsmilliseconds var firstDate = new Date(start); var secondDate = new Date(end); var diffDays = Math.round(Math.round((secondDate.getTime() - firstDate.getTime()) / (oneDay))); console.log(diffDays); // 7 hari

        $(&#039;#total_cuti&#039;).val(diffDays)
    }

</pre>

@dianarifr

642 Kontribusi 316 Poin

Dipost 4 tahun yang lalu

@dianarifr

saya kurang bisa dalam javascript makanya saya kebingungan seperti ini. saya mau coba kode anda tapi bagaimana caranya agar bagian ini <pre> var firstDate = new Date('2019/07/24'); var secondDate = new Date('2019/07/31'); </pre>

valuenya didapat dari dua zebra_datepicker yg ada di file formnya?

setelah saya sepenuhnya ngikutin sama persis seperti stackoverflow dilink yg saya include kan dipertanyaan, akhirnya jalan.

hanya saja saya masih bingung bagaimana cara yg format awalnya seperti ini ('m d Y') saya pilih tanggal dari input datepicker pertama hasilnya tampil 07 25 2019 saya pilih tanggal dari input datepicker kedua hasilnya tampil 07 30 2019 maka total harinya adalah 5 hari

menjadi ('d m Y') dengan hasil yg sama? saya pilih tanggal dari input datepicker pertama hasilnya tampil 25 07 2019 saya pilih tanggal dari input datepicker kedua hasilnya tampil 30 07 2019 maka total harinya adalah 5 hari

<pre> function tampilHari() { // get tanggal var start = $('#tanggal_mulai_cuti_t').val() var end = $('#tanggal_akhir_cuti_t').val() if (!start || !end) return // saya kurang paham ini untuk apa?

        // parse data
        var startArr = start.split(&quot; &quot;) // bagian ini saya paham fungsinya untuk apa
        var endArr = end.split(&quot; &quot;) // bagian ini saya paham fungsinya untuk apa
        var startDate = new Date(startArr[2], startArr[0] - 1, startArr[1]) // saya tidak tau bagaimana cara merubahnya agar menjadi format yg saya inginkan dengan hasil yg sama?
        var endDate = new Date(endArr[2], endArr[0] - 1, endArr[1]) // saya tidak tau bagaimana cara merubahnya agar menjadi format yg saya inginkan dengan hasil yg sama?

        // calculate days
        var days = Math.round((endDate - startDate) / (1000 * 60 * 60 * 24)) // saya tidak tau bagaimana cara merubahnya agar menjadi format yg saya inginkan dengan hasil yg sama?

        $(&#039;#total_cuti&#039;).val(days)
    }

</pre>

@MuhammadFathurRachman

25 Kontribusi 7 Poin

Dipost 4 tahun yang lalu

Tanggapan

udah ane edit jawabannya

@dianarifr

saya udah ikutin sama persis. nambahin format: 'd/m/Y'. di function tampilHari() juga udah saya samain semua. hasilnya tetap NaN di console maupun di halaman formnya?

@MuhammadFathurRachman

coba format ganti jadi format: 'Y/m/d',

@dianarifr

dengan format: 'd F Y' udah bisa, tapi sayangnya ga bisa ke simpan ke database. pas ditampilin 0000-00-00

@MuhammadFathurRachman

Jawaban Terpilih

sebelum saya ucapkan terima kasih atas bantuannya @dianarifr dan postingan" yg saya temukan di stackoverflow, dll.

untuk kasus saya ini, jalan keluar yg saya temukan seperti ini

<pre> function hitungHariT() { // get tanggal var mulai = tmct.val().split(" ") var akhir = tact.val().split(" ") if (!mulai || !akhir) return

        // parse data
        var oneDay = 24 * 60 * 60 * 1000 // hours*minutes*seconds*milliseconds
        var firstDate = new Date(mulai[2], mulai[1] - 1, mulai[0])
        var secondDate = new Date(akhir[2], akhir[1] - 1, akhir[0])
        var diffDays = Math.round(Math.round((secondDate.getTime() - firstDate.getTime()) / (oneDay)))

        $(&#039;#total_cuti_t&#039;).val(diffDays)
    }

</pre>

<pre> var tmct = $('#tanggal_mulai_cuti_t') var tact = $('#tanggal_akhir_cuti_t') tmct.Zebra_DatePicker({ pair: $('#tanggal_akhir_cuti_t'), direction: 1, select_other_months: 1, onClose: function(el) { hitungHariT(el) } }) tact.Zebra_DatePicker({ direction: [1, 13], select_other_months: 1, onClose: function(el) { hitungHariT(el) } }) </pre>

@MuhammadFathurRachman

25 Kontribusi 7 Poin

Dipost 4 tahun yang lalu