We help IT Professionals succeed at work.
Get Started

Months validation on date picker based on drop down

puneet kumar
puneet kumar asked
on
191 Views
Last Modified: 2020-02-19
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 .


<%@ 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>

Open in new window

Comment
Watch Question
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2020
Commented:
This problem has been solved!
Unlock 1 Answer and 8 Comments.
See Answer
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

An Experts Exchange subscription includes unlimited access to online courses.

Get Started
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