JS Date picker with html5 required

Question

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?

score 2 · Answer 1 · answered Jul 11 '19 at 02:50

2

try this :

$(".datetimepicker").prop('readonly', false);

with html :

<input required type="text" class="datetimepicker" name="mydate">

answered Jul 11 '19 at 02:50

yudhawillys blackheath

21
3

J. Titus · Accepted Answer · 2016-05-17T19:41:51.500

1

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

edited May 17 '16 at 19:41

answered May 17 '16 at 18:53

J. Titus

9,535
1
32
45

Thanks, this works for what I asked, but when I try to add 2 date picker fields , only 1 of em pops up with the picker. How can I modify the JS to accomodate for this? [new Fiddle](https://jsfiddle.net/4nnueksu/) – Anon957 May 17 '16 at 19:08
Managed to solve the 2 date picker bug as follows [Fiddle Link](https://jsfiddle.net/prL6pgot/) – Anon957 May 17 '16 at 19:34
1

Hey, sorry I was slow to respond - I updated my answer with a slightly cleaner solution. – J. Titus May 17 '16 at 19:42

JS Date picker with html5 required

2 Answers2