您需要檢查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