JS Date picker with html5 required
<p>I am trying to make a Date field required and show a datepicker on click, I am using <a href="http://materializecss.com/forms.html#date-picker" rel="nofollow">materialize</a> date picker.</p>

<p>I can get a date picker to pop up, but the required html5 tag does not work.
<a href="https://jsfiddle.net/d5zswngw/" rel="nofollow">JSFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;!-- Compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"&gt;

  &lt;!-- Compiled and minified JavaScript --&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"&gt;&lt;/script&gt;

  &lt;!-- Icons --&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;

  &lt;!--Let browser know website is optimized for mobile--&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;

  &lt;div class="col s12"&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col s12 m4 l2"&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col s12 m4 l8"&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;div class="row"&gt;
      &lt;form&gt;
        &lt;input id="check_in_date" name="check_in_date" type="date" name="check_in_date" class="datepicker" required&gt;
        &lt;label for="check_in_date"&gt;Check In Date&lt;/label&gt;

        &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col s12 m4 l2"&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;



&lt;/body&gt;
&lt;script&gt;
  $('.datepicker').pickadate({
    format: 'dd/mm/yyyy',
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 5, // Creates a dropdown of 15 years to control year
    // editable: true
  });
  $(document).ready(function() {
    $('select').material_select();
  });
&lt;/script&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>If I set editable in the Date picker JS, the field becomes required, but the date picker does not show up on click (you have to press tab for it to show up)... 
<a href="https://jsfiddle.net/h494co9r/" rel="nofollow">JSFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;!-- Compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"&gt;

  &lt;!-- Compiled and minified JavaScript --&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"&gt;&lt;/script&gt;

  &lt;!-- Icons --&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;

  &lt;!--Let browser know website is optimized for mobile--&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;

  &lt;div class="col s12"&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col s12 m4 l2"&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col s12 m4 l8"&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;div class="row"&gt;
      &lt;form&gt;
        &lt;input id="check_in_date" name="check_in_date" type="date" name="check_in_date" class="datepicker" required&gt;
        &lt;label for="check_in_date"&gt;Check In Date&lt;/label&gt;

        &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col s12 m4 l2"&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;



&lt;/body&gt;
&lt;script&gt;
  $('.datepicker').pickadate({
    format: 'dd/mm/yyyy',
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 5, // Creates a dropdown of 15 years to control year
    editable: true
  });
  $(document).ready(function() {
    $('select').material_select();
  });
&lt;/script&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>How can I get these two things (date picker on click &amp; required field) working together?</p>