Question

从实现日期选择器中选择日期时，用户有时可能由于许多未知原因而不选择日期，但是“确定”按钮保持活动状态，促使他们单击，当然也没有选择日期值。

到目前为止，在他们单击“确定”之后，我可以检查日期值是否为空，提示他们选择一天。

但是，我的问题是关于一起取消激活“确定”按钮，以便他们必须选择一天来激活它。可能有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

您可以实现onOpen的{{1}}和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);
        }
      });
    });

在实现日期选择器中未选择日期时，保持“确定”按钮处于禁用状态

1 个答案: