[英]Wicket: update of textfield via Javascript
我有这个问题。 我正在使用Wicket 7 ,并且有一个HTML页面,其中包含Bootstrap的datepicker。 在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");
}
});
如何截取更改?
datepicker似乎不会触发“更改”事件,因此您必须自己做:
.on('changeDate', function (ev) {
....
$('#iwb-availability-checkin').datepicker('hide');
$('#iwb-availability-checkin').change();
}
阅读此处进行进一步讨论: 使用bootstrap-datepicker检测到所选日期的更改
我解决了这个问题。 问题是我在BasePage中使用了2版本的jQuery。 不匹配导致触发Javascript端缺少启动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.