keep bootstrap datepicker always open
14,164
You have to use .show() method to keep your dateTimePicker
visible, note that all the DateTimePicker's functions are reachable via the data attribute e.g.
$('.date').data("DateTimePicker").show();
Working Demo:
$( document ).ready(function() {
var bindDatePicker = function() {
$(".date").datetimepicker({
useCurrent: false,
keepOpen: true,
format:'YYYY-MM-DD',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
}).find('input:first').on("blur",function () {
// check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
// update the format if it's yyyy-mm-dd
var date = parseDate($(this).val());
if (! isValidDate(date)) {
//create date based on momentjs (we have that)
date = moment().format('YYYY-MM-DD');
}
$(this).val(date);
});
// here show dateTimePicker via js
$('.date').data("DateTimePicker").show();
}
var isValidDate = function(value, format) {
format = format || false;
// lets parse the date to the best of our knowledge
if (format) {
value = parseDate(value);
}
var timestamp = Date.parse(value);
return isNaN(timestamp) == false;
}
var parseDate = function(value) {
var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
if (m)
value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);
return value;
}
bindDatePicker();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' name="datepicker" autocomplete="off" class="form-control" id="datepicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Related videos on Youtube
Author by
Sergio Suarez
Updated on June 04, 2022Comments
-
Sergio Suarez almost 2 years
want datepicker always visible, not when calendar is clicked. So i just wanted to know how to achieve that. I'm trying the
KeepOpen = true;
but that is not working. I wonder how could i achieve that.Here i leave some of the JS and html code for you to check. If you need more references i can give.
<script type="text/javascript"> $(function () { var bindDatePicker = function() { $(".date").datetimepicker({ useCurrent: false, keepOpen: true, format:'YYYY-MM-DD', icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-arrow-up", down: "fa fa-arrow-down" } }).find('input:first').on("blur",function () { // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd. // update the format if it's yyyy-mm-dd var date = parseDate($(this).val()); if (! isValidDate(date)) { //create date based on momentjs (we have that) date = moment().format('YYYY-MM-DD'); } $(this).val(date); }); } var isValidDate = function(value, format) { format = format || false; // lets parse the date to the best of our knowledge if (format) { value = parseDate(value); } var timestamp = Date.parse(value); return isNaN(timestamp) == false; } var parseDate = function(value) { var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/); if (m) value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2); return value; } bindDatePicker(); });
And here is the div cointaining:
<div class="container"> <div class="row"> <div class='col-sm-3'> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' name="datepicker" autocomplete="off" class="form-control" id="datepicker" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div>
-
match over 6 yearsPossible duplicate of Always display bootstrap-datepicker, not just on focus
-
-
YouneL over 6 yearsGlade it helped,
-
Hazem Alabiad almost 3 yearsIs there any way to do it in
React
to keep the calendar open always?