Skip to content

Instantly share code, notes, and snippets.

@lcomino

lcomino/teste-datepicket-momentjs.html

Created June 26, 2016 21:33
Show Gist options
  • Save lcomino/1ffd31bb9b0e39e82b0f534ab1281f1a to your computer and use it in GitHub Desktop.
Save lcomino/1ffd31bb9b0e39e82b0f534ab1281f1a to your computer and use it in GitHub Desktop.
Download ZIP
Teste para pegar a quantidade dias entre datas, utilizando o datepicker do bootstrap para selecionar as datas
Raw
teste-datepicket-momentjs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datepicker</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>
<body>
<div class="container">
<div id="sandbox-container" class="col-xs-3 form-group">
<label for="data-inicial">Data Inicial</label>
<input type="text" class="form-control date data-inicial">
</div>
<div id="sandbox-container" class="col-xs-3 form-group">
<label for="data-final">Data Final</label>
<input type="text" class="form-control date data-final">
</div>
<div id="sandbox-container" class="col-xs-2 form-group">
<label for="dias">Dias</label>
<input type="text" class="form-control dias">
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//moment.updateLocale(navigator.language);
//
moment.updateLocale('en', {
relativeTime : {
future: "%s",
past: "%s",
s: "",
m: "%d",
mm: "%d",
h: "%d",
hh: "%d",
d: "%d",
dd: "%d",
M: "%d",
MM: "%d",
y: "%d",
yy: "%d"
}
});
$(".data-inicial").val(moment().format("DD/MM/YYYY"));
$('#sandbox-container input.date').datepicker({
language: "pt-BR",
todayHighlight: true
}).on('changeDate', function(){
var a = moment($('.data-inicial').val(), 'DD/MM/YYYY');
var b = moment($('.data-final').val(), 'DD/MM/YYYY');
var c = $(".dias");
c.val(a.diff(b, 'days') * -1) ;
});
$(".dias").blur(function(){
var a = moment($('.data-inicial').val());
var b = $('.data-final');
var c = $(".dias");
console.log(a.add(c.val(), 'Days'));
b.val(a.add(c.val(), 'Days').format('DD/MM/YYYY'));
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment