Click-draggable. Range-makeable. A better calendar.
new Timeframe(element, options);
-
months
: The number of calendar months showing at once (default:2
). -
format
: The strftime format for the dates in the input fields (default:%b %d, %Y
). (With Datejs, it takes Datejs formatting.) -
weekOffset
: Override the localization's default weekday start with this option (e.g.,1
will force the rows to start on Monday; use0
for Sunday). -
startField
,endField
: Declare the range start and end input tags (by default, these are generated with the Timeframe). When thevalue
attribute is pre-populated, the Timeframe will load with this range. -
previousButton
,todayButton
,nextButton
,resetButton
: Declare the navigational buttons (these are also generated by default with the Timeframe). -
earliest
,latest
: The earliest and latest selectable dates (accepts either aDate
object or aString
that can be parsed withDate.parse()
). -
maxRange
: Limit the maximum possible range length (set to1
to turn Timeframe into a regular old date picker).
Drop in a localized version of Datejs, and it should just work. An added bonus is that the text fields will live-parse more nicely! Just try "next tues."
- I'm just sick of multiple date pickers on the same page.
<script type="text/javascript" charset="utf-8">
//<![CDATA[
new Timeframe('calendars', {
startField: 'start',
endField: 'end',
earliest: new Date(),
resetButton: 'reset' });
//]]>
</script>
See it in action here.
Timeframe requires Prototype 1.6 or higher.
Find the latest version of Timeframe on Github.
More information can be found here.
Copyright (c) 2008 Stephen Celis, released under the MIT license.