If I removed the autoclose it works fine. How to autoclose datetimepicker. I've been searching on this but couldn't find useful information.
$('#start_schedule').datetimepicker({
format: 'HH:mm',
autoclose: true
});
It doesn't work actually according to documentation. If you will use showClose: true, it won't recognize, you will get an error. There is no other way rather than using this code in the docs. Hope this help.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
Related
I have the code that is getting the value in the form of get variable. The problem is that I want now to place the variable into a div (for datetimepicker). When I put it like that the variable is not passed. Any help will be appreciated. My current code below:
Working variable:
Start Date: <input type="text" class="date-time-input" name="sdate" id="sdatefield"/><br/>
Not working variable inside div:
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" id='sdatefield'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
</script>
</div>
</div>
observed that you added id="sdatefield" to the <div id="sdatefield"> rather then <input id="sdatefield"> which is causing this issue, Because you binding datetimepicker to this input field.
Try like the below
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"> </script>
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" >
<input type='text' class="form-control" id="sdatefield"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</div>
Thanks
Sometimes I've forms with precompiled dates (in these example: 06/02/2019).
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" value="06/02/2019"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<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>
I get an issue with bootstrap datetimepicker: when value already exist on page loading, the "blocking" function doesn't work:
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date); //<-- it works only when I change date.
});
After first load page, when I'll try to chose a date on datetimepicker2, I'd like to have blocked already dates before 06/02/2019, but all date are available!
It work only if I do changes in input fields.
See my fiddle: https://jsfiddle.net/omerts/8jpmkcr5/1/
As per Bootstrap Datetime Picker, you need to use minDate and maxDate while initializing Datetime picker.
$(function () {
var datetime1 = $('#datetime1').val() != "" ? new Date($('#datetime1').val()) : false;
var datetime2 = $('#datetime2').val() != "" ? new Date($('#datetime2').val()) : false;
$('#datetimepicker1').datetimepicker({
maxDate: datetime2
});
$('#datetimepicker2').datetimepicker({
useCurrent: false, //Important! See issue #1075
minDate: datetime1
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id="datetime1" value="02/05/2019" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id="datetime2" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
I have a datetimepicker that shows up when the field is clicked and hides if clicked again. However, if clicked for the third time, the calendar does not appear. If you unfocus the field and then click it again - it appears.
I'm clueless.
HTML :
<div class="input-group">
<input id="setdate-date" class="form-control" type="text" name="Date" value="#Model.Date.ToString("yyyy-MM-dd HH:mm")" style="cursor:pointer">
<span class="input-group-addon datepickerbutton start-date-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
JS:
<script>
$(function () {
var today = new Date();
var endDate = new Date(#Model.MaxDate.Year, #(Model.MaxDate.Month - 1), #Model.MaxDate.Day, #Model.MaxDate.Hour, #Model.MaxDate.Minute, 0, 0);
$('#setdate-date').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
startDate: today,
endDate: endDate,
autoclose: true
});
$('#setdate-date').datetimepicker('setDate', new Date());
$('#form-setdate .datepickerbutton').click(function () {
$('#setdate-date').datetimepicker('show');
});
})
</script>
Any ideas ? The same occurs on all of my datetimepickers.
Regards
edit: I tried applying .blur() on $('#setdate-date') so it unfocuses after a click but to no avail :/
This is how you use datepicker:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<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>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
Here you have different scenarios: https://eonasdan.github.io/bootstrap-datetimepicker/
I'm using bootstrap datepicker with bootstrap-rtl
the issue I had 2 fields, one for date and one for name, the datepicker not shown until I click first in date input then in name input then when I click back in date input the datapicker shown, and this happened only in first load of page then its work fine until you reload the page again.
<div class="col-md-6">
<div class="form-group">
<label for="name" class="control-label">name</label>
<input type="text" maxlength="40" name="name" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<span class="text-danger Bold">*</span>
<label for="civilIDExpiredDate" class="control-label">ExpiredDate</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="ExpiredDate" class="form-control datepicker">
</div>
</div>
</div>
<script type="text/javascript">
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
</script>
this will work for you
<script type="text/javascript">
$(document).ready({
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
});
</script>
you need to initialize your datetimepicker after dom is ready not before that.
I have an issue: when I use datetimepicker in inline mode, console shows me this:
Uncaught TypeError: Cannot read property 'dateFormat' of null
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true
});
});
Here is my fiddle: https://jsfiddle.net/maxdonetsk/jahsjkkn/
Can you help me? Thanks in advance.
Just change your datetimepicker js to
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js
and your code will work
here is the fiddle : https://jsfiddle.net/shoaibakhter/w0nk1c5z/
You forgot some HTML :-)
This is what I have changed:
<div id="datetimepicker12"></div>
to
<div class='input-group date' id='datetimepicker12'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Here is an updated fiddle: https://jsfiddle.net/273tzgnz/1/
To clarify: this has nothing to do with inline-mode. This has to do with the fact that you didn't have an input for the datetimepicker to bind to.