web-dev-qa-db-fra.com

l’événement bootstrap datepicker change date ne se déclenche pas lors de l’édition manuelle des dates ou de l’effacement des dates

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

Alors, voici à quoi ressemble mon datpicker. Donc, en gros, lorsque je change de date en cliquant sur la souris, cela fonctionne bien. Toutefois, lorsque je change manuellement la date avec le clavier ou que je l'efface manuellement, l'événement de date de changement de date n'est pas appelé. Est-ce un bug ou est-ce que je fais quelque chose de mal ici?

javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker
23
Marijus

Vous devez utiliser l'événement change sur l'entrée elle-même si vous souhaitez répondre à une entrée manuelle, car l'événement changeDate ne s'applique que lorsque la date est modifiée à l'aide du sélecteur de date.

Essayez quelque chose comme ça:

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

Dans la version 2.1.5 

changeDate a été renommé en change.dp, donc changé n'a pas fonctionné pour moi.

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

également nécessaire de changer la classe css de datepicker à datepicker-input

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

Le format de date fonctionne également en majuscule, comme ceci: data-format = 'MM-DD-YYYY'

ça pourrait être utile pour quelqu'un, ça m'a vraiment donné du mal :)

8
dnxit

La nouvelle version a changé .. pour la dernière version, utilisez le code ci-dessous:

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

Essaye ça:

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

J'ai trouvé une solution courte pour cela . Aucun code supplémentaire n'est nécessaire, il suffit de déclencher l'événement changeDate E.g .$('.datepicker').datepicker().trigger('changeDate');

1
Musaddiq Khan

Cela devrait le faire fonctionner dans les deux cas

function onDateChange() {
   // Do something here
}

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

Selon le sélecteur de date que vous utilisez pour Bootstrap, il s'agit d'un bogue connu avec celui-ci:

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

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

Voici un rapport de bogue:

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

Si quelqu'un a une solution/solution de contournement pour celle-ci, ce serait bien si vous l'incluiez.

0
Ben in CA

J'ai cette version de datetimepicker https://tempusdominus.github.io/bootstrap-4/ et pour une raison quelconque, l'événement de modification ne fonctionne pas avec jquery, mais avec JS Vanilla, il fonctionne

Je découvre comme ça

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

J'espère travailler pour toi

0
akire