1. ホーム
  2. jquery

bootstrap-datepickerで選択された日付の変更を検出する

2023-07-25 20:32:37

質問

日付ピッカーが付属したinput要素を ブートストラップ・デートピッカー .

<div class="well">
    <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd">
        <input type="text" id="date-daily">
        <span class="add-on"><i class="icon-th"></i></span>    
    </div>
</div>

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('#dp3').datepicker();
        $('#date-daily').val('0000-00-00');
        $('#date-daily').change(function () {
            console.log($('#date-daily').val());
        });
    });
</script>

ユーザがinput要素に直接入力して日付を変更した場合、上記のようにinput要素のonChangeイベントで値を取得することができますね。しかし、ユーザーがdatepickerから日付を変更した場合(つまり、カレンダー上の日付をクリックした場合)、onChangeハンドラは呼び出されません。

input要素に入力するのではなく、datepickerを介して行われる選択された日付の変更を検出するにはどうすればよいでしょうか。

どのように解決するのですか?

他のすべての回答は jQuery UI datepicker に関するものですが、質問は bootstrap-datepicker .

を使用することができます。 changeDate イベントを使用して関連する入力の変更イベントをトリガーし、日付の変更の両方の方法を onChange ハンドラから日付を変更する両方の方法を処理します。

変更日

日付が変更されたときに発行されます。

$('#dp3').datepicker().on('changeDate', function (ev) {
    $('#date-daily').change();
});
$('#date-daily').val('0000-00-00');
$('#date-daily').change(function () {
    console.log($('#date-daily').val());
});

以下は動作するフィドルです。 http://jsfiddle.net/IrvinDominin/frjhgpn8/