来源:叶子的投稿【Grails 学习笔记(十)– 基于JQuery UI Datepicker的实现】。
下面介绍下如何实现基于JQuery UI的Datepicker。
思路来源于:《Binding jQuery UI Datepicker to Grails Domain》
第一步:准备工作
jQuery JavaScript Library v1.5.2
jQuery UI 1.8.13
第二步:创建JqueryUIDatePickerTagLib.groovy
package wos
import java.util.Date
class JqueryUIDatePickerTagLib {
def jqDatePicker = {attrs, body ->
def out = out
def name = attrs.name
def id = attrs.id?:name
def value = attrs.value?:new Date()
//created date text field and supporting hidden text fields need by grails
out.println "<input type=\"hidden\" name=\"${name}\" value=\"date.struct\" />"
out.println "<input type=\"text\" value=\"${g.formatDate(date:value,format:'yyyy-MM-dd')}\" datepicker=\"datepicker\" target=\"${name}\" />"
out.println "<input type=\"hidden\" name=\"${name}_day\" id=\"${id}_day\" value=\"${g.formatDate(format:'dd', date:value)}\" />"
out.println "<input type=\"hidden\" name=\"${name}_month\" id=\"${id}_month\" value=\"${g.formatDate(format:'MM', date:value)}\" />"
out.println "<input type=\"hidden\" name=\"${name}_year\" id=\"${id}_year\" value=\"${g.formatDate(format:'yyyy', date:value)}\" />"
}
}
这里请注意程序的第12行,特别是name和value两字属性,没有这行,字段在提交的时候是绑定不了字段的。
第三步:页面引用
<g:jqDatePicker name="your_field_name" value="${new Date().parse('yyyy-MM-dd',your_field_value)}"/>
//以下是javascript
<script type="text/javascript">
//这里请看上面程序的第13行,给input加了一个datepicker的属性
$(document).ready(function(){
$('[datepicker="datepicker"]').each(function(){
$(this).datepicker(
{dateFormat: 'yy-mm-dd'
,onClose: function(dateText, inst) {
$('[name="'+$(this).attr('target') + '_year"]').val(inst.selectedYear)
$('[name="'+$(this).attr('target') + '_month"]').val(inst.selectedMonth + 1)
$('[name="'+$(this).attr('target') + '_day"]').val(inst.selectedDay)
}
})
});
});
</script>
是不是很方便啊:),希望大家能够喜欢!

Not bad, But it does not work
Not bad, But it does not work after CnP. Please just make sure it has < & > in the markups.
代码已经更新,谢谢指出错误!
代码已经更新,谢谢指出错误!