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

When selecting a date from Materialize datepicker, a user sometimes may not select a day for many unknown reasons, but the "OK" button remains active, promoting them to click and of course no date value is selected.

So far, after they click "ok", I can be able to check that the date value is empty prompting them to select a day.

However, my question is about deactivating the "OK" button all together so that they have to select a day to make it active. May be there is Materialize option which I've not found from the guide

Code:

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>

Solution

You can implement onOpen and onSelect method of datepicker. There no such feature inbuilt in materialise css I guess so Try below updated code..

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>