Sunday, April 26, 2009

PopUpCalendar component

I was creating a custom checkin page using IdocScript, and in that template I had a metadata field of type date. So I discovered that I need a pop-up calendar, where the user will not care about formating dates.

In Content Server, I found that there are a component called PopUpCalendar which adds pop-up calendars to checkin and search pages. So I said, I should use the same calendar object to give to my custom checkin page the same look and feel.

Note: This component is taken fromYahoo Developer Network, you can find there a lot of useful javascript objects, and part of the content server scripts are taken from there.

So to use that component in your template, do the following

1- If you will use it for custom checkin template, add the following include
<$include std_checkin_html_head_declarations$>

2- If you will use it for custom search template, add the following include
<$include std_query_html_head_declarations$>

3- Now I will assume that we have a metadata field called xPublishDate and we want to have a popup calendar for that field

<input id="xPublishDate" name="xPublishDate" size="20" maxlength="30" value="" type="text" READONLY>
<a href="javascript:pucToggleCalendar('xPublishDate')" style="vertical-align: middle;">
<img style="cursor: pointer; vertical-align: middle;" src="<$HttpWebRoot$>images/PopUpCalendar/calendar.png" border="0" width="20" height="19">
</a>
<script type="text/javascript">
pucCreateCalendar({ id: "xPublishDate", caption: "Publish Date"}, "xPublishDate");
</script>
<div id="puc_panel_xPublishDate_div" style="display: none;">
<div class="hd">Publish Date</div>
<div class="bd">
<div id="puc_calendar_xPublishDate_div"></div>
</div>
</div>

3 comments:

Anonymous said...

Thank god you posted this up.
My date picker is happy now and thanks you.

Aulo said...

Thank you! It really works.

Corina Mihaela said...

Great post, tank you.
Do you know how to restrict this calendar to start only with today's date? I need this for the entire UCM...