I have a datatable where I have the option to edit the date of every record in that table, so I need to use "document on focus" event to get all my datepickers to work. The problem here is that my datepicker only works when I click on the input, if I click in the "icon" it doesn´t work.
This is my datepicker in the form:
<div class="form-group">
<label for="fecha" class="col-form-label">Fecha</label>
<div class="input-group date" id="datepickerEditT" data-target-input="nearest">
<input type="text" id="datepickerEditT" name="fechaTratamiento" value="{{date('d/m/Y',strtotime($fecha))}}" class="form-control datepicker-input" data-target="#datepickerEditT" required/>
<div class="input-group-append" data-target="#datepickerEditT" data-toggle="datepickerEditT">
<div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
</div>
</div>
</div>
and this is the javascript:
$(document).on("focus", "#datepickerEditT", function () {
$(this).datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});
});
if I dont use on focus event my datepicker works fine, doesn´t matter if I click on the input or the icon, but I need to use this event because if I dont, my datepicker will only works on the first record in the table.
I used class div instead of the id like someone said and now everything its working without using the focus event.
$(".datepickerEditT").datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});
Related
I have two fields in my form. One for check-in date, other for check-out date. I am using [bootstrap datepicker][1] for date selection. What I want to accomplish is that, once the check-in value has been set, minimal(startDate) check-out value will be check-in value + 1 day. This is my current code:
HTML:
<form id="homeBookForm">
<div class="inner-addon right-addon">
<i class="fa fa-calendar" aria-hidden="true" id="checkInIcon"></i>
<input type="text" class="form-control checkIn"
placeholder="Check-In">
</div>
<div class="inner-addon right-addon">
<i class="fa fa-calendar" aria-hidden="true" id="checkOutIcon"></i>
<input type="text" class="form-control checkOut" placeholder="Check-Out">
</div>
<button>Book Now</button>
</form>
JS:
var date = new Date();
$('.checkIn').datepicker({
format:'yyyy-mm-dd',
todayBtn:true,
autoclose:true,
startDate:date
}).on('blur',function(){
$('.checkOut').focus();
});
$('.checkOut').datepicker({
format:'yyyy-mm-dd',
todayBtn:true,
autoclose:true,
startDate:$('.checkIn').val()
});
Right now the code for checking the field works fine,but after autoclose happens the checkout field is just focused and datepicker doesn't even pop up.Anyone knows what I am doing wrong? Thanks in advance. :)
[1]: http://bootstrap-datepicker.readthedocs.io/en/latest/index.html
You can use date-picker's changeDate event to achieve all you want.
Try changing your current implementation to this
var date = new Date();
$(".checkIn").datepicker({
format: "yyyy-mm-dd",
todayBtn: true,
autoclose: true,
startDate: date
})
.on("changeDate", function(e) {
var checkInDate = e.date, $checkOut = $(".checkOut");
checkInDate.setDate(checkInDate.getDate() + 1);
$checkOut.datepicker("setStartDate", checkInDate);
$checkOut.datepicker("setDate", checkInDate).focus();
});
$(".checkOut").datepicker({
format: "yyyy-mm-dd",
todayBtn: true,
autoclose: true
});
You don't need blur event anymore as date-picker's changeDate event will take care of setting focus to your check-out datepicker.
Check out the demo here https://codepen.io/anon/pen/ZrByVp?editors=1010
I have the following div:
<div class="input-group">
<input type="hidden" id="datepicker">
<input type="text" id="input_date" class="form-control" value="" readonly='readonly'>
<span class="input-group-addon" id="input_btn_calendar"><i class="fa fa-calendar"></i></span>
</div>
And the following JQuery call:
var today = new Date();
$("#input_date").datepicker({
changeYear: false,
numberOfMonths: 1,
altFormat: "yy-mm-dd",
altField: "#datepicker",
minDate: today,
onSelect : function () {
var inputdate = $.datepicker.parseDate('yy-mm-dd', $("#datepicker").val());
}
}).datepicker("setDate",today);
This makes the datepicker appear correctly when I press the text field. However, I also want it to show up when I click the input_btn_calendar button inside the accompanying span.
I've tried this:
$("#input_btn_calendar").click(function() {
$("input_date").datepicker('show')
});
But unfortunately, that does nothing. What am I missing?
You have an invalid selector of $('input_date').
Try this instead,
$("#input_btn_calendar").click(function() {
$("#input_date").datepicker('show')
});
After selecting date from bootstrap date picker the picker popup is not hiding. What may be the issue?
Here is my fiddle
<div class="form-group col-xs-6">
<div class="input-group">
<div class="input-group-addon flat">
<div class="glyphicon glyphicon-calendar"></div>
</div>
<div class="col-sm-10">
<input name="DATEFROM" id="dateFrom" type="text" class="form-control" />
</div>
</div>
</div>
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top"
});
});
Add autoclose: true in datepicker function.
The new jquery code is:
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top",
autoclose: true
});
});
Here is the updated fiddle. https://jsfiddle.net/329suzv9/8/
Simply hide the datapicker in the changedate event.
$(document).ready(function() {
$('#dateFrom').datepicker({
format: "mm/dd/yyyy",
orientation: "top"
}).on('changeDate', function(ev){
$('#dateFrom').datepicker('hide');
});
});
When we select calendar icon, it automatically sets today's date to textbox.
Is there any parameter/option in the datetimepicker() function which can be set to false or null preventing datetimepicker() setting today date to textbox by default.
If someone doesn't select any date from calendar the textbox should be empty rather than having today's date set by datetimepicker().
Worth reading the docs. Change the useCurrent attribute when initailizing the datetimepicker.
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent
If you are using the .datetimepicker() for Bootstrap 4 + jQuery
When you click the element it could happen this undesired effect of date updated.
This is a hack to avoid override of current value with current date on click and allow normal selection of picker.
For the Tempus Dominus version:
https://tempusdominus.github.io/bootstrap-4/
JS
var dateNow = new Date();
$('.datetimepicker').each(function() {
var _el = this;
$(this).datetimepicker({
autoclose: true,
allowInputToogle: true,
format: 'YYYY-MM-DD HH:mm',
defaultDate: dateNow,
});
// 'this.parent()' is the container and data-target | '_el' is the input
$(this).parent().on('change.datetimepicker', function(e) {
// HACK
if (!e.oldDate) return;
$(_el).val(e.date.format('YYYY-MM-DD HH:mm'));
});
});
HTML
<div class="form-group">
<label class="control-label"><i class="icon-right-open-outline"></i> Date</label>
<div class="input-group" id="form_datetimepicker_1">
<input name="date_selected"
id="date_selected"
class="form-control datetimepicker"
type="text"
data-toggle="datetimepicker"
value="2019-11-22 22:55:00"
data-target="#form_datetimepicker_1">
<div class="input-group-append" data-target="#form_datetimepicker_1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
I'm new to the scripting languages, I need help to resolve this issue. The bootstrap date picker resets the field when I choose the same date by using the date picker icon.
$('#from_date .input-daterange').datepicker({
keyboardNavigation: false,
format: "dd-M-yyyy",
endDate: '+0d',
clearBtn: true,
forceParse: false,
autoclose: true,
});
My HTML line of code is as follows:
<input type="text" style="margin-left: -5px; width: 99px;" class="form-control" id="fromdate"
name="quote-issue-date-start" placeholder="From date" data-bind="value:fromDate" />
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
The textbox gets cleared when I again choose the date from the datepicker.
Many things look wrong:
You try to select an element which does not exist: $('#from_date - the id in your markup is fromdate (withouth the underscore)
In your selector $('#from_date .input-daterange') you try to select .input-daterange inside #from_date - if #from_date is an <input> element it cant have children, so the selector should be $('#from_date.input-daterange') (if the input would actually have that class)
You have a syntax error:
autoclose: true, });
The , is false here.