Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
[HELP] Bagaimana menghitung selisih hari dengan jquery ?
Bagaimana menghitung selisih hari dengan jquery secara otomatis menggunakan format MM-DD-YYYY ane udah buat tapi gak muncul gan
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Datetimepicker</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div>
<div style="padding-top: 25px;">
<center><h1>jQuery Datetimepicker Menghtung Selisih Hari</h1></center>
</div>
<br />
<div class="row">
<div class='col-sm-4'>
</div>
<!-- DATETIMEPICKER -->
<div class='col-sm-4'>
<label>Date 1:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Date 2:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Hasil Selisih Hari:</label>
<div class="form-group">
<div class='input-group date' id='hasil'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-ok"></span>
</span>
</div>
</div>
<!-- DATETIMEPICKER -->
<div class='col-sm-4'>
</div>
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'MM-DD-YYYY',
});
$('#datetimepicker2').datetimepicker({
format: 'MM-DD-YYYY',
});
var start = $('#datetimepicker1').datetimepicker('getDate');
var end = $('#datetimepicker2').datetimepicker('getDate');
var days = (end - start)/1000/60/60/24;
$('#hasil').val(days);
});
</script>
</body>
</html>
0
4 Jawaban:
Jawaban Terpilih
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Datetimepicker</title>
<!-- link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"> -->
</head>
<body>
<div class="container">
<div>
<div style="padding-top: 25px;">
<center><h1>jQuery Datetimepicker Menghtung Selisih Hari</h1></center>
</div>
<br />
<div class="row">
<div class='col-sm-4'>
</div>
<!-- DATETIMEPICKER -->
<div class='col-sm-4'>
<label>Date 1:</label>
<div class="form-group">
<div class='input-group date'>
<input id='datetimepicker1' type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Date 2:</label>
<div class="form-group">
<div class='input-group date'>
<input id='datetimepicker2' type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Hasil Selisih Hari:</label>
<div class="form-group">
<div class='input-group date'>
<input id='hasil' type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-ok"></span>
</span>
</div>
</div>
<!-- DATETIMEPICKER -->
<div class='col-sm-4'>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'MM-DD-YYYY',
});
$('#datetimepicker2').datetimepicker({
format: 'MM-DD-YYYY',
});
function daysBetween(first, second) {
var newDate = Date.now() + -5*24*3600*1000;
// Copy date parts of the timestamps, discarding the time parts.
var one = new Date(first[2], first[0], first[1]);
var two = new Date(second[2], second[0], second[1]);
// // Do the math.
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var millisBetween = two.getTime() - one.getTime();
var days = millisBetween / millisecondsPerDay;
// Round down.
return Math.floor(days);
}
$('#datetimepicker2').blur(function(){
var start = $('#datetimepicker1').val().split('-');
var end = $('#datetimepicker2').val().split('-');
$('#hasil').val(daysBetween(start,end));
});
});
</script>
</body>
</html>
0
