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

How to disable dates in second datetimepicker based on next days in the first one

I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});

I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

How can I get value of Bootstrap Datepicker in JS function onchange event?

I tried to get the Date value in javascript function after I select date in bootstrap datepicker, but I can't do this.
The date picker work and show the date in input field, but I can't use this value.
(for example I want when I choose a date I get popup alert with the selected date)
This is datepicker:
<div class="form-group">
<label class="control-label" for="date">THE Date</label>
<div class="form-group">
<div class='input-group date' >
<input class="form-control " id="date_id" name="date" placeholder="DD/MM/YYYY" type="text" onchange="DateFunction()" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function () {
var date_input = $('input[name="date"]');
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
function DateFunction() {
var x = document.getElementById("date_id");
alert(x.Value);
}
-------------edit:--------------------
i change to this function. how and where i need to add line to get my date value? the date is work and show in input
html:
<div class="container">
<div class="col-xs-12">
<input name="datetimepicker" id="Date_id" />
</div>
</div>
js:
$(function () {
$('input[name="datetimepicker"]').datetimepicker({
format: 'DD/MM/YYYY',
});
});

See https://bootstrap-datepicker.readthedocs.io/en/latest/events.html for the documentation of the datepicker events.
in short
date_input.datepicker(options);
date_input.on('changeDate', function(e){
// e.date holds the new date (e.dates if it is multidate picker)
console.log(e.date); // log actual Date object to handle as you want
console.log(this.value); // log the formatted value of the input
});
Example at https://codepen.io/anon/pen/KoZzpw

I want to assign 1 day after checkin date for check out date in bootstrap datepicker

I have the HTML as follows
<div class="booking-date-fields-container col-xs-12 col-sm-6" id="dp3">
<input type="hidden" data-date-format="MM/DD/YYYY" name="dateArrival" id="dateArrival">
</div>
<div class="booking-date-fields-container col-xs-12 col-sm-6" id="dp4">
<input type="hidden" data-date-format="MM/DD/YYYY" name="dateDeparture" id="dateDeparture">
</div>
and following is the JS file content for the above
jQuery("#booking-tab-contents .input-daterange").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
startDate: new Date(),
show: true,
inputs: jQuery('.booking-date-fields-container')
});
$('#dp3').datepicker().on('click', function (ev) {
$('#dateArrival').val( $('#dp3').datepicker('getFormattedDate'));
});
$('#dp4').datepicker().on('click', function (ev) {
$('#dateDeparture').val( $('#dp4').datepicker('getFormattedDate'));
});
I want to make my date-picker in such a way that, when I select arrival date or check in date, the checkout date must be a day after the check-in date

How to disable time in Bootstrap DateTimePicker?

I wanna use bootstrap datetimepicker without select time but it is not working. I gave false value to the pickTime parameter but it is still not working. But Format and language parameters is working.
Here is the code!
How can i fix this?
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy",
pickTime: false,
autoclose: true,
todayBtn: true,
language: 'tr',
pickerPosition: "bottom-right"
});
});
</script>
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">Birtdate</span>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"> </span>
</span>
</div>

There are many datetimepicker plugin, so you need to details what plugin you used.
If you use the plugin from http://eonasdan.github.io/bootstrap-datetimepicker/.
I think, you may use wrong its option : read more at http://eonasdan.github.io/bootstrap-datetimepicker/Options/. Here I removed almost, and just keep one:
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy"
});

try this remove pickTime Option and use minview : 2
$(function() {
$('#datetimepicker4').datetimepicker({
minView : 2
});
});

Try the below code, which will show only the date view, when the calendar is pulled down.
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'yyyy-mm-dd',
startView: 'month',
minView: 'month',
autoclose: true
});
});

I found this website online it disables the time picker
http://tarruda.github.io/bootstrap-datetimepicker/
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>