We help IT Professionals succeed at work.
Get Started
Months validation on date picker based on drop down
Hi Team,
I build a page where one drop down is there in drop down all weeks days are coming while selecting the date all days only enable in date picker . suppose we select Monday from drop down then in date picker only all Mondays are enable to select other days are disable .
now my requirement is that in place of days we select month from drop down then only that particular month is enable on date picker other months are disable to select .
I build a page where one drop down is there in drop down all weeks days are coming while selecting the date all days only enable in date picker . suppose we select Monday from drop down then in date picker only all Mondays are enable to select other days are disable .
now my requirement is that in place of days we select month from drop down then only that particular month is enable on date picker other months are disable to select .
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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>
<script>
$(document).ready(function ()
{
//datepicker
$("#txtstart_date").datepicker
({
minDate:"dateToday",
dateFormat: 'dd-mm-yy',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$("#txtend_date").datepicker("option", "minDate", selectedDate);
},
//Code to disable dates according to selection
beforeShowDay: filterDate
});
});
//By default no day selected in dropdown. So all the days will be displayed.
var str=0;
//Filterdate function to make the days enable/disable based on the selection.
var filterDate = function(date) {
if(str=='0'){
return [true];
}else{
return [date.getDay() == str];
}
};
//Dropdown onchange function to set latest selection of dropdown.
function test()
{
str=$( "#drop1" ).val();
}
</script>
</head>
<body>
<form action="" id="myForm" method="post">
<input type="text" name="txtstart_date" class="input-text datepickerwidth required" id="txtstart_date" placeholder="Start Date*"/>
<select onchange="test()" id="drop1">
<option value="0">Select Month</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
<input id="btnSubmit" type="submit" value="submit" />
</form>
</body>
</html>
Why Experts Exchange?
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
Jim Murphy
Programmer at Smart IT Solutions
When asked, what has been your best career decision?
Deciding to stick with EE.
Mohamed Asif
Technical Department Head
Being involved with EE helped me to grow personally and professionally.
Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question
Connect with Certified Experts to gain insight and support on specific technology challenges including:
- Troubleshooting
- Research
- Professional Opinions
Did You Know?
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE