Intent

A widget that permits you to select a date and a time too, in the same container.

Motivation

There is a date widget, from mattkruse lib. It's a very useful one, but there is a lack of time support to select a schedule.

There are other solutions :

one from www.dynarch.com, but it's LGPL, not ASL, and not packaged with Cocoon
hours, minutes and seconds CForms drop down fields. It's a valid solution but forces us to manage 3 more fields just for input constraints

So, I added time support to the mattkruse calendar widget to have an easy to use UI and binding.

I use date and time formats used by SimpleDateFormat

Feature

The date time widget may be customized a little :

enable/disable the behavior
seconds and minutes may be incremented by steps

It looks like this :

http://www.bluexml.org/static/images/scr-datetime.gif

Implementation

The CP_tmpReturnFunction(y,m,d) function has been redesigned in function CP_tmpReturnFunction(y,m,d,hh,mm,ss) to manage time information.

2 functions have been written :

one to update the links in the calendar view
one to display the dropdowns

A few lines have been added too to manage initialization.

Patch

The patch is available there there for the moment.

I asked to Matt Kruse if he agrees to patch its work. Finally, after 2 attempts, I had no answer from him. So I don't think the patch will be applied on the original work. But, SylvainWallez did it in the one used in Cocoon, it's ok

Usage

In form definition, a date field is declared, and the display format wanted too.

<fd:field id="dtstart">
    <fd:datatype base="date">
        <fd:convertor>
          <fd:patterns>
            <fd:pattern>dd/MM/yyyy HH:mm:ss</fd:pattern>
          </fd:patterns>
        </fd:convertor>
    </fd:datatype>
</fd:field>

To avoid problem while manipulating dates between different applications, I use standart date time formats for storage. So, in the binding file, I have the following convertor :

<fb:value id="dtstart" path="dtstart">
    <fd:convertor datatype="date" type="formatting" variant="datetime">
        <fd:patterns>
            <fd:pattern>yyyy-MM-dd'T'HH:mm:ss.SSSZ</fd:pattern>
        </fd:patterns>
    </fd:convertor>
</fb:value>

To conclude, the mattkruse lib is initialized :

<script type="text/javascript" src="resources/forms/mattkruse-lib/mattkruse-lib.js"></script>
<script type="text/javascript" src="resources/forms/mattkruse-lib/CalendarPopup.js"></script>
<script type="text/javascript">
    // Setup calendar
    var forms_calendar = CalendarPopup(175,180);
    forms_calendar.setWeekStartDay(1);
    forms_calendar.showYearNavigation();
    forms_calendar.showYearNavigationInput();
    // New definition to display DateTimeDropdowns
    forms_calendar.showDateTimeDropdowns();
    forms_calendar.setCssPrefix("forms_");
</script>
<link rel="stylesheet" type="text/css" href="resources/forms/css/forms-calendar.css"/>

It's up to you now

More information

This web page is available in html format on http://www.bluexml.org. You may have help on cocoon or bluexml mailing lists.

JCKermagoret