We help IT Professionals succeed at work.

Months validation on date picker based on drop down

puneet kumar
puneet kumar asked
on
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

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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

Author

Commented:
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 .
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
I will be back shortly, don't worry just too busy for now
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
replace :
return [date.getDay() == str];
by :
return [(1+date.getMonth()) == str];

test page : https://jsfiddle.net/stw9fa1x/1/

Author

Commented:
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

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
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

Author

Commented:
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

Author

Commented:
Leakim is very technically sound and supportive.