This blog post is the third in a series which introduces more new features of ZK 6. For the main features please click here.

In ZK 6.0, we introduce a new simple feature on Datebox and Timebox: with a javascript handler specified in zk.xml, you can provide text shortcuts on date and time input.

Here is a demo video:

 

As shown in the demo, we can register the handlers like the following:

zk.xml

<?xml version="1.0" encoding="UTF-8"?>
<zk>
    <!-- The value of unformater is a javascript function -->
    <library-property>
        <name>org.zkoss.zul.Datebox.unformater</name>
        <value><![CDATA[
            function (val) {
                var today = new Date();
                if (val == 't')
                    return today;
                var c = val.charAt(0),
                    dt = new Date();
                if (c == '+') {
                    dt.setDate(today.getDate() + parseInt(val.substring(1)));
                    return dt;
                }
                if (c == '-') {
                    dt.setDate(today.getDate() - parseInt(val.substring(1)));
                    return dt;
                }
                return null; // use default Datebox parsing
            }
        ]]></value>
    </library-property>

    <!-- The value of unformater is a javascript function -->
    <library-property>
        <name>org.zkoss.zul.Timebox.unformater</name>
        <value><![CDATA[
            function (val) {
                var today = new Date();
                if (val == 'n')
                    return today;
                var c = val.charAt(0),
                    dt = new Date();
                if (c == '+') {
                    dt.setHours(today.getHours() + parseInt(val.substring(1)));
                    return dt;
                }
                if (c == '-') {
                    dt.setHours(today.getHours() - parseInt(val.substring(1)));
                    return dt;
                }
                return null; // use default Timebox parsing
            }
        ]]></value>
    </library-property>
</zk>

These handlers will capture strings in pattern “n”, “t”, “+1”, “-1”, etc., and convert them to desired dates and time. All the Datebox/Timebox in the application will be in effect, so we don’t need to specify explicitly on components:

<zk>
    <!-- Try input 't', '+1', '-1', etc. -->
    <datebox width="120px" />
    <!-- Try input 'n', '+1', '-1', etc. -->
    <timebox width="120px" />
</zk>

This feature provides a way to speed up date and time input for regular users of a web application, hoping to smoothen user workflow, especially when the application requires data from user frequently.

What is your opinion about this feature? We would like to hear your suggestions.

Feature Highlight Part 1
Feature Highlight Part 2

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

2 Responses to “ZK 6.0 New Feature Highlight Part 3: Datebox/Timebox Input Shortcut”

  1. Timo says:

    Looks nice but will this automatically detect timezone and browserlanguage of the user and based on this info change the way dates are being displayed?

    e.g.

    10/12/2011 vs. 12.10.2011
    or
    1pm vs. 13:00

  2. ykyan says:

    zk 6.0 validation is not do use if I click submit button before I fill info, why ?

Leave a Reply