Avatar of puneet kumar
puneet kumar
 asked on

Months validation on date picker based on drop down not working

Hi Team,

my requirement is like select 1 from drop down it means January so only January should be enable on date picker , other months should be disable . if need more clarification please let me know .
below is my code please help me out where i m doing wrong.



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

JavaJavaScriptjQueryJava EE

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
leakim971

move your code inside the document ready block

$(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
        {

        }
    });

    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];
        }
    }

});

Open in new window

puneet kumar

ASKER
Hi Leakim its not working thank you for your support my code is below please have a look where i m wrong .


$(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
        {

        }
    });

    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
	 	 });
	    $("#bdate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#bdate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    $("#ppdate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#ppdate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    var filterDate = function(date) {
	        if(mYear=='0'){
	            return [true];
	        }else{
	            return [(1+date.getMonth()) == mYear];
	        }
	    }

});

Open in new window

puneet kumar

ASKER
Hi Leakim please my code above and let me know where i m doing wrong its not giving desired output.even for testing i just hard coded the month value is 2 it means only February month is enable other months are disabled but it's not giving desired result.

<!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() {
    $("#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
        {

        }
    });

    	var monthYear=0;
	    //monthYear = $('#mYear').val();
		$("#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
	 	 });
	    $("#ppDate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#ppDate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    $("#bDate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#bDate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    var filterDate = function(date) {
	    	monthYear = 2 ;   //// here i hard coded month value
	    	alert(monthYear);
	        if(monthYear=='0'){
	            return [true];
	        }else{
	            return [(1+date.getMonth()) == monthYear];
	        }
	    }

});
</script>
  </head>
<body>
	<form action="" id="myForm" method="post">
	<select id="drop1">
	    <option value="0">Select Month</option>
	    <option value="1">January</option>
	    <option value="2">February</option>
	    <option value="3">March</option>
	    <option value="4">April</option>
	    <option value="5">May</option>
	    <option value="6">June</option>
	</select>
	<input type="text" name="pDate" class="input-text datepickerwidth required" id="pDate" placeholder="Start Date*"/>
	<input type="text" name="ppDate" class="input-text datepickerwidth required" id="ppDate" placeholder="Start Date*"/>
	<input type="text" name="bDate" class="input-text datepickerwidth required" id="bDate" placeholder="Start Date*"/>
    <input id="sdata" type="submit" value="submit" />
	</form>
</body>
</html>

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
leakim971

where is "save" function ?
line 11 :
if(save()){

Open in new window

puneet kumar

ASKER
Hi Leakim thanks for your reply i forget to copy here full function please refer below code -


<!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() {
    $("#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
        {

        }
    });

    	var monthYear=0;
	    //monthYear = $('#mYear').val();
		$("#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
	 	 });
	    $("#ppDate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#ppDate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    $("#bDate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#bDate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    var filterDate = function(date) {
	    	monthYear = 2 ;   //// here i hard coded month value
	    	alert(monthYear);
	        if(monthYear=='0'){
	            return [true];
	        }else{
	            return [(1+date.getMonth()) == monthYear];
	        }
	    }

});

 function getClearDateValues(){
	 $("#pdate").val("");
	 $("#ppdate").val("");
	 $("#bdate").val("");
}

