Wicket：Javascript経由のテキストフィールドの更新

Question

この問題があります。 Wicket 7を使用していて、ブートストラップのdatepickerを含むHTMLページがあります。 Java側では、日付の変更を傍受することはできません。コードを以下に示します。

HTML：

<div class="input-group date availability-date" id="iwb-availability-checkin" data-date-format="yyyy-mm-dd" data-date="2012-02-20" data-value="2017-04-02"> 
    <span class="datepicker-holder"><strong>2</strong>/Aprile</span> 
    <input wicket:id ="inizio" name="checkin" id="startDate" type="text" value="" class="form-control hidden" /> 
    <span class="input-group-addon"><i class="fa fa-angle-down"></i></span> 
</div> 

<script> 
    $(function() { 
     window.prettyPrint && prettyPrint(); 

     var startDate = new Date(); 
     var endDate = new Date(); 
     $('#iwb-availability-checkin').datepicker().on('changeDate', function (ev) { 
      console.log("Cambio data check in"); 

      if (ev.date.valueOf() > endDate.valueOf()) { 
       $('#alert').show().find('strong').text('The start date can not be greater then the end date'); 
      } 
      else { 
       console.log(ev.date); 

       $('#alert').hide(); 
       startDate = new Date(ev.date); 
       $('#startDate').text($('#iwb-availability-checkin').data('date')); 
       console.log($('#startDate').val()); 
      } 

      $('#iwb-availability-checkin').datepicker('hide'); 
     }); 

     $('#iwb-availability-checkout').datepicker().on('changeDate', function (ev) { 
      console.log("Cambio data check out"); 

      if (ev.date.valueOf() < startDate.valueOf()) { 
       $('#alert').show().find('strong').text('The end date can not be less then the start date'); 
      } 
      else { 
       $('#alert').hide(); 
       endDate = new Date(ev.date); 
       $('#endDate').text($('#iwb-availability-checkout').data('date')); 
       console.log($('#endDate').val()); 
      } 

      $('#iwb-availability-checkout').datepicker('hide'); 
     }); 
    }); 
</script> 

JAVA：

inizio = new TextField("inizio", new PropertyModel(this, "inizioField")); 
inizio.setOutputMarkupId(true); 
inizio.setOutputMarkupPlaceholderTag(true); 
add(inizio); 

inizio.add(new OnChangeAjaxBehavior() { 
    @Override 
    protected void onUpdate(AjaxRequestTarget target) { 
     System.out.println("Cambio data check-in"); 
    } 
}); 

がどのように変更を傍受することができますか？

Answer 1

日付ピッカーは、「変更」イベントをトリガしていないようですので、あなた自身のためにそれを行う必要があります：さらなる議論のために、ここで読む

.on('changeDate', function (ev) { 
    .... 
    $('#iwb-availability-checkin').datepicker('hide'); 
    $('#iwb-availability-checkin').change(); 
} 

は： Detect change to selected date with bootstrap-datepicker

Answer 2

私は解決します問題。問題は、BasePage内で2バージョンのjQueryを使用していることです。不一致が原因でJavascript側のトリガが起動しなくなりました。