Postingan lainnya
[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
