0

Wie autoclose ein datetimepicker am Datum nur auswählen. Ich benutze das dp.change-Ereignis, aber es schließt das Datetimepicker sogar beim Ändern der Zeit.Wie autoclose datetimepicker von Bootstrap mit dp.change Ereignis?

$('.datetimepicker').each(function() { 
    $(this).on('dp.change', function (ev) { 

     $(this).data('DateTimePicker').hide(); 

    }); 
}); 

Was ist der Klassenname für den timePicker? Was passiert, wenn ich die Klasse bekomme und datetimepicker sage, dass ich nicht schließe, wenn className dem Klassennamen von timepicker entspricht?

Und was ist die neueste Version für den Datetimepicker?

1 ist dies: http://eonasdan.github.io/bootstrap-datetimepicker/

2. ist dies mit Autoclose-Eigenschaft.

http://www.malot.fr/bootstrap-datetimepicker/

Dank.

Antwort

1

Mit eonasdan datetimepicker können Sie überprüfen, ob das neue ausgewählte Datum das gleiche wie das vorher ausgewählte Datum ist (mit Moment isSame).

Hinweis: Die dp.change empfängt oldDate und date als Parameter.

Hier ein Arbeitsbeispiel:

$('.datetimepicker').datetimepicker().on('dp.change', function(e){ 
 
    if(!e.oldDate || !e.date.isSame(e.oldDate, 'day')){ 
 
    $(this).data('DateTimePicker').hide(); 
 
    } 
 
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/en-gb.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="input-group date datetimepicker"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div>

+0

Es funktioniert gut, wenn ich die Zeit zuerst ändern und dann das Datum. Aber wenn ich zuerst das Datum und dann die Uhrzeit ändere, wird das Schließen des Kalenders nicht automatisch beendet. – Nosheen

+0

@Nosheen Ich habe nicht ganz verstanden, was der Workflow ist, der Ihnen Probleme bereitet. In meinem Snippet schließt sich datepicker, wenn Sie das Datum auswählen und nicht wenn Sie die Zeit auswählen (das ist, was ich von Ihrer ursprünglichen Frage verstanden habe) – VincenzoC

+0

Ja, ich schätze Ihre Bemühungen sehr und es funktioniert auch gut. Es gibt ein Szenario, in dem es nicht funktioniert, wie die Zeit nach dem Ändern des Datums auswählen. Ist es möglich, nach dem Auswählen der Zeit zu erkennen, ob das Kalendersymbol angeklickt wurde? – Nosheen

Verwandte Themen