A Javascript class for Prototype that adds accessible and unobtrusive date pickers to your form elements
JavaScript
Pull request Compare This branch is 18 commits ahead of aglemann:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
libs
ProtoCalendar.css
ProtoCalendar.js
README.md
example.html

README.md

ProtoCalendar

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This is a complete Prototype.js conversion of Aeron Glemann's Calendar for MooTools, along with various feature improvements and bug fixes.

Features

  • Style-able and semantic XHTML
  • Future / past calendar restrictions (and more)
  • Highly configurable use of inputs and selects
  • Multi-calendar support (with padding)
  • Variable navigation options
  • Multi-lingual and fancy date formatting
  • Uses Scriptaculous fading effects when available

##Usage

new Proto.Calendar( inputElements, dateFormat [, options]);
  • inputElements (string|array|DOMElement) The element or element id that you wish to attach a calendar. Pass an array containing two elements to link them together as a date range ([from, to]).
  • dateFormat A string defining the format the date is presented in. Examples: Y-m-d, m/d/Y, D M jS Y. See the date format section for available parameters.
  • options Basic object containing the values you wish to override.

###Options

  • blocked An array of dates (in the format specified in the initialization) that should be blocked out, preventing user selection. Default: []
  • buttonSibling An element or element id for the calendar's button to be attached after. If left null, button will be attached to the input field. Default: null
  • buttonAttachment String defining the method used to attach the button to the container. Possible options: after, before, top, bottom (See Prototype's Element.insert()) Default: 'after'
  • days Array containing the string descriptions for each day, starting with Sunday and ending with Saturday. Default: Full names, capitalized (eg:Friday)
  • direction Integer indicating which direction from today the date is allowed to select. Default: 0
    • -1 = Restricted to dates in the past
    •  0 = Any day
    •  1 = Restricted to dates in the future
  • draggable Allows the calendar to be dragged when visible (requires Scriptaculous Draggables ). Default: false
  • months Array containing the string descriptions for each month, starting with January and ending with December. Default: Full names, capitalized (eg:Friday)
  • navigation Integer, defines what type of navigation should be present on the top of the calendar for moving between months/years. Default: 1
    • 0 = No navigation, calendar will be locked to month defined.
    • 1 = Month only
    • 2 = Month and year
  • offset Indicates which day of the week to start with. 0 = Sunday, 1 = Monday, etc. Default: 0
  • onHide Callback function, called when the calendar closes. Passes the calendar object as a single parameter. Default: null
  • onShow Callback function, called when the calendar opens. Passes the calendar object as a single parameter. Default: null
  • pad Integer, determines the minimum number of days required between the two dates when using two calendars to define a range. Default: 1
    •  0 = No padding, both fields can be the same day
    •  1 = Second field must be the next day or later
    • 1 = More days between the dates.

  • tweak Object containing an x/y pair. Defines an offset distance for the calendar to appear from the right edge of the button graphic. Default: {x:0,y:0}
  • transitionSpeed If Scriptaculous Effects is loaded, this value determines how long the fade/appear transition should take, in seconds. Default: 0.3

###Date Format

  • y: Two digit Year (98, 10)
  • Y: Four digit Year (1998, 2010)
  • m: Numbered Month of the year, zero padded (08, 12)
  • n: Numbered Month of the year, no padding (8, 12)
  • M: Three character name of the month (Aug, Dec)
  • F: Full named month (August, December)
  • d: Numbered day of the month, zero padded (02, 28)
  • j: Numbered day of the month, no padding (2, 28)
  • D: Three character day of the week (Sun, Wed)
  • l: Full named day of the week (Sunday, Wednesday)
  • N: Numbered day of the week, 1 - 7
  • w: Numbered day of the week, 0 - 6
  • S: Day suffix (st, nd, rd)

All other characters ignored.

##Distributed under an MIT License

Copyright (c) 2011, Jarvis Badgley - chiper[at]chipersoft[dot]com

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.