我有这个问题。我正在使用 Wicket 7,并且我有一个包含 Bootstrap 的日期选择器的 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");
}
});
如何拦截变化?
最佳答案
datepicker 似乎不会触发“更改”事件,因此您必须自己执行此操作:
.on('changeDate', function (ev) {
....
$('#iwb-availability-checkin').datepicker('hide');
$('#iwb-availability-checkin').change();
}
阅读此处进行进一步讨论: Detect change to selected date with bootstrap-datepicker
关于javascript - Wicket:通过 Javascript 更新文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43209046/