We help IT Professionals succeed at work.

Months validation on date picker based on drop down not working

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

Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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

Author

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

Author

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

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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

Open in new window

Author

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

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
replace :
if(save()){
by ;
if(true){

Author

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

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
I said "true" not True()

Author

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

Author

Commented:
Hi Any update on this , please help me out on above asap .
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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

Author

Commented:
Hi leakim thanx for your support please tell me how to get month value from drop down and where to put in my code .
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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

Open in new window

Author

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

Commented:
what was your question ?
I believe you don't want it static so it's line 80

Author

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

Author

Commented:
Thank You very much Leakim for your support.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
you welcome