Picky dates

and spending time on them

When using xs:date as a type in the schema for a node-value Xopus might give you some trouble when editing that. Say for example that you use a value-of to print the value and you put your cursor in it and start typing a new value. Xopus will be very picky about that value: only valid xs:date values will be accepted by Xopus so you could probably overwrite a couple of numbers to ge t a new date, but it is not likely to win this years' prize for most user-friendly date editing.

So we programmers inevitably turn to creating date-pickers. We all end up making one at some point in time, and without further ado, here's mine, for use with Xopus:

Please bare in mind that this works when subCanvasMode is enabled, thus giving more control over HTML on the Xopus Canvas.

Somewhere we add a piece of HTML to facilitate a date Picker:

  <div id="datePicker" class="datePicker">
   <div class="dateHeader">
    <div class="datePrevious">
	<a href="#" onclick="prevMonth()">&#171;</a>
    </div>
    <div id="dateMonthName" class="dateMonthName"></div>
    <div class="dateNext">
	<a href="#" onclick="nextMonth()">&#187;</a>
    </div>
   </div>
   <div class="dateDays">
    <div class="dateDayNames">
     <div class="day">Mo</div>
     <div class="day">Tu</div>
     <div class="day">We</div>
     <div class="day">Th</div>
     <div class="day">Fr</div>
     <div class="day">Sa</div>
     <div class="day">Su</div>
    </div>
    <div id="days" class=""> 
    </div>
    <a href="#" style="" onclick="cancelEditDate()">
     <div class="dateHeader">
      <b>Cancel</b>
     </div>
    </a>
   </div>
  </div>

This requires some CSS to make it look nice:

#datePicker {}
.datePicker
{
 position:absolute;top:10px;left:300px;
 background-color:#e0e4f0;
 border:solid 1px #c8ced1;
 width:173px;
 display:none;
 padding:2px;
}
.dateHeader
{
 color: #002280;background-color:#fc3;
 position:relative;height:20px;
}
.datePrevious  {position:absolute;top:2px;left:2px;}
.dateNext   {position:absolute;top:2px;right:2px;}

.dateMonthName 
{
 position:relative;top:2px;
 font-weight:bold;text-align:center;
}.dateDays
{
}
.dateDayNames
{
 font-weight:bold;
}
.dateDayNames .day {background-color:lightgray;}
.day
{
 float:left;
 width:22px;
 text-align:center;
 color: #002280;background-color:#fc3;
 margin:1px;
 padding:3px 0 3px 0;
}
a .day {text-decoration:none;cursor:hand;}
a:hover .day {background-color:#e0e4f0;} 
.dummy {background-color:#e0e4f0;} 
a.current .day {background-color:#c8ced1;}

This one turns out a bit yellow, sorry about that.

Now for every date you want to edit you call a template that draws the node in a nice way, with a link around it that opens the date picker.

  <!-- draw a date editor -->
  <xsl:template match="*" mode="editDate">
     <div>
     <a href="#" onclick="editDate(node)">
	<xsl:apply-templates select="." mode="nicedate"/>
     </a>
     </div> 
  </xsl:template>

This 'nicedate' template does exactly that. It draws out a nice date for a date made up of yyyy-mm-dd, which is also what the datePicker returns.

Then all we need is some javascript to edit the date, and facilitate the other functions called in the HTML. Now I wouldn't want this date to get any more boring than it already is so I won't paste it here. Instead I'll link the files and you can download them.

So now Xopus won't mind you editing the date. You are no longer typing it so Xopus won't interfere with saying that '2007-' not a valid date, and revert the value. The datePicker now sets the value through the API.

Beware that this datePicker still has some Dutch names, fancy yellow colors and might feel some effects of CSS implemented already. This one depends on a certain font-size. Also, again, make sure subCanvasMode is set to true, otherwise the picker won't hide well.

Developer Blog
› Picky dates

Modified: December 11^th 2007
By: Carl Giesberts

Write a comment