[HippoCMS-dev] my implermentation of a date and time picker:

[toolman]

START layout.xml snippet:

Hello all;

I thought I'd post my solution to getting a date and time in a single
field in the CMS.  This solution is not generalised (it is hardcoded
for /document/content/datum) but might be useful for someone else with
the same problem.  

Hippo guys, maybe you can move to this better js calendar and extend to
have time support - it really should be in the CMS by default!

First off, I have used Dynarchs awesome calendar, available here:

http://www.dynarch.com/projects/calendar/

I have had to fix a few things to make it work.  the Dutch language pack
was missing a few items, and the text to date parser didnt like the
default Hippo format, as it included a static 'T' char.  All of the
fixes are doucmented in the snippet below.

I added to extensions/types/common/common.css this line:

@import
url("/extensions/types/common/jscalendar-1.0/calendar-blue.css");

And this is of course where I placed the unzipped code.  I had to add a
block to the sitemap.xmap to allow serving of CSS from this location.
Maybe there is a better place to put it?  In any case,
extensions/types/sitemap.xmap has:

    <!-- Toolman tweaked added these to allow access to jscalendar via
extensions:// -->

      <map:match pattern="**.js">
        <map:read src="{1}.js" />
      </map:match>

      <map:match pattern="**.css">
        <map:read src="{1}.css" />
      </map:match>



And finally, here is my (wrapped, sorry - see attachement for un-munged
version) XML snippet from my layout.xml (I actually put this in
common/elements.xml so it can be used in a few types):


  <template name="/document/content/datum">

        <textfield id="/document/content/datum" />
        
        <xhtml:div class="row-even">
                <xhtml:span style="margin-left: 90px; margin-right: 15px; "
id="doc-content-datum-display"></xhtml:span>
                <xhtml:img id="doc-content-datum-btn"
src="/cforms/resources/cal.gif"/>

            <xhtml:script type="text/javascript"
src="/extensions/types/common/jscalendar-1.0/calendar_stripped.js"></xhtml:script>
            <xhtml:script type="text/javascript"
src="/extensions/types/common/jscalendar-1.0/lang/calendar-nl.js"></xhtml:script>
            <xhtml:script type="text/javascript"
src="/extensions/types/common/jscalendar-1.0/calendar-setup_stripped.js"></xhtml:script>
            <xhtml:script type="text/javascript">
            
            // Wrapped in function to ensure no variables are left out of scope
to interfere with CMS    
            function prepContDatumField() {
        
                        // Toolman notes: 
                         
                        // Had to modify calendar.js:1589(and stripped) to use: 
var a =
str.split(/\W+|T/); // was not splitting at the "T".  
                        // Also these below are needed for NL to work!
                        Calendar._FD = 0;
                        Calendar._SDN = new
Array("Zon","Maa","Din","Woe","Don","Vri","Zat","Zon");
                        Calendar._SMN = new
Array("Jan","Feb","Maa","Apr","Mei","Jun","Jul","Aug","Sep","Okt","Nov","Dec");
            
                var docContDatumFieldId =
"xxxxxxxxxxxxxxdocumentxxxxxxxxxxxxxxcontentxxxxxxxxxxxxxxdatum";
                var hippoDateFmt = "%Y-%m-%dT%H:%M:00.000Z"; // == java
"yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"
        
                var cmsDisplayFmt = "%A %B %d, %Y %H:%M";
                var cmsDisplayId = "doc-content-datum-display";
                
                var docContDatumFieldElement =
document.getElementById(docContDatumFieldId);
                docContDatumFieldElement.style.visibility = 'hidden'; //hide
form field, use display
                
                if(docContDatumFieldElement.value.length &lt;
"2000-01-01T01:01".length) { // default to today if nothing there
                    docContDatumFieldElement.value = (new
Date()).print(hippoDateFmt); //jscalendar extension 
                }
            
                //show initial date
                var hipDate = Date.parseDate(docContDatumFieldElement.value,
hippoDateFmt);
                document.getElementById(cmsDisplayId).innerHTML =
hipDate.print(cmsDisplayFmt);
                
                Calendar.setup({
                    inputField     :    docContDatumFieldId,            // id
of the input field
                    ifFormat       :    hippoDateFmt,                   //
format of the input field
                    showsTime      :    true,                           // will
display a time selector
                    button         :    "doc-content-datum-btn",        //
trigger for the calendar (button ID)
                    singleClick    :    true,                           //
double-click mode
                    timeFormat     :    24,                             //
Guess :P
                    displayArea    :    cmsDisplayId,    // Display element ID
                    daFormat       :    cmsDisplayFmt,           // Display fmt
                    step           :    1                               // show
every year in drop-down box
                });
                
            }
            
            //call method
            prepContDatumField();
        
    
            </xhtml:script>
     </xhtml:div>
    
  </template>


This hides the real form field, and has a display span.  This allow for
the display format to be different to the "save" format.  Unfortunately,
as mentined earlier on the mail-list, the output HTML causes some
wierdness if you are in a <group..> tag.  Nothing that can't be worked
around with some creative CSS and JS :)

Hope this is useful to someone!

layout-snippet.xml
Description: XML document

********************************************
Hippocms-dev: Hippo CMS development public mailinglist