web-dev-qa-db-ja.com

bootstrap datepickerの日付の変更イベントは、日付を手動で編集したり、日付をクリアしたときに発生しません

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

だからここに私の日付ピッカーがどのように見えるかです。したがって、基本的にマウスをクリックして日付を変更するとうまくいきますが、キーボードで手動で日付を変更したり、日付変更イベントを手動でクリアした場合は呼び出されません。これはバグですか、ここで何か間違っていますか？

javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker
24
Marijus

changeイベントはdatepickerを使用して日付が変更されたときのみであるため、手動入力に応答する場合は、入力自体でchangeDateイベントを使用する必要があります。

次のようなものを試してください：

$(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("-");
    }
}
42
Bradley Trager

バージョン2.1.5で

changeDateはchange.dpに名前が変更されたため、changedateが機能していませんでした

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

また、cssクラスを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>

日付形式は、このdata-format = 'MM-DD-YYYY'のような大文字でも動作します

それは私に本当につらい時間を与えてくれた誰かに役立つかもしれません:)

8
dnxit

新しいバージョンが変更されました。最新バージョンについては、以下のコードを使用してください。

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

これを試して：

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

簡単な解決策を見つけました。 changeDateイベントをトリガーするだけで、追加のコードは不要です。例えば。 $('.datepicker').datepicker().trigger('changeDate');

1
Musaddiq Khan

これにより、両方のケースで動作するはずです

function onDateChange() {
   // Do something here
}

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

使用しているBootstrap=の日付ピッカーによって異なりますが、これは現在、これに関する既知のバグです。

コード： https://github.com/uxsolutions/bootstrap-datepicker

（ドキュメント： https://bootstrap-datepicker.readthedocs.io/en/latest/ ）

バグレポートは次のとおりです。

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

誰かがこれに対する解決策/回避策を持っているなら、それを含めれば素晴らしいでしょう。

0
Ben in CA

Datetimepicker https://tempusdominus.github.io/bootstrap-4/ についてこのバージョンがあり、何らかの理由でjqueryではなくJS Vanillaでは変更イベントが機能しませんする

私はこのように考えます

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

お役に立てば幸いです

0
akire