Link to home
Start Free TrialLog in
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

Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

Avatar of puneet kumar
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

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

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

Open in new window

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

replace :
if(save()){
by ;
if(true){
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

I said "true" not True()
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.
Hi Any update on this , please help me out on above asap .
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

Hi leakim thanx for your support please tell me how to get month value from drop down and where to put in my code .
monthYear = $("#drop1").val();

Open in new window

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.
what was your question ?
I believe you don't want it static so it's line 80
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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank You very much Leakim for your support.
you welcome