I have two datepickers. I want to show to date depends on from date. To date should be future date from from date plus 1. From and To dates are not same. To date always starts on the next day of from date.
Example:
If I select `from` 07/18/2018 `to` date do not like from 07/18/2018.
So I want to show after date of from date.
If I select `from` 07/18/2018 `to` date will start like from 07/19/2018.
If you see my JSFiddle you can understand: http://jsfiddle.net/FdfPY/771/
JavaScript:
var disabledDates = []
$(".from_date").datepicker({
minDate: 'D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
beforeShowDay: function(d) {
if (d.getDate() == 2 || d.getDate() == 16) {
return [true, "" ];
} else {
return [false, "" ];
}
},
onClose: function(selectedDate) {
disabledDates=[selectedDate];
$(".to_date").datepicker("option", "minDate", selectedDate);
}
});
$(".to_date").datepicker({
minDate: 0,
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
beforeShowDay: function(d) {
if (d.getDate() == 2 || d.getDate() == 16) {
return [true, "" ];
} else {
return [false, "" ];
}
}
});
HTML:
<div id="nested-fields row">
<div class="span2">
<div class="control-group">
<label>From</label>
<div class="controls">
<input type="text" class="from_date" />
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label>To</label>
<div class="controls">
<input type="text" class="to_date" />
</div>
</div>
</div>
<div style="clear:left"></div>
</div>
Try below code
var disabledDates = []
$(".from_date").datepicker({
minDate: 'D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
onClose: function(selectedDate) {
disabledDates=[selectedDate];
$(".to_date").datepicker("option", "minDate", selectedDate);
}
});
$(".to_date").datepicker({
minDate: 0,
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [ disabledDates.indexOf(string) == -1 ]
}
});
Related
I am using jQuery Datepicker and i have same change in jQuery but something went wrong in this.
All Working fine as my requirement but when I select date from December 2020 in start date than all Dates of End date is disable.
And this is happing only when I select December 2020's dates.
if (jQuery('#datetimepicker1').length > 0) {
jQuery('#datetimepicker1').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
onChangeDateTime: function(dp, $input) {
var from = $input.val().split("/");
var f = new Date(from[2], from[1], from[0]);
f.setDate(f.getDate());
var datemin = f.getFullYear()+ "/" +f.getMonth()+ "/" +f.getDate();
var datestr= from[2]+ "/" +f.getMonth()+ "/" +from[0];
$("#datetimepicker2").datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
changeMonth: f.getMonth(),
changeYear: f.getFullYear(),
minDate: new Date(datemin),
startDate:datemin,
});
}
});
}
if (jQuery('#datetimepicker2').length > 0) {
jQuery('#datetimepicker2').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
});
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<input id="datetimepicker1" type="text" placeholder="Start Date"/>
<input id="datetimepicker2" type="text" placeholder="End Date"/>
Javascript months are 0-based, but your input is 1-based, so you need to convert
var f = new Date(from[2], from[1]-1, from[0]);
It fails as there's no 13th month, so gets "confused".
As you're not using the date itself, but reformatting back to a string, you also need to convert back on those lines:
var datemin = f.getFullYear()+ "/" +(f.getMonth()+1)+ "/" +f.getDate();
var datestr= from[2]+ "/" +(f.getMonth()+1)+ "/" +from[0];
if (jQuery('#datetimepicker1').length > 0) {
jQuery('#datetimepicker1').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
onChangeDateTime: function(dp, $input) {
var from = $input.val().split("/");
var f = new Date(from[2], from[1]-1, from[0]);
f.setDate(f.getDate());
var datemin = f.getFullYear()+ "/" +(f.getMonth()+1)+ "/" +f.getDate();
var datestr= from[2]+ "/" +(f.getMonth()+1)+ "/" +from[0];
$("#datetimepicker2").datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
changeMonth: f.getMonth(),
changeYear: f.getFullYear(),
minDate: new Date(datemin),
startDate:datemin,
});
}
});
}
if (jQuery('#datetimepicker2').length > 0) {
jQuery('#datetimepicker2').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
});
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<input id="datetimepicker1" type="text" placeholder="Start Date"/>
<input id="datetimepicker2" type="text" placeholder="End Date"/>
In one Form I'm developing using angular, i use two datepickers
<td><input ng-model="reportsVal.start_date" type="text" id="startDatePicker" ng-disabled="showVals"></td>
<td><input ng-model="reportsVal.end_date" type="text" id="endDatePicker" required ng-disabled="showVals"></td>
$( "#startDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "Start Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
numberOfMonths: 1
});
$( "#endDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "End Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday
});
on submit when i console log reportsVal.start_date and reportsVal.end_date it comes as expected. But when i use end_date must be greater than start_date condition like below
$( "#startDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "Start Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
numberOfMonths: 1,
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
}
$("#endDatePicker").datepicker("option","minDate", date)
}
});
$( "#endDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "End Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
}
$("#startDatePicker").datepicker("option","maxDate", date || 0)
}
});
i'm getting undefined for these values reportsVal.start_date and reportsVal.end_date
I have two inputs with datepicker, I need that first datepicker can initialize another, this works great with altField, but the datepicker from the second input does not work anymore. I make a example with this data:
https://jsfiddle.net/5njLoxd5/
<input type="text" id="lightBillingStartdate" /><br/>
<input type="text" id="lightBillingFinishDate" /><br/>
$( "#lightBillingStartdate" ).datepicker({
altField: "#lightBillingFinishDate",
altFormat: "dd/mm/yy",
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingFinishDate").datepicker("option","minDate", selected);
}
});
$( "#lightBillingFinishDate" ).datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingStartdate").datepicker("option","maxDate", selected);
}
});
I would use setDate method like so: https://jsfiddle.net/Twisty/5njLoxd5/2/
$("#lightBillingStartdate").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingFinishDate").datepicker("option", "minDate", selected);
$("#lightBillingFinishDate").datepicker("setDate", selected);
}
});
$("#lightBillingFinishDate").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingStartdate").datepicker("option", "maxDate", selected);
}
});
I tried adding dateFormat: "dd-mm-yy",
but then the rest of the functions just don't work.
Then I tried to change the format globally,
$.datepicker.setDefaults({dateFormat: 'dd-mm-yy'});
But it didn't work either.
I am using jquery-1.9.1, and jquery-ui-1.10.3.
$(document).ready(function formUi() {
var dateToday = new Date();
$("#datepicker-round-trip-1").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
maxDate: new Date(new Date($('datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday, maxDate: null });
}
else {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("#datepicker-round-trip-2").datepicker("option", "minDate", newDate);
}
});
$("#datepicker-round-trip-2").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
minDate: new Date(new Date($('#datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-2").datepicker('option', { minDate: dateToday, maxDate: null });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("datepicker-round-trip-1").datepicker("option", "maxDate", newDate);
}
});
});
The script just sets the datepicker's minDate to the last date selected in the previous date picker. Any help or guidance is appreciated :)
Try this: http://jsfiddle.net/MXstJ/ or http://jsfiddle.net/gc4nM/
Helpful link: http://jqueryui.com/datepicker/
Hope this fits your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d',
dateFormat: 'dd-mm-yy',
defaultDate: new Date()
});
I have set the date for #arrival to todays date, but how can I set the #departure to tomorrow's date?
$(function() {
$( "#arrival" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function( selectedDate ) {
$( "#departure" ).datepicker( "option", "minDate", selectedDate);
}
});
$(function() {
$("#arrival").datepicker("setDate", "0");
});
$( "#departure" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$(function() {
$("#departure").datepicker("setDate", "1");
});
});
I have customized the datepicker and it works fine.
In the change function of the first datepicker, create a date object, set the date one day forward, and set the date of the second datepicker to that date. You can use minDate to make sure any date earlier than the set date can not be picked.
$(function () {
$("#arrival").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function (selectedDate) {
var myDate = $(this).datepicker('getDate');
myDate.setDate(myDate.getDate()+1);
$('#departure').datepicker('setDate', myDate);
}
});
$("#departure").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$("#arrival").datepicker("setDate", "0");
$("#departure").datepicker("setDate", "1");
});
FIDDLE