I have two jQuery UI date pickers on a form I am building. Most of the functionality is working as expected, except for one thing.
I have weekends disabled on both dates. However, when the defaultDate and minDate lands on a weekend, it doesn't select the next available week day but, rather, it still selects the weekend date.
Any help would be really appreciative :)
var dateFormat = "dd/mm/yy",
from = $("#from")
.datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
minDate: "+3d",
defaultDate: "+3d",
changeMonth: true
})
.on("change", function () {
var date2 = from.datepicker('getDate')
date2.setDate(date2.getDate() + 2)
to.datepicker('setDate', date2)
to.datepicker('option', 'minDate', date2)
}),
to = $("#to").datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "+1w",
minDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
UPDATE
I have solved the issue. Here is the answer for if anyone else is interested. I updated the day number (0-6) the selected date lands on and added so many days to it to avoid the weekend and stored this in a variable min. I then assigned the min variable to the defaultDate and minDate datepicker options :).
var min = 3;
switch (new Date().getDay()) {
case 3:
min = 5;
break;
case 4:
min = 4;
break;
}
var dateFormat = "dd/mm/yy",
from = $("#from")
.datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
minDate: min,
defaultDate: min,
changeMonth: true
})
.on("change", function () {
var date2 = from.datepicker('getDate')
min = 2
switch (date2.getDay()){
case 4:
min = 4;
break;
case 5:
min = 4;
break;
}
date2.setDate(date2.getDate() + min)
to.datepicker('setDate', date2)
to.datepicker('option', 'minDate', date2)
}),
to = $("#to").datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "+1w",
minDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
Related
I have modified the jquery ui datepicker to pre-select the day that is 2 days from now and I have also disabled Sundays in the datepicker. However, the input field is still being pre-filled with the Sunday if the Sunday is 2 days from now. How do I prevent this?
$(function() {
$("#delivery-date").datepicker({
minDate: +2,
maxDate: '+2M',
dateFormat: "DD, d MM yy",
showOn: "both",
buttonText: "Change",
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
}).datepicker("setDate", "0");
});
Assuming you would switch to the Next day, Monday, you can use conditional (ternary) operator.
Here is an example.
$(function() {
$("#delivery-date").datepicker({
minDate: new Date().getDay() + 2 == 7 ? 3 : 2,
maxDate: '+2M',
dateFormat: "DD, d MM yy",
showOn: "both",
buttonText: "Change",
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
}).datepicker("setDate", "0");
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="delivery-date"></p>
If today is Friday (5), adding 2 days, would make it Sunday of the next week (7, or in JS: 0). So we can check for that.
Normally we might make a function:
function pickDay(n){
var d = new Date().getDay(); // Returns the day of the week: 5
if(d + n == 7){
return n + 1;
}
return n;
}
and then use it like so:
minDate: pickDay(2),
I tested this and it's not liked, there seems to be some timing issue.
Implemented start date and end date to find the day difference. If i select start date today and end date today then difference is showing that 0 and i have disabled the weekends though its counting the weekends also. Here is my code.
$("#startDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
todayHighlight: true,
minDate: 0,
numberOfMonths: 1,
todayHighlight: true,
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
$("#endDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
endDate: true,
todayHighlight: true,
minDate: 0,
numberOfMonths: 1,
buttonImageOnly: true,
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate');
var start = $("#startDate").datepicker("getDate");
var end = $("#endDate").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#noofDays").val(days);
}
});
Used date difference calculation function in jquery. its working for me
$("#startDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
numberOfMonths: 1,
maxDate: '+1Y+6M',
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
$("#endDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
numberOfMonths: 1,
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
var start = $("#startDate").datepicker("getDate");
var end = $("#endDate").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#noofDays").val(days);
}
});
What should I do to restrict the user to select the end date beyond one year from the starting date OR the current date. I have my codes like this.
$(function () {
$('#DateFrom').datepicker({
dateFormat:'d-M-y',
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 7, 23),
maxDate: 0,
onSelect: function() {
var date = $('#DateFrom').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24*365));
$('#DateTo').datepicker('option', 'maxDate', date);
$('#DateTo').datepicker('option', 'minDate',$('#DateFrom').datepicker('getDate'));
displayToUser();
},
});
$('#DateTo').datepicker({
dateFormat:'d-M-y',
maxDate: 0,
changeMonth: true,
changeYear: true,
onSelect: displayToUser,
});
});
function displayToUser() {}
Here although it restricts the user within one year from starting date, but it allows the user to select dates beyond the current date.
Example: if start date is 23-01-2016, it allows to select the end date upto 22-01-2017. I want it to be at most today's date.
Does this do it?
$(function () {
$('#DateFrom').datepicker({
dateFormat:'d-M-y',
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 7, 23),
maxDate: 0,
onSelect: function() {
var date = $('#DateFrom').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24*365));
var todaysDate = new Date();
if(date.getTime() > todaysDate.getTime()) date = todaysDate;
$('#DateTo').datepicker('option', 'maxDate', date);
$('#DateTo').datepicker('option', 'minDate',$('#DateFrom').datepicker('getDate'));
displayToUser();
},
});
$('#DateTo').datepicker({
dateFormat:'d-M-y',
maxDate: 0,
changeMonth: true,
changeYear: true,
onSelect: displayToUser,
});
});
function displayToUser() {}
I only added these two lines
var todaysDate = new Date();
if(date.getTime() > todaysDate.getTime()) date = todaysDate;
I want select start date as today's date and end date as tommorrow's date. I am getting start date as today's date (which is correct) but I am getting end date as 12/31/1969. Here's the piece of code:
$("#endOnDate").datepicker({
dateFormat: "mm/dd/yy",
minDate: new Date()
});
$("#startOnDate").datepicker({
dateFormat: "mm/dd/yy",
minDate: new Date(),
onSelect: function(selected) {
$("#endOnDate").datepicker("option", "minDate", selected);
}
});
Plz updateas followes.I have modified it plz find
$("#endOnDate").datepicker({ dateFormat: "mm/dd/yy", minDate: new Date()});
$("#startOnDate").datepicker({ dateFormat: "mm/dd/yy", minDate: new Date(),
onSelect: function (dateText) {
var actualDate = new Date(dateText);
var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate()+1);
alert('fff'+newDate);
$("#endOnDate").datepicker("option", "minDate", newDate);
}});
In the past I managed the start and end date picker to build my own select range valid. So I wish to suggest you:
$( "#startOnDate" ).datepicker({
dateFormat: "mm/dd/yy",
maxDate: new Date(),
onSelect: function(selected) {
$("#endOnDate").datepicker("option", "minDate", selected);
}
}).datepicker('setDate', new Date());
$( "#endOnDate" ).datepicker({
dateFormat: "mm/dd/yy",
minDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
onSelect: function(selected) {
$("#startOnDate").datepicker("option", "maxDate", selected);
}
}).datepicker('setDate', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
Could you try and let me know? thanks
To initialize the datepicker i added some code. Could you try now and let me know? Thanks
I am using Jquery's Datepicker and I want to know if it's possible to change the yearRange atribute based on the current month.
In my case, if the month it's different from november or december yearRange its the current year
else it's the current year + 1
Example 1:
current month: april
.datepicker({
showOn: "button",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: '-12:+0'
Example 2:
current month: november
.datepicker({
showOn: "button",
buttonImage: "../../App_Themes/Samae/images/calendar.png",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: '-12:+1'
thanks!
jQuery code
$(function () {
var d = new Date();
var month = d.getMonth();
var range;
if (month == 10 || month == 11) {
range = '-12:+1';
} else {
range = '-12:+0';
}
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
yearRange: range
});
});
You can check it working out by changing the condition as if (month == 03 || month == 11).
Alternate
$(function () {
var d = new Date();
var month = d.getMonth();
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
yearRange: (month == 10 || month == 11) ? '-12:+1' : '-12:+0'
});
});