Avatar of puneet kumar
puneet kumar
 asked on

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 .


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

JavaScriptjQueryJSP

Avatar of undefined
Last Comment
puneet kumar

8/22/2022 - Mon
leakim971

could you setup a working test page on https://jsfiddle.net ?
puneet kumar

ASKER
Hi lekim thanx for your reply i have done setup with fiddle please find the link below -

Link of my fiddle

https://jsfiddle.net/erpuneetsrivastava/exbm613z/9/

but please remember what i did i just want to meet my requirement but till now i did't  ,validation i want that based on drop down value  suppose i select 1 from drop down it means January so only January should be enable on date picker , other months should be disable . hope you understand the requirement please help me out on this to me .
leakim971

I will be back shortly, don't worry just too busy for now
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER CERTIFIED SOLUTION
leakim971

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
puneet kumar

ASKER
Hi leakim,

Thank you for you help i have done the scripting in my code before i am sending ajax call as you suggested but it's not working please help me out on this .
below is my code where Id having name mYear is the month drop down and date picker id are pdate,ppdate and bdate where we need to put that
logic . please check below code and let me know if you need more clearance.

var monthYear=0;
monthYear = $('#mYear').val();; 
		alert(mYear);
		$("#pdate").datepicker
			({
	   			minDate:"dateToday",
	   			dateFormat: 'dd/mm/yy',
	   			changeMonth: true,
	   			numberOfMonths: 1,
	   			onClose: function (selectedDate) {
	 						$("#pdate").datepicker("option", "minDate", selectedDate);
	   								},
	   							//Code to disable dates according to selection
	   							beforeShowDay: filterDate
			});
 var filterDate = function(date) {
     if(monthYear=='0'){
       return [true];
     }else{          
       return [(1+date.getMonth()) == monthYear];
     }
 }
  $(document).ready(function() {  
	 $("#sdata").click(function(evt) {
		evt.preventDefault();
		 if(save()){
			$.ajax({
				url: "Test.jsp",
				type: "post",
				data: {
				pS:$('#pS').val(),
				pType:$('#pT').val(),
				pCode:$('#pC').val(),
				mYear:$('#mYear').val(),
				pDate:$('#pdate').val(),
				ppDate:$('#ppdate').val(),
				bDate:$('#bdate').val()},
				success: function(responseFromServer) {
	            	$.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
	                    $('#content').html(resultMessageKey);
	                });
	            	getClearDateValues();
	             },
	            error: function() {
	                alert(" Ajax call Failed to Update Values into Database");
	            }
			});
		 }
		 else
			 {
			 
			 }
	});
});

Open in new window

leakim971

you did not talk about ajax thing in your orginal post
your question is now confusing
could you validate your inital question is answered and create a new one ?

at first look you did not put the code inside the << $(document).ready(function() { >> block
puneet kumar

ASKER
Hi Leakim,

Thanx for your support i have create a new thread please tell me where i am doing wrong in that thread. new thread link is below -

https://www.experts-exchange.com/questions/29173149/Months-validation-on-date-picker-based-on-drop-down-not-working.html#questionAdd
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
puneet kumar

ASKER
Leakim is very technically sound and supportive.