CODEWITHSUNDEEP
jqueryhtmldatepicker
Michel Xavier
Michel Xavier

Reputation: 145

How to disable/enable submit button based on Datepicker selected date?

I have a simple form that contains one submit button and 2 input text, that call "date1" and "date2" and both are using DatePicker Gijgo plugin (https://gijgo.com/datepicker) to select date.

I would like to disable submit button if i select date from "date2" that is less than today and enable submit button if i select date from "data2" that is greater/equal than today.

Before i post here, i researched the topics below, but i didn't find the correct way to solve this:

  1. JQuery Datepicker OnSelect and TextChanged problem
  2. Activate button when two datepickers fields have values
  3. jQuery disable or enable submit button based on dates

Below is the code that i'm working:

1. CDN Scripts

<!-- BOOTSTRAP CSS CDN -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />

<!-- BOOTSTRAP SCRIPT CDN -->

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- DATEPICKER SCRIPT CDN -->

<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />

2. HTML form code

<div class="container" style="max-width:507px;">
<br>
<form method="post" id="date_form" enctype="multipart/form-data">

<div class="form-row">

<div class="col-md-6 mb-3">
<label align="left"><b>Date 1</b></label>
<input type="text" name="date1" id="date1" class="form-control"/>

</div>

<div class="col-md-6 mb-3">
<label align="left"><b>Date 2</b></label>
<input type="text" name="date2" id="date2" class="form-control"/>

</div>

</div>

</form>

<div class="form-footer">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-success" value="SUBMIT" disabled/>
</div>
</div>
  1. DatePicker script that disable old date from "date2" before the date that was selected at "date1":

<!-- DATEPICKER SCRIPT -->

<script>

var today = new Date();
        $('#date1').datepicker({
            format: 'dd/mm/yyyy',
            uiLibrary: 'bootstrap4',
            iconsLibrary: 'fontawesome',
            maxDate: function () {
                return $('#date2').val();
            }
        });
        $('#date2').datepicker({
            format: 'dd/mm/yyyy',
            uiLibrary: 'bootstrap4',
            iconsLibrary: 'fontawesome',
            minDate: function () {
                return $('#date1').val();
            }
        });

</script>

4. And finaly, the code that i'm trying to apply to disable submit button when i selected a date from "date2" that is less (<) than today, but unfortunately it doesn't works:

<!-- SCRIPT TO DISABLE SUBMIT BUTTON IF ***date2*** IS LESS THAN TODAY -->

<script>

$('#date2').datepicker({
    dateFormat: 'dd/mm/yyyy',
    onSelect: function(dateText){
        var date2 = $('#date2').val();
            var curDate = new Date();
            if(date2 < curDate){
$("#btnSubmit").attr("disabled", true);
            }else{
$("#btnSubmit").attr("disabled", false);
            }
        }
});
</script>

In this case, how can i modify this script above to disable submit button when i select each time a date from "date2" that is less than today and enable submit button when i select a date from "date2" that is greater/equal than today?

Upvotes: 0

Views: 5885

Answers (2)

PeterKA
PeterKA

Reputation: 24638

Use the change event to capture the set date and compare to current time. Then set the button's disabled state based on the comparison.

.....
change: function(e) {
    //get date in yyyy/mm/dd format
    var vl = $(this).val().split('/').reverse().join('/');
    //getTime to compare with current timestamp
    var ds = new Date(vl).getTime();
    //current timestamp
    var dn = e.timeStamp;
    $('#btnSubmit').prop('disabled', ds<dn);
}
....


        $('#date1').datepicker({
            format: 'dd/mm/yyyy',
            uiLibrary: 'bootstrap4',
            iconsLibrary: 'fontawesome',
            maxDate: function () {
                return $('#date2').val();
            }
        });
        $('#date2').datepicker({
            format: 'dd/mm/yyyy',
            uiLibrary: 'bootstrap4',
            iconsLibrary: 'fontawesome',
            minDate: function () {
                return $('#date1').val();
            },
            change: function(e) {
              //get date in yyyy/mm/dd format
              var vl = $(this).val().split('/').reverse().join('/');
              //getTime to compare with current timestamp
              var ds = new Date(vl).getTime();
              //current timestamp
              var dn = e.timeStamp;
              $('#btnSubmit').prop('disabled', ds<dn);
            }
        });
<!-- BOOTSTRAP CSS CDN -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />

<!-- BOOTSTRAP SCRIPT CDN -->

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- DATEPICKER SCRIPT CDN -->

<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<div class="container" style="max-width:507px;">
<br>
<form method="post" id="date_form" enctype="multipart/form-data">

<div class="form-row">

<div class="col-md-6 mb-3">
<label align="left"><b>Date 1</b></label>
<input type="text" name="date1" id="date1" class="form-control"/>

</div>

<div class="col-md-6 mb-3">
<label align="left"><b>Date 2</b></label>
<input type="text" name="date2" id="date2" class="form-control"/>

</div>

</div>

</form>

<div class="form-footer">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-success" value="SUBMIT"/>
</div>
</div>

Upvotes: 1

Vah Run
Vah Run

Reputation: 13389

You cant directly compare the dates. The date need to be formatted/parsed exactly into mm, dd, yyyy and then you need to check the conditions for the date and year specifically.

Also you dont need to use the datepicker two times on the same selector.

Please find the below script. I have tested this in the plunker and the date 2 is being formatted and validated exactly and also the submit button is working as expected. also you need use "change" not "onSelect"

<script>

        $('#date1').datepicker({
            format: 'dd/mm/yyyy',
            uiLibrary: 'bootstrap4',
            iconsLibrary: 'fontawesome',
            maxDate: function () {
                return $('#date2').val();
            }
        });


        $('#date2').datepicker({
          dateFormat: 'dd/mm/yyyy',
          format: 'dd/mm/yyyy',
                  uiLibrary: 'bootstrap4',
                  iconsLibrary: 'fontawesome',
                  minDate: function () {
                      return $('#date1').val();
                  },
          change: function(dateText){

              var date2 = $('#date2').val();
              var curDate = new Date();

              var cur_dd = curDate.getDate();
              var cur_mm = curDate.getMonth() + 1; //January is 0!

              var cur_yyyy = parseInt(curDate.getFullYear());
              if (cur_dd < 10) {
                cur_dd = parseInt('0' + cur_dd);
              } 
              if (cur_mm < 10) {
                cur_mm = parseInt('0' + cur_mm);
              } 
              curDate = cur_dd + '/' + cur_mm + '/' + cur_yyyy;

              var date2Arr = date2.split('/');
              var date2_dd = date2Arr[0];
              var date2_mm = date2Arr[1]; 
              var date2_yyyy = parseInt(date2Arr[2]);


              if (date2_dd < 10) {
                date2_dd = parseInt('0' + date2_dd);
              } 
              if (date2_mm < 10) {
                date2_mm = parseInt('0' + date2_mm);
              } 
              date2 = date2_dd + '/' + date2_mm + '/' + date2_yyyy;

              if(date2_yyyy < cur_yyyy){
                $("#btnSubmit").attr("disabled", true);
              } else if(date2_yyyy === cur_yyyy && date2_mm <= cur_mm && date2_dd < cur_dd ) {
                $("#btnSubmit").prop("disabled", true);
              } else{
                $("#btnSubmit").prop("disabled", false);
              }
          }

        });
</script>

Plunker URL: https://plnkr.co/edit/brCcHutewGoZe2a1cdjl?p=preview

Upvotes: 1

Related Questions