Question

我正在使用jquery作为日期选择器。它总是在页面加载或刷新时弹出。如何在单击文本框时仅显示日期选择器和日期选择器的自动弹出窗口。这是我的编码

<html>
<body>
<form>
    <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding">       <input type="text" id="datepicker" name="dob" class="form-control" placeholder="DOB" autocomplete="off" required>
        </div>
</form>
</body>
</html>

日期选择器脚本：

<script src="js/functions.js"></script>
    <script src="js/pikaday.js"></script>

    <script>

    var picker = new Pikaday(
    {
        field: document.getElementById('datepicker'),
        firstDay: 1,
        minDate: new Date(1950, 0, 1),
        maxDate: new Date(2020, 12, 31),
        yearRange: [1950, 2020],
        bound: true,


    });

    </script>

Answer 1

将事件监听器添加到输入字段，并仅在单击输入字段时初始化日期选择器，如下所示：

    var dateField = document.getElementById('datepicker');
    dateField.addEventListener("click", function(){
      // Initialize datepicker only when datefile is clicked
      var picker = new Pikaday(
      {
        field: document.getElementById('datepicker'),
        firstDay: 1,
        minDate: new Date(1950, 0, 1),
        maxDate: new Date(2020, 12, 31),
        yearRange: [1950, 2020],
      });
    });

关于pikaday的参考：http://dbushell.github.io/Pikaday/

关于JSFiddle的一个工作示例是：https://jsfiddle.net/d3pzt1ga/

Answer 2

设置bound: false,或在datepiker之前添加输入，以便datepiker不专注

如何防止初始页面加载时的日期选择器弹出窗口

2 个答案: