javascriptjqueryecmascript-6daterangepickerbootstrap-daterangepicker

Enable button after all daterangepickers are selected

I have 2 single date daterangepickers. I have a button that is disabled. I want to enable it only after both are populated by dates. If not it has to be disabled.

This is my code:

let arr = ['one', 'two'];

arr.forEach(iv=>{
    $(`#${iv}.input_value`).daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        autoUpdateInput: false,
    autoApply: true,
    }, function(the_date) {
        $(`#${iv}.input_value`).val(the_date.format('MMM DD, YYYY'));
    $('#submit_data').removeAttr('disabled');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type='text' id='one' class='input_value' autocomplete='off' />
<input type='text' id='two' class='input_value' autocomplete='off' />
<button id='submit_data' type='submit' disabled>Submit</button>

Right now, it is enabling right after the populate one of the date fields. Is there anyways I can enable the button only of both fields are filled?

Solution

  • Add an object to store the dates, check if you have two dates

    let arr = ['one', 'two'];

let dates = {};

arr.forEach(iv=>{
    $(`#${iv}.input_value`).daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        autoUpdateInput: false,
    autoApply: true,
    }, function(the_date) {
        $(`#${iv}.input_value`).val(the_date.format('MMM DD, YYYY'));
        dates[iv] = the_date;
        if (Object.keys(dates).length > 1) {
          $('#submit_data').removeAttr('disabled');
        }
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type='text' id='one' class='input_value' autocomplete='off' />
<input type='text' id='two' class='input_value' autocomplete='off' />
<button id='submit_data' type='submit' disabled>Submit</button>

    or you could just check both inputs with

    if ($('#one').val() && $('#two').val()) {
  $('#submit_data').removeAttr('disabled');
}