您需要检查GrailsBinder代码。不过,我有一个可能更简单的解决方案。下面是一些查找所有g:datePicker代码并呈现Grails日期选择器的JQuery代码。它隐藏了原始的选择框(所以这个代码将优雅地降级),然后插入一个新的文本框和JQuery UI Datepicker。此解决方案也适用于用户只更改文本框而不删除日期选择器。
function updateDatePicker() {
$("input[value='date.struct']:hidden").each(function() {
var dateFormat = "dd/mm/yy";
var name = $(this).attr('name');
var id = name.replace(".", "_").replace("[", "_").replace("]", "_") + "_input"; // Create JQuery Friendly ID
if ($('#'+id).length == 0) {
// Find the Select Elements
var selectDay= $(this).nextAll("select:eq(0)").hide();
var selectMonth = $(this).nextAll("select:eq(1)").hide();
var selectYear = $(this).nextAll("select:eq(2)").hide();
// Get the Values
var dateDay= $(selectDay).val();
var dateMonth = $(selectMonth).val();
var dateYear = $(selectYear).val();
// Calculate the Current Input Value
var val = "";
if (dateDay != "" && dateYear != "" && dateMonth != "") { // If there is a date in the Selects then use it otherwise it's empty
var date = new Date (dateYear, dateMonth-1, dateDay);
val = $.datepicker.formatDate(dateFormat, date);
}
// Create element
var template = "<input type='text' name='"+ id +"' id='"+ id +"' value='"+ val +"'/>";
if ($(this).parent(".datePickerCalenderView").size()) {
template = "<div id='"+ id +"'/>";
}
$(this).before(template);
var displayWidget = $('#' + id);
displayWidget.blur(function() {
var date = $.datepicker.parseDate(dateFormat, $(this).val());
if (date == null) {
$(selectDay).val("");
$(selectMonth).val("");
$(selectYear).val("");
}
else {
$(selectDay).val(date.getDate());
$(selectMonth).val(date.getMonth()+1);
$(selectYear).val(date.getFullYear());
}
}).keydown(function(event) {
// Show popup on Down Arrow
if (event.keyCode == 40) {
displayWidget.datepicker("show");
}
});
displayWidget.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: dateFormat,
constrainInput: true,
showButtonPanel: true,
showWeeks: true,
showOn: 'button',
onSelect: function(dateText, inst) {
if (inst == null) {
$(selectDay).val("");
$(selectMonth).val("");
$(selectYear).val("");
}
else {
$(selectDay).val(inst.selectedDay);
$(selectMonth).val(inst.selectedMonth+1);
$(selectYear).val(inst.selectedYear);
}
}
});
}
});
}
最后添加以下代码更新输入时的页面加载,当一个AJAX调用时
$(document).ready (function(){
updateDatePicker();
$("#spinner").ajaxComplete (function(event, request, settings){
updateDatePicker();
});
});
希望这有助于。
做了我的解决方案的帮助? – 2010-05-03 06:31:36
它可行,但在我看来太复杂了。我得到它与上面的解决方案(PropertyEditor)合作,但不要问我我的错误是什么... – Jan 2010-05-05 14:59:40