单击按钮时显示日期选择器

Question

我想在单击按钮时显示日期选择器。我试过了，但我没能成功。我正在使用 Materialise Css。我曾尝试使用输入类型的文本，但我不想要它。

<div class="container">
     <div class="row center">
       <i>Date</i>
       <button class="btn waves-effect waves-light datepicker" type="submit" name="action">PICK DATE</button>
     </div>
   </div>

jQuery:

$('.datepicker').pickadate({
    selectMonths: true, 
    selectYears: 15 
  });

Answer 1

您可以使用我创建的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jDatapicker JQuery</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

Answer 2

为了通过按钮显示日期选择器，您需要调用显示选项。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jDatapicker JQuery</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
    function show_dp(){
      $( "#datepicker" ).datepicker('show'); //Show on click of button
     }
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
  <button onclick="show_dp();">Show Datepicker</button> 
 
 
</body>
</html>

另一个不需要输入字段的选项：

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

<head>
  <meta charset="utf-8">
  <title>jDatapicker JQuery</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>

    function toggle_dp() {
      dp = $("#datepicker");
      if (dp.attr('datepicker')) {
        dp.datepicker('destroy');
        dp.removeAttr('datepicker');
      } else {
        dp.datepicker();
        dp.attr('datepicker', 1);
      }


    }
  </script>
</head>

<body>

  <div id="datepicker"></div>
  <button id="button" onclick="toggle_dp();">Toggle Datepicker</button>


</body>

</html>

Answer 3

我认为更好的方法是仅在单击按钮时显示选取器，而不是在单击输入时显示。这使用户也可以手动编辑输入。

我的诀窍是使用隐藏输入将选择器连接到：

<div class="input-field datepicker-prefix">
    <i class="material-icons prefix">perm_contact_calendar</i>
    <input type="hidden" class="datepicker" />
    <input />
</div>

然后设置点击以显示选择器：

$('.datepicker-prefix .prefix').click(function () {
    $(this).parent().find('.datepicker').datepicker('open');
});

查看我针对日期和时间选择器的完整解决方案 https://codepen.io/dnote/pen/jXQNpg?editors=1010#0

单击按钮时显示日期选择器

Displaying Datepicker when i click the button

html

javascript

css

datepicker

materialize