it-swarm.com.de

das Ereignis zum Ändern des Datums des Bootstrap-Datums wird nicht ausgelöst, wenn das Datum oder das Löschdatum manuell geändert wird

<script type="text/javascript">
    // When the document is ready
    $(document).ready(function () {
        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
        }).on('changeDate', function(ev){
            // do what you want here
            $(this).datepicker('hide');
        }).on('changeDate', function(ev){
            if ($('#startdate').val() != '' && $('#enddate').val() != ''){
                $('#period').text(diffInDays() + ' d.'); 
            } else {
                $('#period').text("-");
            }
        });
    });
</script>

So sieht mein Datepicker aus. Wenn ich das Datum durch Klicken mit der Maus ändere, funktioniert es gut. Wenn ich das Datum jedoch manuell mit der Tastatur ändere oder die Datumsänderung manuell lösche, wird das Ereignis nicht aufgerufen. Ist das ein Fehler oder mache ich hier etwas falsch?

23
Marijus

Sie müssen das Ereignis change für die Eingabe selbst verwenden, wenn Sie auf die manuelle Eingabe antworten möchten, da das Ereignis changeDate nur dann gilt, wenn das Datum mit dem Datumspicker geändert wird.

Versuchen Sie etwas so:

$(document).ready(function() {
    $('.datepicker').datepicker({
        format: "yyyy-mm-dd",
    })
    //Listen for the change even on the input
    .change(dateChanged)
    .on('changeDate', dateChanged);
});

function dateChanged(ev) {
    $(this).datepicker('hide');
    if ($('#startdate').val() != '' && $('#enddate').val() != '') {
        $('#period').text(diffInDays() + ' d.');
    } else {
        $('#period').text("-");
    }
}
39
Bradley Trager

In Version 2.1.5 

changeDate wurde in change.dp umbenannt, daher hat changeate für mich nicht funktioniert

$("#datetimepicker").datetimepicker().on('change.dp', function (e) {
            FillDate(new Date());
    });

außerdem musste die css-Klasse von datepicker in datepicker-input geändert werden

<div id='datetimepicker' class='datepicker-input input-group controls'>
   <input id='txtStartDate' class='form-control' placeholder='Select datepicker' data-rule-required='true' data-format='MM-DD-YYYY' type='text' />
   <span class='input-group-addon'>
       <span class='icon-calendar' data-time-icon='icon-time' data-date-icon='icon-calendar'></span>
   </span>
</div>

Datumsformat funktioniert auch in Großbuchstaben wie diesem Datenformat = 'MM-DD-JJJJ'

es könnte für jemanden hilfreich sein, der mir wirklich schwerfiel :)

8
dnxit

Die neue Version wurde geändert. Für die neueste Version verwenden Sie den folgenden Code:

$('#UpToDate').datetimepicker({
        format:'MMMM DD, YYYY',
        maxDate:moment(),
        defaultDate:moment()            
    }).on('dp.change',function(e){
        console.log(e);
    });
5
Ravi S. Singh

Versuche dies:

$(".datepicker").on("dp.change", function(e) {
    alert('hey');
});
4
Petr

Ich habe eine kurze Lösung dafür gefunden. Es ist kein zusätzlicher Code erforderlich. Lösen Sie einfach das changeDate -Ereignis aus. Z.B. $('.datepicker').datepicker().trigger('changeDate');

1
Musaddiq Khan

In beiden Fällen sollte dies funktionieren

function onDateChange() {
   // Do something here
}

$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);
0
Mauriel

Abhängig davon, welche Datumsauswahl für Bootstrap Sie verwenden, handelt es sich um einen bekannten Fehler, der derzeit bei diesem auftritt:

Code: https://github.com/uxsolutions/bootstrap-datepicker

(Docs: https://bootstrap-datepicker.readthedocs.io/en/latest/ )

Hier ist ein Fehlerbericht:

https://github.com/uxsolutions/bootstrap-datepicker/issues/1957

Wenn jemand eine Lösung/Problemumgehung für diese hat, wäre es großartig, wenn Sie sie aufnehmen würden.

0
Ben in CA

Ich habe diese Version über datetimepicker https://tempusdominus.github.io/bootstrap-4/ und aus irgendeinem Grund funktioniert das Änderungsereignis nicht mit jquery, sondern mit JS Vanilla

Ich finde es so heraus

document.getElementById('date').onchange = function(){ ...the jquery code...}

Ich hoffe arbeit für dich

0
akire