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

回答

相关问题