Как отключить / включить кнопку отправки на основе выбранной даты Datepicker? - PullRequest
Новая
       2

Как отключить / включить кнопку отправки на основе выбранной даты Datepicker?

0 голосов
/ 29 мая 2019

У меня есть простая форма, которая содержит одну кнопку отправки и 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>
Сценарий DatePicker, который отключает старую дату от « date2 » до даты, выбранной в « 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.И наконец, код, который я пытаюсь применить, чтобы отключить кнопку отправки, когда я выбрал дату из «date2», которая меньше (<), чем сегодня, но, к сожалению, она не работает: </strong>

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

1 голос
/ 29 мая 2019

Используйте событие 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>
1 голос
/ 29 мая 2019

Вы не можете напрямую сравнивать даты.Дата должна быть отформатирована / проанализирована точно в мм, дд, гггг, а затем вам нужно проверить условия для даты и года.

Также вам не нужно использовать средство выбора даты два раза на одном и том же селекторе.

Пожалуйста, найдите ниже скрипт.Я проверил это в плунжере, и дата 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 URL: https://plnkr.co/edit/brCcHutewGoZe2a1cdjl?p=preview

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...