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.
Related
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
})
I'm trying to create 12 months jquery UI Datepicker with date range selection.
I'm using
numberOfMonths: [12,1],
which is working fine
Problem is when i try to select two dates between two months (March,15,2016 to April,15,2016) calendar wills start from April i cant edit previous month dates, i want to keep 12 months in every condition in short i need 12 months jquery datepicker which can select two dates. my code is
<div id="jrange" class="dates">
<input type="text" id="startDate" size="10" placeholder="9 Mar" readonly>
<span id="spaceDash">–</span>
<input type="text" id="endDate" size="10" placeholder="10 Mar" readonly>
<div></div>
</div>
$(document).ready(function(){
$("#jrange div").datepicker({
minDate: 0,
numberOfMonths: [12,1],
dateFormat: "MM dd",
showMonthAfterYear: true,
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#startDate").val());
var date2 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#endDate").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#startDate").val());
var date2 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#endDate").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker("option", "minDate", dateText);
} else {
$("#input2").val(dateText);
$(this).datepicker("option", "minDate", null);
}
}
});
I want to disable all the Sunday,Monday and Wednesday from my jquery date-picker. I am trying to do this using the following code sample -
jQuery(document).ready(function($) {
$(".datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 1), ''];
}
})
});
This code disable all Mondays from the calender. How can i disable all Sunday and Wednesdays too?
try this code
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
});
$(".datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 1 && day != 3 && day != 0), ''];
}
});
The days of week go as 0 - Sunday, 1 - Monday and so on.
So day != DayNumber will solve it for you.
Fiddle
I have this script for selecting date.
<script type='text/javascript'>
$(function () {
$("#datepicker").datepicker({
minDate: "-5M",
maxDate: "-1M",
changeMonth: true,
changeYear: true
});
});
function Image13_onclick() {
}
</script>
this allows me to select any date from past five months. I want just one month for the user to select and that should be previous
month. For example if current month is March then datepicker should only have Feb.
Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
So you only need to calculate the right min date and max date. JS Fiddle
$(function () {
var date = new Date();
var maxDate = "-" + date.getDate() + "D";
var minDate = "-1M " + "-" + (date.getDate() - 1) + "D";;
$("#datepicker").datepicker({
minDate: minDate,
maxDate: maxDate,
changeMonth: true,
changeYear: true
});
});
I have this code to restrict various "datepicker dates". :
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
})({
changeMonth: true,
changeYear: true
});
$(".datepicker").datepicker;
});
var calcDate = function() {
var start = $('#conference_date_in').datepicker('getDate');
var end = $('#conference_date_out').datepicker('getDate');
var days = (end - start) / 1000 / 60 / 60 / 24;
document.getElementById('total_days').value = days;
}
$('#conference_date_out').change(calcDate);
({ minDate: -20, maxDate: "+1M +10D" });
$('#conference_date_in').change(calcDate);
</script>
Is my min/max date in the wrong section?
You have to set mindate and max date like this
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
Example
Reference: mindate and maxdate
And if you want to disable a specific date range you can use the following code
// unavailable dates range
var dateRange = ["2012/05/20","2012/05/29"]; // yyyy/MM/dd
function unavailable(date) {
var startDate = new Date(dateRange[0]);
var endDate = new Date(dateRange[1]);
var day = date.getDay();
if(date > startDate && date < endDate )
return [false, "disabled"];
else if(day > 0 && day < 6)
return [true, "enabled"];
else
return [false, "disabled"];
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
Working Fiddle