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

Disabling datepicker on an input field

Cuurently I have an input field using datepicker. I am wondering how to disable the datepicker callendar popping up when I click on that field, since on my page I want the date option to be available only on certain conditions.
<input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date">
I tried with :
$("#date").datepicker('disable');
And with :
$( "#date" ).datepicker( "disabled", true );
None worked.

One of the easiest way is to remove all the pointer events for that input field.
$("#date").css('pointer-events', 'none');
This will keep the data intact if you want.
And to re enable pointer events.
$("#date").css("pointer-events", "");

This seems to be working:
$('#date').datepicker('option', 'disabled', t_or_f)
Working example:
function toggleDatePicker (state) {
// this actually does the magic
$('#date').datepicker('option', 'disabled', !state)
}
$(document).ready(function() {
// init
$('#date').datepicker();
// ignore this, just for the sake of example
$('#butt').on('click', function() {
var st = parseInt($(this).data('state'));
$(this).data('state', st = 1 - st); // toggle 0 and 1
$(this).text(st ? 'Disable' : 'Enable');
toggleDatePicker(Boolean(st));
});
});
#import url(https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date">
<button id="butt" data-state="1">Disable</button>

ChangeDate - Date Picker Bootstrap

I am trying to call ajax on DatePicker bootstrap changeDate event but after trying every possible way I am failed. Please help me. For testing I use console.log.
Script :
$( document ).ready(function() {
$('.date-picker').datepicker();
$('.date-picker').on('changeDate', function() {
var date = $('#date-picker').val();
console.log(123);
return false; // for testing...
});
});
HTML :
<p class="_50">
<label for="TitleID"><strong>Date </strong></label>
<input name="date-picker" id="date-picker" value="" class="date-picker"" type="text" class="required" readonly="readonly"/>
</p>

Be sure that the input has been loaded and then initialize the plugin.
Try on window.load:
$(window).load(function() {
$('.date-picker').datepicker().
.on('changeDate', function() {
// Your ajax call
});
});

Change "changeDate" to "change" simply:
<p>Date:
<input id="datepicker" type="text">
</p>
$("#datepicker").datepicker().on('change', function() {
alert("changed");
});
Demo Fiddle

Date picker JS: how to have it work on multiple form fields

I am using this plugin with WP:
http://wordpress.org/plugins/cf7-datepicker-alternative/
The .js file includes this code:
jQuery(document).ready(function($) {
$('#fieldName1').datepicker({
autoclose: true
});
});
Does anyone know how to doctor this bit of code so the date picker will function in multiple fields in the same form, such as fieldName2 and fieldName3 as well as fieldName1?
I thank you in advance for your efforts.

Instead of using id attribute, assign a meaningful class e.g. datepicker to the elements you want datepicker on. Then update your javascript to use that class selector.
Example:
<!-- HTML -->
<input type="text" id="fieldName1" class="datepicker" />
<input type="text" id="fieldName2" class="datepicker" />
// jQuery
jQuery(document).ready(function($) {
$('.datepicker').datepicker({
autoclose: true
});
});
Update:
If you don't want to use class selectors and would want to use multiple ids, then you could do something like following:
<!-- HTML -->
<input type="text" id="fieldName1" />
<input type="text" id="fieldName2" />
// jQuery
jQuery(document).ready(function($) {
$("#fieldName1, #fieldName2").each(function() {
$(this).datepicker({
autoclose: true
});
});
});

Instead of using an ID to identify your Input, use a class to identify multiple Inputs
<input id="fieldName1" class="datefield" />
$('.datefield').datepicker({
autoclose: true
});