Question

我正在尝试创建一个Date字段并在点击时显示一个日期选择器，我正在使用materialize日期选择器。

我可以弹出一个日期选择器，但是所需的html5标签不起作用。 JSFiddle

＆＃13;

<!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>

＆＃13;

如果我在日期选择器JS中设置了editable，则该字段变为必填字段，但日期选择器不会显示在点击上（您必须按Tab键才能显示）... JSFiddle

＆＃13;

<!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>

＆＃13;

如何将这两件事（点击和必填字段上的日期选择器）一起工作？

Answer 1

在click上设置.datepicker处理程序，并使用pickadate.js的{{1}}功能和open选项。

editable

Updated Fiddle

已编辑以处理多个$(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'); }); }); s：

.datepicker

Another Fiddle

Answer 2

尝试：

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

带有html：

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

JS日期选择器需要html5

2 个答案: