时间戳

首页 > 解决方案 > 如何根据 Datepicker 选择的日期禁用/启用提交按钮？

jquery - 如何根据 Datepicker 选择的日期禁用/启用提交按钮？

问题描述

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

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

在我在这里发帖之前，我研究了以下主题，但我没有找到解决这个问题的正确方法：

  1. JQuery Datepicker OnSelect 和 TextChanged 问题
  2. 当两个日期选择器字段具有值时激活按钮
  3. jQuery 基于日期禁用或启用提交按钮

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

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

<!-- 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 ”中选择大于/等于的日期时启用提交按钮今天？

标签： jqueryhtmldatepicker

解决方案

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

此外，您不需要在同一个选择器上使用 datepicker 两次。

请找到以下脚本。我已经在 plunker 中对此进行了测试，并且日期 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>

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

推荐阅读