Home/ Questions/Q 4064256
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T15:49:54+00:00

I am using jQuery datepicker, I have two datepicker input fields, like following: <html>

  • 0

I am using jQuery datepicker, I have two datepicker input fields, like following:

<html>
<body>
    <form method=post>
        <input type=text id='start_date'> //datepicker field
        <input type=text id='end_date'>  // datepicker field
        <input type=submit value=Submit>
    </form>
</body>
</html>

I would like to implement the feature that, the form submit button is disable unless both datepicker input fields have selected date value from datepicker calendar.

That’s if both date fields have selected date value, the button is enabled automatically. How to implement this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    havent tried to see if this works but something like this if you have jquery

    NEW answer : added a new script.

    <script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");

             var startDate = "";
             var endDate = "";
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    startDate = dateText;
                    if(endDate != ""){ ValidateDates(); }
                 }
             });
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    endDate = dateText;
                    if(startDate != ""){ ValidateDates(); }
                 }
             });

             function ValidateDates(){
                 //Validate the dateformats and remove the attribute
             };

         });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>

    OLD answer :

    <script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");
             $(".valDate").change(function(){
                if($("#start_date).val() != "" && $("#end_date").val() != ""){
                   //validation logic to see if the date is valid
                   $("#sumbit").removeAttr("disabled");
                }
            else{
               $("#sumbit").disabled("disabled", "disabled");
            }
         });
     });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>
    • 0