新手上路，请多包涵

我想在单击按钮时显示日期选择器。我试过了，但我没能成功。我正在使用 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>

查询：

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

原文由 ryhan112 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript html css datepicker materialize

阅读 640

2 个回答

得票最新

社区维基

发布于
2022-12-14

✓ 已被采纳

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

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

原文由 Greg Borbonus 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-14

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

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

 <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

原文由 Dave de Jong 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何在Vue3和Element Plus中实现周范围选择器功能？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

Stack Overflow 翻译