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

Fetch the value from input box contain month-date format by javascript or jquery

I want to fetch the value of the date and want to increase by 1 year and set the value for the next date .but if i am putting text i am getting alert if i am just choosing from datepicker i am not getting any alert.
<style>
.datepicker-days{display:none!important;}
.datepicker-months{display:block!important;}
.prev{visibility:hidden!important;}
.next{visibility:hidden!important;}
</style>
<script>
$(document).ready(function(){
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy'
})
$('#gMonth2').on("change", function () {
alert();
//alert($(this).val());
});
});
</script>
<div class="container-fluid" id="content">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 datepicker input-sm from" id="gMonth2" placeholder="CheckIn" >
</div>
</div>

You can use the onSelect() event of datepicker
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy',
onSelect: function(dateText) {
//Increase year by 1 & set to other field
}
});

I've tried to reproduce your code in here, I'm getting alert with the value fetched from the input when I change the date on the date picker, your code seems to be working fine.
.

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

TypeError: $(...).mask is not a function in date format using jquery

When I am doing the date format to the input text using jQuery, it shows this type of error.
Here is my code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="date" name="bday"/>
$(document).ready(function () {
alert();
$("#date").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
});

Swapping the scripts by putting in jquery first and then the mask works, as has been posted in the comments. Check the snippet.
$(document).ready(function () {
alert();
$("#date").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<input type="text" id="date" name="bday"/>

Bootstrap Datepicker Format Could Not Change To dd-mm-yyyy

Hi I have the following code and i am trying to change DatePicker as documentation but it did notchange. Please take a look at my javascript code
<script type="text/javascript">
$(function(){
$('#lmp').datepicker({
dateFormat: 'dd-mm-yyyy'
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
})
</script>
And This is my HTML Code
<input class="span2" type="text" name="lmp" id="lmp" placeholder="Click To Choose Date" align="left">

Change dateFormat to format
<script type="text/javascript">
$(function(){
$('#lmp').datepicker({
format: 'dd-mm-yyyy'
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
})