需要 html5 的 JS 日期选择器

Question

我正在尝试使日期字段成为必填项并在点击时显示日期选择器，我正在使用 materialize 日期选择器。

我可以让日期选择器弹出，但所需的 html5 标签不起作用。 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>

如果我在日期选择器 JS 中设置为可编辑，则该字段变为必填，但点击时日期选择器不显示（您必须按 Tab 键才能显示）... 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>

我怎样才能让这两个东西（点击日期选择器和必填字段）一起工作？

Answer 1

在 .datepicker 上设置一个 click 处理程序并利用 pickadate.js 的 open 函数和 editable 选项。

$(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

已编辑 以处理多个 .datepicker：

$(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

Answer 2

试试这个：

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

与 html :

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

需要 html5 的 JS 日期选择器

JS Date picker with html5 required

html

javascript

datepicker

materialize