基于JQuery UI Datepicker的实现

来源:叶子的投稿【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>

是不是很方便啊:),希望大家能够喜欢!

By huwh - Posted on 01 九月 2011

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.

代码已经更新,谢谢指出错误!

代码已经更新,谢谢指出错误!