如何基于Datepicker选定的日期禁用/启用提交按钮？

时间：2019-05-29 02:59:55

标签： jquery html datepicker

我有一个简单的表单，其中包含一个提交按钮和2个输入文本，分别称为“ date1 ”和“ date2 ”，并且都使用 DatePicker Gijgo插件（https://gijgo.com/datepicker）选择日期。

如果我从“ date2 ”中选择比今天少的日期，我想禁用提交按钮，如果我从“ data2 ”中选择日期，则启用提交按钮。比今天更大/相等。

在我发布之前，我研究了以下主题，但是我没有找到解决此问题的正确方法：

  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

下面是我正在工作的代码：

1。 CDN脚本 

<!-- 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/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />

2。 HTML表单代码 

<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脚本，该脚本从“ date1 ”中选择的日期之前的“ date2 ”禁用旧日期：

<!-- 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。最后，当我从“ date2”中选择一个比今天少（<）的日期时，我试图应用来禁用提交按钮的代码，但是不幸的是，它不起作用： 

<!-- 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>

在这种情况下，当我每次从“ date2 ”中选择一个小于今天的日期时，如何修改上面的脚本以禁用提交按钮，而当我选择一个日期时，如何启用提交按钮比今天更大/等于“ date2 ”？

2 个答案:

答案 0 :(得分：1)

您不能直接比较日期。日期需要精确地格式化/解析为mm，dd，yyyy，然后您需要特别检查日期和年份的条件。

此外，您无需在同一选择器上两次使用日期选择器。

请找到以下脚本。我已经在插件中进行了测试，日期2已被正确格式化和验证，并且提交按钮也按预期工作。还需要使用“更改”而不是“ 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>

柱塞网址： https://plnkr.co/edit/brCcHutewGoZe2a1cdjl?p=preview

答案 1 :(得分：1)

使用change事件捕获设置的日期并与当前时间进行比较。然后根据比较设置按钮的禁用状态。

.....
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/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/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>

相关问题
最新问题