web-dev-qa-db-ja.com

Bootstrap 3つのdatetimepickerイベントが起動しない

Bootstrap 3 DateTimePicker を使用しており、例8（リンクされたdatetimepicker）を試しています。

Javascript

$('#dpStart').datetimepicker({
     pickDate: true,                 //en/disables the date picker
     pickTime: false,
     format: "DD-MM-YYYY",
     useMinutes: false,               //en/disables the minutes picker
     useSeconds: false
});

$('#dpEnd').datetimepicker({
     pickDate: true,                 //en/disables the date picker
     pickTime: false,
     format: "DD-MM-YYYY",
     useMinutes: false,               //en/disables the minutes picker
     useSeconds: false
});

$("#dpStart").on("dp.change", function(e) {
     alert('hey');
     $('#dpEnd').data("DateTimePicker").setMinDate(e.date);
});

$("#dpEnd").on("dp.change", function(e) {
     $('#dpStart').data("DateTimePicker").setMaxDate(e.date);
});

[〜＃〜] html [〜＃〜]

<div class="row">
  <div class="col-md-6 col-sm-6 form-group">
    <label for="txtStartDate">
      Start Date-Time</label>
    <div class="input-group date" id="dpStart" data-date-format="DD-MM-YYYY">
      <asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control"></asp:TextBox>
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
  <div class="col-md-6 col-sm-6 form-group">
    <label for="txtEndDate">
      End Date-Time</label>
    <div class="input-group date" id="dpEnd" data-date-format="DD-MM-YYYY">
      <asp:TextBox ID="txtEndDate" runat="server" CssClass="form-control"></asp:TextBox>
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

カレンダーはニーズに応じて表示されますが、dp.change、dp.hide、dp.showなどのイベントは起動しません。問題は何ですか？何か助け？

EDIT：Bootstrap js , bootstrap css、Moment.jsおよびdatetimepicker jsおよびcssファイル。

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-datetimepicker
42
writeToBhuwan

これはばかげているように見えるかもしれませんが、質問で参照しているのと同じbootstrap-datetimepicker.jsプラグインを使用していることを確認しましたか？

私が知っている2つのバージョンは非常によく似ています：

  1. 質問で指定したバージョン： http://eonasdan.github.io/bootstrap-datetimepicker/
  2. わずかに異なるバージョン： http://www.eyecon.ro/bootstrap-datepicker/

最初のバージョンはchange.dpに応答し、2番目のバージョンはdp.changeに応答します。

bootstrap-datetimepicker.jsの上部にあるコメントを確認して、使用しているコメントを確認してください。

55
itsmejodie

ロードしているかどうかを確認するmoment.jsロードする前にdatetimepicker.js

6
da Rocha Pires

Tempus Dominus（非常にポピュラーなEonasdan/bootstrap-datetimepickerの後継として自己定義）は、change.datetimepickerにイベントを変更したようです。

2
glerendegui

私はbootstrap datetime pickerを使用しています。多くの調査を行った後、以下のコードが役に立ちます：

$('.data_date_of_birth').on('changeDate', function(event) {
  alert($(this).val());
});
0
Kamlesh