The DatePicker pattern

Giving an input an id and name beginning ‘dat’ (or ‘dtm’), it will add a little icon, which provides a date picking calendar to aid input of a date (or date/time).

The following files need including in the head of the document...

    <script src="../Include/Core.js" type="text/javascript"></script>
    <script src="../Include/ssDatePicker.js" type="text/javascript"></script>
    <link  href="../Include/ssDatePicker.css" type="text/css" rel="stylesheet"/>
          

For layout reasons, the input needs to within an inline element like a ‘span’ (or in the case below, a ‘td’), as the icon is appended as a sibling of the input.

    <td class="input">
      <input type="text" name="dtmJobEndDate" id="dtmJobEndDate" title="End date" />
    </td>
          

• Note that the line ssAddLoadEvent(ssInitialiseDatePicker); is run automatically in ssDatePicker.js. This looks for inputs with name and id beginnng "dtm" or "dat" and attaches this behaviour to them.