Hi Team,
I am trying to enable only the upcoming 2weeks i.e from current week friday to the second week thursday.
For example: today's date is 25th so the upcoming friday will be 27th. So I would like to enable the date from 27th Friday June to
July 10th Thursay.
Please help me out. I have used the mindate and maxdate, but that should be updated manually for every week.
<script> $(function() { $( "#datepicker" ).datepicker({ minDate: +2, maxDate: "+2w +1D" }); });
</script>
Hmmm, this might need a little tinkering but it can be done.
Take a look at this: W3Schools - getUTCDate
First, I would use that to get the current day, then compare the current day to an array to see how far from Friday that day is. The array could look something like this:
var dayOfWeek = new Array(7);
dayOfWeek[0] = "Sunday";
dayOfWeek[1] = "Monday";
dayOfWeek[2] = "Tuesday";
dayOfWeek[3] = "Wednesday";
dayOfWeek[4] = "Thursday";
dayOfWeek[5] = "Friday";
dayOfWeek[6] = "Saturday";
And then use the minDate parameter to add whatever days needed. This should be enough info to get you started. Let me know if you have any questions. Try not to ask for a straight up solution though. I'd love to help after seeing you've tried.
thank you for the post.
I have used the below it worked but it may be a stupid code. I want to implement bit professional. Please help
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery.datepick.css">
<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
var d = new Date();
var n = d.getDay();
var y, z, x;
var a = 15;
if(n==1){
z=n+4;
y=z-n;
x= a+2;
}
else if(n==2){z=n+3;
y=z-n;
x= a+1;
}
else if(n==3){z=n+2;
y=z-n;
x= a+0;
}
else if(n==4){z=n+1;
y=z-n;
x= a-1;
}
else if(n==5){y=0;
x= a-2;
}
else if(n==6){
z=n+6;
y=z-n;
x= a+4;}
else if(n==0){
alert(n);
z=n+5;
y=z-n;
x= a+3;
}
$( "#datepicker" ).datepicker({minDate: y, maxDate: "+"+x+"D",
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif'
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" readyonly="readonly"></p> </body>
</html>
A good idea is to get used to working with descriptive variable names. It is great to see that you got a working solution on your own. Here's something a little more efficient:
var date = new Date();
var numberOfDay = date.getDay();
// Since Friday is always 5 in the getDay array
// we can compare against that to get the difference
var offsetFromFriday = 5 - numberOfDay;
// Initialize minDate as zero to begin with
var minDate = 0;
if(offsetFromFriday >= 0) {
// Friday is still to come in the week
// so let's add the remaining days to minDate
minDate = "+" + offsetFromFriday;
} else {
// Friday has passed, which means it must be Saturday
// so let's add 6 days to get to next Friday
minDate = "+6";
}
$(document).ready(function(e) {
// minDate --> whatever we get from up there
// maxDate --> 2 weeks from minDate PLUS whatever offset days to get to Friday
$( "#datepicker" ).datepicker({minDate: minDate, maxDate: "+2W +" + offsetFromFriday + "D",
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif'
});
});
If you got everything you needed, please mark the thread solved.
Cheers!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.