> -----Original Message----- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] On Behalf Of toolman > Sent: vrijdag 23 mei 2008 14:20 > To: hippo-mailing-list > Subject: [HippoCMS-dev] my implermentation of a date and time picker:
Hey Tim, > > > 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! You're right about it being a very wanted feature, but.... > First off, I have used Dynarchs awesome calendar, available here: > > http://www.dynarch.com/projects/calendar/ ...this calendar has an LGPL license. I'll have to ask about the license compatibility in our CMS. > 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. Yes the sitemap is the right place to handle all your URLs. Not only for XML/HTML but also for CSS, images, movies etc. > 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_st > ripped.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","O > kt","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 < > "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! Seems like it could be added to the XSLTs that display the form so the field doesn't have to be hard coded. I'll create an Jira issue for it so your work doesn't get lost. Thanks again for contributing a solution. Regards, Jasha Joachimsthal www.onehippo.com Amsterdam - Hippo B.V. Oosteinde 11 1017 WT Amsterdam +31(0)20-5224466 San Francisco - Hippo USA Inc. 101 H Street, suite Q Petaluma CA 94952-3329 +1 (707) 773-4646 ******************************************** Hippocms-dev: Hippo CMS development public mailinglist Searchable archives can be found at: <a href="http://hippocms-dev.markmail.org/";>MarkMail</a> and <a href="http://www.nabble.com/Hippo-CMS-f26633.html";>Nable</a>.
