2016-05-24 19 views
1

jereryを日付ピッカーに使用しています。ページの読み込みまたは更新時に常にポップアップします。日付ピッカーの自動ポップアップを停止する方法と日付ピッカーは、テキストボックスがクリックされたときにのみ表示されます。ここで は私のコーディング最初のページの読み込み時に日付ピッカーのポップアップを防ぐ方法

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

答えて

0

、以下のように入力フィールドがクリックされたときにのみ、入力フィールドにイベントリスナーを追加し、日付ピッカーを初期化します。

pikaday上
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], 
     }); 
    }); 

参考:http://dbushell.github.io/Pikaday/

JSFiddleの実施例は次のとおりです。https://jsfiddle.net/d3pzt1ga/

+0

焦点を当てていないので、私が欲しいのです何が正しいのですが、それは日付ピッカー –

+0

から日付を選択した後に消えません初期化中に配列からbound:trueを削除します。私は私の答えを編集しました、見てみましょう –

+0

それは今うまくいきました.. !!今、日付ピックは1つ以上の時間を選んでいません。最初に、ページをリロードせずに再びうまく動作する日付を選びます。 datepickerは存在しますが、日付を選択することはできません。また、それは消えません。 –

0

設定bound: false,またはdatepiker前に入力を追加datepikerが

+0

バインドするとき:false常に安定しています。ページの読み込みまたはページ内のクリック –

関連する問題