Months validation on date picker based on drop down not working

Question

Solutionbased on DropDown Value TR will open having another DropDown.

Answer 1 · 2020-02-19T05:17:37-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-19

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

Answer 2 · 2020-02-19T05:45:52-0800

puneet kumar

Author

Commented: 2020-02-19

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

Answer 3 · 2020-02-20T04:14:49-0800

puneet kumar

Author

Commented: 2020-02-20

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

Answer 4 · 2020-02-20T23:41:45-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-20

where is "save" function ?
line 11 :

if(save()){

Open in new window

Answer 5 · 2020-02-21T02:29:35-0800

puneet kumar

Author

Commented: 2020-02-21

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

Answer 6 · 2020-02-21T08:21:41-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-21

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

Answer 7 · 2020-02-21T09:12:02-0800

puneet kumar

Author

Commented: 2020-02-21

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

Answer 8 · 2020-02-21T09:50:11-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-21

I said "true" not True()

Answer 9 · 2020-02-21T09:58:51-0800

puneet kumar

Author

Commented: 2020-02-21

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.

Answer 10 · 2020-02-24T09:46:31-0800

puneet kumar

Author

Commented: 2020-02-24

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

Answer 11 · 2020-02-25T14:55:24-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-25

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

Answer 12 · 2020-02-25T21:31:24-0800

puneet kumar

Author

Commented: 2020-02-25

Hi leakim thanx for your support please tell me how to get month value from drop down and where to put in my code .

Answer 13 · 2020-02-26T03:30:34-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-26

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

Open in new window

Answer 14 · 2020-02-26T03:32:00-0800

puneet kumar

Author

Commented: 2020-02-26

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.

Answer 15 · 2020-02-26T05:31:52-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-26

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

Answer 16 · 2020-02-26T05:39:25-0800

puneet kumar

Author

Commented: 2020-02-26

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 .

Answer 17 · 2020-02-26T13:09:33-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-26

same line...

Answer 18 · 2020-02-27T21:13:54-0800

puneet kumar

Author

Commented: 2020-02-27

Thank You very much Leakim for your support.

Answer 19 · 2020-02-27T22:17:57-0800

leakim971Multitechnician

CERTIFIED EXPERT

Distinguished Expert 2019

Commented: 2020-02-27

you welcome

Months validation on date picker based on drop down not working

Premium Content

Premium Content

View Solution Only

Explore More Content

Explore More ContentExplore courses, solutions, and other research materials related to this topic.