Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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 :)
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
$('#total_cuti').val(diffDays)
}
</pre>
@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(" ") // bagian ini saya paham fungsinya untuk apa
var endArr = end.split(" ") // 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?
$('#total_cuti').val(days)
}
</pre>
Tanggapan
udah ane edit jawabannya
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?
coba format ganti jadi format: 'Y/m/d',
dengan format: 'd F Y' udah bisa, tapi sayangnya ga bisa ke simpan ke database. pas ditampilin 0000-00-00
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)))
$('#total_cuti_t').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>