Wicket : 자바 스크립트를 통한 텍스트 필드 업데이트

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 트리거가 누락되었습니다.