2016-05-24 7 views
1

Ich benutze jquery für die Datumsauswahl. Es wird immer angezeigt, wenn die Seite geladen oder aktualisiert wird. Wie Sie das automatische Popup der Datumsauswahl und der Datumsauswahl anhalten, wird nur angezeigt, wenn das Textfeld angeklickt wurde. Hier ist meine CodierungSo verhindern Sie das Popup-Fenster für die Datumsauswahl beim ersten Laden der Seite

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

Datumsauswahl-Skript:

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

Antwort

0

einen Ereignis-Listener auf das Eingabefeld hinzufügen und die Datumsauswahl nur initialisieren, wenn das Eingabefeld unten gezeigt geklickt wird:

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

Referenz auf pikaday: http://dbushell.github.io/Pikaday/

Ein Arbeitsbeispiel auf JSFiddle ist: https://jsfiddle.net/d3pzt1ga/

+0

fokussiert ist es richtig, was ich will mich aber nicht nach der Auswahl Datum verschwindet aus picker –

+0

Entfernen Sie das gebundene: true aus dem Array während der Initialisierung. Ich habe meine Antwort bearbeitet, schaue –

+0

okey es funktioniert jetzt gut .. !! Jetzt die Datumsauswahl nicht mehr als einmal auswählen.Zuerst wählen wir das Datum, es funktioniert wieder gut, ohne die Seite erneut zu laden, versuchen Sie, das Datum auszuwählen der datepicker existiert aber es ist nicht erlaubt das datum auszuwählen..und es verschwindet auch nicht –

0

Set bound: false, oder eine Eingabe vor dem datepiker hinzufügen, damit die datepiker nicht

+0

wenn geben gebunden: false es immer stabil.when Seite laden oder klicken Sie in der Seite –