选择所有日期范围选择器后启用按钮

Question

我有 2 个single date daterangepickers。我有一个禁用的按钮。我只想在两者都按日期填充后才启用它。如果不是，则必须将其禁用。

这是我的代码：

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>

现在，它在填充日期字段之一后立即启用。无论如何我可以启用只有两个字段都被填充的按钮？

Answer 1

添加一个对象来存储日期，检查是否有两个日期

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>

或者您可以使用

检查两个输入

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

选择所有日期范围选择器后启用按钮

Enable button after all daterangepickers are selected

javascript

jquery

daterangepicker

ecmascript-6

bootstrap-daterangepicker