Сохранение кнопки «ОК» отключенной, если день не выбран в «Выбор даты». - PullRequest
Новая
       6

Сохранение кнопки «ОК» отключенной, если день не выбран в «Выбор даты».

0 голосов
/ 11 сентября 2018

При выборе даты из средства выбора даты Materialise пользователь иногда может не выбрать день по многим неизвестным причинам, но кнопка «ОК» остается активной, предлагая им щелкнуть, и, конечно, значение даты не выбирается.

До сих пор, после того, как они нажимают «ОК», я могу проверить, что значение даты пустое, предлагая им выбрать день.

Однако мой вопрос касается деактивации кнопки «ОК» вместе, чтобы им пришлось выбрать день, чтобы сделать ее активной. Может быть, есть опция материализации, которую я не нашел в руководстве

Код: 

var currYear = (new Date()).getFullYear();

$(document).ready(function() {
  $(".datepicker").datepicker({
    defaultDate: new Date(currYear-5,1,31),
    // setDefaultDate: new Date(2000,01,31),
    maxDate: new Date(currYear-5,12,31),
    yearRange: [1928, currYear-5],
    format: "yyyy/mm/dd"    
  });
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">


<div class="container">
  <br><br><br><br><br><br><br>
  <div class="col s12 m10 offset-m1 l6 offset-l3">

    <div class="row">
      <form action="" class="col s12 m8 offset-m2 l6 offset-l3">
        <div class="row">
          <div class="input-field">
            <input type=text name="bdate" id="bdate" class="datepicker" required>
            <label for="bdate">Birthday</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field">
            <input name="email" id="email" type="text" class="validate">
            <label for="email">Email</label>
          </div>
        </div>
      </form>
    </div>

  </div>

1 Ответ

0 голосов
/ 11 сентября 2018

Вы можете реализовать onOpen и onSelect метод datepicker. В materialise css такой функции нет, думаю, попробуйте ниже обновленный код .. 

var currYear = (new Date()).getFullYear();

$(document).ready(function() {
      $(".datepicker").datepicker({
        defaultDate: new Date(currYear-5,1,31),
        // setDefaultDate: new Date(2000,01,31),
        maxDate: new Date(currYear-5,12,31),
        yearRange: [1928, currYear-5],
        format: "yyyy/mm/dd",
        onOpen:function(){
         $('.datepicker-done').prop("disabled", true);
        },
        onSelect:function(){
           $('.datepicker-done').prop("disabled", false);
        }
      });
    });
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">


<div class="container">
  <br><br><br><br><br><br><br>
  <div class="col s12 m10 offset-m1 l6 offset-l3">

    <div class="row">
      <form action="" class="col s12 m8 offset-m2 l6 offset-l3">
        <div class="row">
          <div class="input-field">
            <input type=text name="bdate" id="bdate" class="datepicker" required>
            <label for="bdate">Birthday</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field">
            <input name="email" id="email" type="text" class="validate">
            <label for="email">Email</label>
          </div>
        </div>
      </form>
    </div>

  </div>
...