bootstrap datepicker enter paste
by lhernand
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="well">
<input type="text" id="date-daily" />
</div>
<textarea id="stdout" style="width:100%;height:10em;"></textarea>
CSS
#date-daily {
margin-left: 150px;
}
JavaScript
$(document).ready(function() {
$('#date-daily').datepicker({
format: 'dd/mm/yyyy',
assumeNearbyYear: true,
autoclose: true,
orientation: 'bottom right',
todayHighlight: true,
keyboardNavigation: false
})
/* On 'paste' -> loses focus, hide calendar and trigger 'change' */
.on('paste', function(e) {
$(this).blur();
$('#date-daily').datepicker('hide');
})
/* On 'enter' keypress -> loses focus and trigger 'change' */
.on('keydown', function(e) {
if (e.which === 13) {
console.log('enter');
$(this).blur();
}
})
.change(function(e) {
console.log('change');
/*$(this).blur();
$(this).datepicker('hide');
$('#date-daily').datepicker('hide');*/
$('#stdout').append($('#date-daily').val() + ' change\n');
});
});