Search code examples
javascripthtmldatepickermaterialize

JS Date picker with html5 required

I am trying to make a Date field required and show a datepicker on click, I am using materialize date picker.

I can get a date picker to pop up, but the required html5 tag does not work. JSFiddle

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

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

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

  <!-- Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
  <div class="col s12 m4 l2">
    <p></p>
  </div>



</body>
<script>
  $('.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();
  });
</script>

</html>

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)... JSFiddle

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

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

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

  <!-- Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
  <div class="col s12 m4 l2">
    <p></p>
  </div>



</body>
<script>
  $('.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();
  });
</script>

</html>

How can I get these two things (date picker on click & required field) working together?

Solution

  • Set up a click handler on the .datepicker and utilize pickadate.js's open function and editable option.

    $(document).ready(function() {
  var pickr = $('.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
  });
  $('select').material_select();
  $('.datepicker').click(function() {
    pickr.pickadate('open');
  });
});

    Updated Fiddle

    Edited to handle multiple .datepickers:

    $(document).ready(function() {
  $('.datepicker').each(function(){
    var pickr = $(this).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
    });

    $(this).click(function(){
        pickr.pickadate('open');
    });
  });

  $('select').material_select();
});

    Another Fiddle