如何防止初始頁面加載時的日期選擇器彈出窗口

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 個解決方案

解決方案1
0 2016-05-24 06:21:26

解決方案2
0 2016-05-24 06:21:43

如何防止初始頁面加載時的日期選擇器彈出窗口

問題描述

2 個解決方案

解決方案1 0 2016-05-24 06:21:26

解決方案2 0 2016-05-24 06:21:43

解決方案1
0 2016-05-24 06:21:26

解決方案2
0 2016-05-24 06:21:43