function save()
{

if(!ValidateJScrip())
return false;
	var pdate,ppdate,bdate;
	pdate = document.getElementById("pdate").value;
	bdate = document.getElementById("ppdate").value;
	ppdate = document.getElementById("bdate").value;
	pdate1 = Date.parse(pdate);
	bdate1 = Date.parse(bdate);
	ppdate1 = Date.parse(ppdate);
	

	if(document.forms.form2.pdate.value == '')
	{
		alert("Please select pDate");
		document.forms.form2.pdate.focus();
		return;
	
	return true;
}
</script>
  </head>
<body>
	<form action="" id="myForm" method="post">
	<select id="drop1">
	    <option value="0">Select Month</option>
	    <option value="1">January</option>
	    <option value="2">February</option>
	    <option value="3">March</option>
	    <option value="4">April</option>
	    <option value="5">May</option>
	    <option value="6">June</option>
	</select>
	<input type="text" name="pDate" class="input-text datepickerwidth required" id="pDate" placeholder="Start Date*"/>
	<input type="text" name="ppDate" class="input-text datepickerwidth required" id="ppDate" placeholder="Start Date*"/>
	<input type="text" name="bDate" class="input-text datepickerwidth required" id="bDate" placeholder="Start Date*"/>
    <input id="sdata" type="submit" value="submit" />
	</form>
</body>
</html>

Open in new window

leakim971

replace :
if(save()){
by ;
if(true){
⚡ 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
Hi leakim many many thanks for above solution i did the changes is not working my question is that first where i m wrong  please tell me second here i am hard coded month so how can i take from drop down . please help me out on this i am really stuck on this and need your help . please help me out . my code is below -

<!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() {
    $("#sdata").click(function(evt) {
        evt.preventDefault();
        if(true()){
            $.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
        {

        }
    });

    	var monthYear=0;
	    //monthYear = $('#mYear').val();
		$("#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
	 	 });
	    $("#ppDate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#ppDate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    $("#bDate").datepicker({
	    	minDate:"dateToday",
	        dateFormat: 'dd/mm/yy',
	        changeMonth: true,
	        numberOfMonths: 1,
	        onClose: function (selectedDate) {
	            $("#bDate").datepicker("option", "minDate", selectedDate);
	        },
	        //Code to disable dates according to selection
	        beforeShowDay: filterDate
	 	 });
	    var filterDate = function(date) {
	    	monthYear = 2 ;   //// here i hard coded month value
	    	alert(monthYear);
	        if(monthYear=='0'){
	            return [true];
	        }else{
	            return [(1+date.getMonth()) == monthYear];
	        }
	    }

});

 function getClearDateValues(){
	 $("#pdate").val("");
	 $("#ppdate").val("");
	 $("#bdate").val("");
}

function save()
{

if(!ValidateJScrip())
return false;
	var pdate,ppdate,bdate;
	pdate = document.getElementById("pdate").value;
	bdate = document.getElementById("ppdate").value;
	ppdate = document.getElementById("bdate").value;
	pdate1 = Date.parse(pdate);
	bdate1 = Date.parse(bdate);
	ppdate1 = Date.parse(ppdate);
	

	if(document.forms.form2.pdate.value == '')
	{
		alert("Please select pDate");
		document.forms.form2.pdate.focus();
		return;
	
	return true;
}
}
</script>
  </head>
<body>
	<form action="" id="myForm" method="post">
	<select id="drop1">
	    <option value="0">Select Month</option>
	    <option value="1">January</option>
	    <option value="2">February</option>
	    <option value="3">March</option>
	    <option value="4">April</option>
	    <option value="5">May</option>
	    <option value="6">June</option>
	</select>
	<input type="text" name="pDate" class="input-text datepickerwidth required" id="pDate" placeholder="Start Date*"/>
	<input type="text" name="ppDate" class="input-text datepickerwidth required" id="ppDate" placeholder="Start Date*"/>
	<input type="text" name="bDate" class="input-text datepickerwidth required" id="bDate" placeholder="Start Date*"/>
    <input id="sdata" type="submit" value="submit" />
	</form>
</body>
</html>

Open in new window

leakim971

I said "true" not True()
puneet kumar

ASKER
HI Leakim it's not working again i set true only but when i select February all month are enabled , and please after this please tell me here i hard coded
for testing but how can i get the value from drop down and where i fit this function.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
puneet kumar

ASKER
Hi Any update on this , please help me out on above asap .
leakim971

put your filter data outside of the document ready block :

<!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() {
            $("#sdata").click(function(evt) {
                evt.preventDefault();
                if(true()){
                    $.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
                {

                }
            });

            var monthYear=0;
            //monthYear = $('#mYear').val();
            $("#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
            });
            $("#ppDate").datepicker({
                minDate:"dateToday",
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                numberOfMonths: 1,
                onClose: function (selectedDate) {
                    $("#ppDate").datepicker("option", "minDate", selectedDate);
                },
                //Code to disable dates according to selection
                beforeShowDay: filterDate
            });
            $("#bDate").datepicker({
                minDate:"dateToday",
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                numberOfMonths: 1,
                onClose: function (selectedDate) {
                    $("#bDate").datepicker("option", "minDate", selectedDate);
                },
                //Code to disable dates according to selection
                beforeShowDay: filterDate
            });

        });

        var filterDate = function(date) {
            monthYear = 2 ;   //// here i hard coded month value
            alert(monthYear);
            if(monthYear=='0'){
                return [true];
            }else{
                return [(1+date.getMonth()) == monthYear];
            }
        }

        function getClearDateValues(){
            $("#pdate").val("");
            $("#ppdate").val("");
            $("#bdate").val("");
        }

        function save()
        {

            if(!ValidateJScrip())
                return false;
            var pdate,ppdate,bdate;
            pdate = document.getElementById("pdate").value;
            bdate = document.getElementById("ppdate").value;
            ppdate = document.getElementById("bdate").value;
            pdate1 = Date.parse(pdate);
            bdate1 = Date.parse(bdate);
            ppdate1 = Date.parse(ppdate);


            if(document.forms.form2.pdate.value == '')
            {
                alert("Please select pDate");
                document.forms.form2.pdate.focus();
                return;

                return true;
            }
        }
    </script>
</head>
<body>
<form action="" id="myForm" method="post">
    <select id="drop1">
        <option value="0">Select Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
    </select>
    <input type="text" name="pDate" class="input-text datepickerwidth required" id="pDate" placeholder="Start Date*"/>
    <input type="text" name="ppDate" class="input-text datepickerwidth required" id="ppDate" placeholder="Start Date*"/>
    <input type="text" name="bDate" class="input-text datepickerwidth required" id="bDate" placeholder="Start Date*"/>
    <input id="sdata" type="submit" value="submit" />
</form>
</body>
</html>

Open in new window

puneet kumar

ASKER
Hi leakim thanx for your support please tell me how to get month value from drop down and where to put in my code .
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
leakim971

monthYear = $("#drop1").val();

Open in new window

puneet kumar

ASKER
Hi leakim please tell me where i have to fit in code . where i m hard coding month value in that place or some other place.
leakim971

what was your question ?
I believe you don't want it static so it's line 80
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
puneet kumar

ASKER
yes for testing line no 80 i put some month year value now where i put  below line

 monthYear = $("#drop1").val();

to get the month value from drop down and enable that particular month in calendar .
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
Thank You very much Leakim for your support.
leakim971

you welcome
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.