Wicket：通過Javascript更新textfield

我有這個問題。我正在使用Wicket 7，我有一個HTML頁面，其中包含一個引導程序的日期選擇器。在Java方面，我無法攔截日期的變化。代碼如下所示。Wicket：通過Javascript更新textfield

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"); 
    } 
});

我怎麼能攔截的變化？

來源

2017-04-04 Matteo Rossi

日期選擇似乎並沒有觸發「改變」事件，所以你必須做你自己：

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

這裏閱讀進一步討論： Detect change to selected date with bootstrap-datepicker

來源

2017-04-04 14:25:27 svenmeier

它似乎不適合我。我認爲觸發的更改事件必須在id爲startDate的組件上進行，因爲這個組件已經附加了onChangeAjaxBehavior（）。它是正確的？ –

是的，你是對的：你必須觸發'#startDate' – svenmeier

我解決問題。問題是我在BasePage中使用2版本的jQuery。不匹配導致觸發器Javascript端的丟失啓動。

來源

2017-04-05 07:29:18

Wicket：通過Javascript更新textfield

回答

相關問題