Develop Reference

Datepicker on "focus" event in Laravel

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,
});

Bootstrap Datepicker,checkout input > checkin input

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

change date in bootstrap datepicker calendar using date from another calendar on same page?

I have two basic bootstrap datepicker calendars on my page. I am trying to understand how I can use changeDate event to set the date of calendar no.2 according to the date I select on calendar no.1. I'd like to set a date three months ahead of the first calendar's month.
Here is the HTML of the calendar:
<div class="profile-info-row">
<div class="profile-info-name"> Date of Birth *</div>
<div class="profile-info-value">
<div id="sandbox-container">
<span class="input-icon input-icon-right">
<input type="text" type="text" name="dob" id="dob" class="form-control">
<i class="ace-icon fa fa-calendar blue"></i>
</span>
</div>
</div>
</div>
Here is the script of calendar:
<script type="text/javascript">
//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
});
EDIT: This question is about the BOOTSTRAP datepicker, not the JQUERY one. I think it's a common misconception in most questions

//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
}).on('changeDate', function(e) {
// `e` here contains the extra attributes
var newDate = new Date(e.date.setMonth(e.date.getMonth()+3));
$('#second-sandbox-container input').datepicker('setDate', newDate);
});
http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setdate

bootstrap-datetimepicker show date only

I am using this repo by smalot and I want to select and show date only (for some other places I am showing data and time, therefore selecting this repo). I can manage to use it for selecting date only but the generated date string is always yyyy-mm-dd hh:ii. And if I did not understand wrongly the format option is for parsing the initial date only but not setting dates.
<div class="input-group date datetime dateonly" data-start-view="2" data-min-view="2" style="margin-bottom: 0;">
<input class="form-control" size="16" type="text" placeholder="Release Date" id="release-date" name="release_date" value="{{ unit.release_dt|date:'Y-m-d' }}" style="cursor: default; background-color: #ffffff;">
<span class="input-group-addon btn btn-primary"><span class="glyphicon glyphicon-th"></span></span>
</div>
I am setting startView and minView to be both 2 so that the user will need to select date only but I still got 2015-09-22 00:00 as the output-- I just want it to show 2015-09-22.
In fact, by listening to changeDate and hide events, I can just set the value of date inputs. I am wondering if there is a less hacky and dirty way of doing it
$('.datetimepicker').on('changeDate', function(e) {//get substring and set date input
}).on('hide'....//same thing
);

Use date picker
$("#calender").datepicker({
format: "mm/dd/yyyy"
});

To show date only use
format: 'L'
To show Time only use
format: 'LT'
Reference
https://github.com/Eonasdan/bootstrap-datetimepicker/issues/832

you will edit datetaimepicker.js
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
like this
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd'
wish can help you!

Try this -
HTML:
<div class="controls input-append date m" data-date="" data-date-format="yyyy-mm-dd" data-link-field="m1" data-link-format="yyyy-mm-dd" data-start-view="2" data-min-view="2">
<input size="16" id="m" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="m1" value="" />
JS:
$('.m').on('changeDate', function(e) {
console.log($("#m").val());
});
Console:
2015-12-08
Hope it will help.

How to stop datetimepicker setting todays date in textbox by default onclick

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>