How to make datebox accept multiple formats?

answered 2013-03-27 05:21:41 +0800

benbai
2228 ● 6
http://www.zkoss.org

updated 2013-03-27 05:25:17 +0800

You can try override the updateChange_ (client side function) and service (server side function), for example:

<zk xmlns:w="client">
    <zscript><![CDATA[
        // custom Datebox class
        class CustomDatebox extends Datebox {
            String _formats;
            // add setFormats function
            public void setFormats (String formats) {
                if (formats == null || formats.isEmpty()) {
                    _formats = "yyyy/MM/dd";
                } else {
                    _formats = formats;
                }
                setFormat(_formats.split(",")[0].trim());
            }
            // override service function
            public void service(org.zkoss.zk.au.AuRequest request, boolean everError) {
                final String cmd = request.getCommand();
                if ("onInputModified".equals(cmd)) {
                    String value = request.getData().get("value");
                    boolean found = false;
                    for (String format : _formats.split(",")) {
                        // change format
                        //
                        // NOTE: This also affect the format of input node at client side
                        setFormat(format.trim());
                        try {
                            Object val = coerceFromString(value);
                            setValue((Date)val);
                            found = true;
                            break;
                        } catch (Exception ex) {

                        }
                    }
                    if (!found) {
                        // no valid format found, set back to first one
                        setFormat(_formats.split(",")[0].trim());
                    }
                } else {
                    super.service(request, everError);
                }
            }
        }
    ]]></zscript>
    <!-- multipe format seperated by comma -->
    <datebox id="dbx" formats="yyyy/MM/dd, yyyy" use="CustomDatebox">
        <attribute w:name="updateChange_"><![CDATA[
            function () {
                var val = this.getInputNode().value;
                this.$updateChange_();
                // fire custom event if value changed
                if (this.getInputNode().value != val) {
                    this.fire('onInputModified',
                            {value: val}, // value
                            {toServer:true}, // opts
                            90);
                    this.getInputNode().value = val;
                }
            }
        ]]></attribute>
    </datebox>
    <button label="show value">
        <attribute name="onClick"><![CDATA[
            alert(dbx.getValue());
        ]]></attribute>
    </button>
</zk>