在 Materialize 日期选择器中未选择日期时保持 OK 按钮禁用

Question

当 select 从 Materialise 日期选择器中输入日期时，用户有时可能会因为许多未知原因而不能 select 一天，但 "OK" 按钮仍然处于活动状态，促使他们点击当然没有日期值是 selected.

到目前为止，在他们点击 "ok" 之后，我可以检查日期值是否为空，提示他们 select 一天。

但是，我的问题是关于一起停用 "OK" 按钮，这样他们必须每天 select 才能将其激活。可能有我在 guide

中找不到的 Materialize 选项

代码：

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>

Answer 1

您可以实现 datepicker 的 onOpen 和 onSelect 方法。 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>

在 Materialize 日期选择器中未选择日期时保持 OK 按钮禁用

Keeping OK button disabled when day is not selected in Materialize datepicker

html

javascript

jquery

materialize