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

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

4

11 に答える 11

44

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.

Try something like this:

$(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("-");
    }
}
于 2014-03-19T13:43:28.217 に答える
8

バージョン 2.1.5 で

  • ブートストラップ-datetimepicker.js
  • http://www.eyecon.ro/bootstrap-datepicker
  • 貢献：
  • アンドリュー・ロウルズ
  • チアゴ・デ・アルーダ
  • Jonathan Peterson @Eonasdan による Bootstrap v3 の更新

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' のように大文字でも機能します

それは私に本当に苦労させた誰かにとって役立つかもしれません:)

于 2014-08-29T05:45:43.833 に答える
6

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

$('#UpToDate').datetimepicker({
        format:'MMMM DD, YYYY',
        maxDate:moment(),
        defaultDate:moment()            
    }).on('dp.change',function(e){
        console.log(e);
    });
于 2016-02-03T08:03:37.423 に答える
0

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

function onDateChange() {
   // Do something here
}

$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);
于 2014-05-19T22:22:59.977 に答える