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/
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'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 am using the bootstrap-datetimepicker from:
http://eonasdan.github.io/bootstrap-datetimepicker/
Mainly because I need, in my application, a widget to display time. The other datepicker widgets handled, mostly, only dates, and I need a standardized widget.
Thing is, when I had the other widget on, this piece of code worked well with the following Javascript except:
<div class="col-lg-5 col-sm-5 col-xs-10">
<div class="well with-header">
<div class="header">
<label th:for="timepicker4" th:value="${hourIntervalStart}" th:text="#{scheduler.intervalStartTime}">Hour Interval Start: </label>
</div>
<div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input name="hourIntervalStart" th:value="${hourIntervalStart}" th:field="*{hourIntervalStart}" id="timepicker4" class="form-control tp_interval1"></input>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-2 col-xs-4">
<div class="well with-header">
<div class="header">
<label th:for="interval1" th:value="${increment}" th:text="#{scheduler.increment}">Interval (minutes): </label>
</div>
<div>
<div class="input-group">
<input name="increment" type="text" th:field="*{increment}" id="interval1" class="form-control" ></input>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-10">
<div class="well with-header">
<div class="header">
<label th:for="timepicker5" th:text="#{scheduler.intervalEndTime}">Hour Interval End:</label>
</div>
<div>
<div class="input-group">
<input name="hourIntervalEnd" id="timepicker5" type="datetime" th:value="${hourIntervalEnd}" th:field="*{hourIntervalEnd}" class="form-control tp_interval1" ></input>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
The javascript section that used to work nicely upon the onClose event of the widget is:
$('#timepicker4').datetimepicker({
locale: 'pt-br',
format: 'HH:mm'
});
$('#timepicker5').datetimepicker({
locale: 'pt-br',
format: 'HH:mm'
});
$('.tp_interval1').change(function () {
// get values
var valuestart = $('#timepicker4').val();
var valuestop = $('#timepicker5').val();
var start = moment(valuestart, 'HH:mm');
var stop = moment(valuestop, 'HH:mm');
// create date format
var valuestart = new Date("01/01/2016 " + start).getTime();
var valuestop = new Date("01/01/2016 " + stop).getTime();
var diff = timeStop - timeStart;
var minutesDiff = new Date(diff) / 60000;
$("#interval1").val(minutesDiff);
});
What I want is that the time difference in minutes is automatically shown in the "#interval1" input.
What am I missing here?
You need to use dp.change instead of the change event. As per the documentation you may use the following other events as well.
dp.hide
dp.show
dp.change
dp.error
dp.update
I added the event handler for one datetimepicker and it seemed to work. For the interval to reflect correctly, you need to add the dp.change event handler for datetimepicker2 as well - so that the interval changes also when a new date is chosen in datetimepicker2.
HTML:
<div class="container">
<div class="row">
<div class='col-sm-4'>
<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>
<div class='col-sm-4'>
<input type='text' id="interval" value=''/>
</div>
<div class='col-sm-4'>
<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>
</div>
Javascript part:
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
$('#datetimepicker2').datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
$('#datetimepicker1').on('dp.change', function (e) {
//here you can use e.date to get the date selected in the current datepicker
var ms = e.date.diff($('#datetimepicker2').data('DateTimePicker').date());
var d = moment.duration(ms);
var s = Math.floor(d.asHours());
$('#interval').val(s);
});
});
In the end, I got it right by doing this:
$(".tp_interval1").on("dp.change", function (e){
// get values
var valuestart = $('#timepicker4').val();
var valuestop = $('#timepicker5').val();
var start = moment(valuestart, 'HH:mm');
var stop = moment(valuestop, 'HH:mm');
var diff = moment(stop, "HH:mm") - moment(start, "HH:mm");
$("#interval1").val(diff / 60000);
});
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>