Develop Reference

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

Datepicker - close when clicking outside

Datepicker doesn't close when clicking outside
and if I select 10/09 and current date is 10/ 11 and refresh browser,
then it shows current date 10/11 on <input> tag,
but the selected date on datepicker keep showing 10/09
How do I fix this?
My code is below:
<div class="form-inline" align="right">
<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$input = $("#datepicker");
$('#datepicker').datepicker({
dateFormat: 'yyyy-mm-dd'
});
$input.data('datepicker').hide = function() {};
</script>
</div>
When I refresh the browser,

Does changing type="text" to type="date" work? Like this JSFiddle

bootstrap-datepicker : how to close only when clicking outside

I want to make datepicker close only if click outside.
To prevent closing before clicking outside, I delete hide function like this:
$('#datepicker').data('datepicker').hide = function () {};
But if I do this, it's not able to close datepicker.
How do I fix this?
Code below:
<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$('#datepicker').datepicker({
dateFormat : 'yyyy-mm-dd',
autoclose: false
});
$('#datepicker').data('datepicker').hide = function () {};
</script>

just add the class datetimepicker-input ej.
<input type="text" class=" datetimepicker-input" id="datetimepicker4" data-toggle="datetimepicker" data-target="#datetimepicker4" dir="auto" required="" readonly >
when de jquery is
$('#datetimepicker4').datetimepicker();
I found this page to explain the details https://tempusdominus.github.io/bootstrap-4

<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$('#datepicker').datepicker({
dateFormat : 'yyyy-mm-dd',
autoclose: false
});
$('#datepicker').data('datepicker').hide = function () {};
</script>
on this code, onSelect func didn't work and couldn't use hide() func
so changed this into by using
.on("changeDate", function (e) {
$('.datepicker').show();
}
it worked for me

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