You'll find here the code and instructions for a datepicker widget using Prototype and Scriptaculous librairies.

Demo

Code

    <script type="text/javascript" src="/prototype.js"></script>
    <script type="text/javascript" src="/scriptaculous.js"></script>
    <script type="text/javascript" src="/datepicker.js"></script>
    <style type="text/css">
     @import("/css/datepicker.css");
    </style>
    <form>
     <input type="text" id="date-from" name="date-from" />
     </form>
    <script type="text/javascript">
    /*<[CDATA[*/
     var dpck	= new DatePicker({
      relative	: 'date-from',
      language	: 'en'
      });
    /*]]>*/
    </script>
        

Arguments

• relative : (mandatory) indicates the id of the input text box to which the datepicker is linked.
• language : (optionnal) indicates the locale to be used for text and date parsing, default is french.
  Currently supported languages are :
  • danish (dk)
  • dutch (nl)
  • english (en)
  • finnish (fi)
  • french (fr)
  • german (de)
  • hungarian (hu)
  • italian (it)
  • japanese (ja)
  • latvian (lv)
  • lithuanian (lt)
  • norwegian (no)
  • portuguese (pt)
  • romanian (ro)
  • simplified chinese (zh)
  • spanish (sp)
  • swedish (sv)
• keepFieldEmpty : (optionnal) indicates if we want the field to stay empty if no date is provided via the value attribute of the input textbox. It's a boolean set to false by default.
• clickCallback : (optionnal) indicates the functions to be evaled when the click on the input text box is triggered.
• zindex : (optionnal) indicates if you want to provide a z-index value for the displayed calendar, set to 0 by default.
• relativePosition : (optionnal) indicates if the datepicker should be positionned relatively to the input field, set to true by default.
• topOffset : (optionnal) indicates the top offset between the top-left corner of the datepicker and the bottom of input field, set to 30 px by default.
• leftOffset : (optionnal) indicates the left offset between the top-left corner of the datepicker and the bottom of input field, set to 0 px by default.
• relativePosition
• showEffect
• enableShowEffect
• showDuration
• closeEffect
• enableCloseEffect
• closeEffectDuration
• afterClose
• externalControl
• cellCallback
• setPositionTop
• setPositionLeft
• enableCloseOnBlur
• disablePastDate (optionnal : false by default) : when set to true the past dates are not selectable.
• disableFutureDate (optional : true by default) : when set to false the future dates are selectable.
• dateFormat : (optionnal : default is dd/mm/yyyy) allows you to specify the date formatting you want. Two arguments :
  1. digits order : dd or mm or yyyy
  2. the separator, example : / or : or -

Methods

• setPosition : used for absolute positionning of the datepicker, the relativePosition option of the DatePicker at it's creation must be set to false.
  DatePicker.setPosition( top_px, left_px );
  top_px : integer value in pixels indicating the top position.
  left_px : integer value in pixels indicating the left position.

CSS Styles

• outbound : styling for the cells of the days not being in the current month.
• today : styling for the cell for today date.
• wday : styling for the week-days headers.
• nclick : styling for the unclickable cells.
• nclick_outbound : styling for the unclickable cells in the outbound status.

Download : check the ChangeLog

• Development version : dev
• 12/12/07 : v0.9.4 - check the incompatibility change from ChangeLog : date-formatting & css styling
• 12/11/07 : v0.9.3 (need Prototype 1.6.0)
• 11/04/07 : v0.9.2
• 13/03/07 : v0.9.1
• 11/03/07 : v0.9