An example of range select with integrated time values

Date picker example

Insert in head

<!-- basic default calendar styles -->
<link rel="stylesheet" type="text/css" 
href="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.css" />

<!-- custom user specified calendar styles -->
<style type="text/css">
    .calendarScrollContent {height: 250px;}
</style>
<!-- required JavaScript files -->
<script type="text/javascript" 
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" 
	src="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.js">
</script>
	

Insert in body

<!-- range selection is attached to fields with class startDate and endDate -->
<div id="dateRange1">
  <input type="hidden" class="startDate" name="range_start">
  <input type="hidden" class="endDate" name="range_end">
</div>
<script type="text/javascript" language="JavaScript">
  $("#dateRange1").continuousCalendar();
</script>

Events

calendarChange

Triggered in calendar init and calendar selections. Event object contains DateRange or Date for current selection

Methods

.continuousCalendar(options)

Creates a continuous calendar. Start and end input's are created if they don't exist. When created manually, they must have classes startDate and endDate and they must be inside the container. Options are passed in object. See options below.

.calendarRange(), returns DateRange

Returns calendar range object for current selection

Options, color codes:

Property name, Default value Type

weeksBefore 26 Number

Specifies amount of weeks displayed before selection. If no default selection then count from current day.

weeksAfter 26 Number

Specifies amount of weeks displayed after selection. If no default selection then count from current day.

firstDate null String

Specifies exact date for calendar start. this is alternative for weeksBefore. Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.

lastDate null String

Specifies exact date for calendar end. This is alternative for weeksAfter. Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.

startField $('input.startDate', this) jQuery object

Specifies jquery element for start input field. This is used also for single date calendar

endField $('input.endDate', this) jQuery object

Specifies jquery element for end input field.

isPopup false Boolean

Specifies if calendar opens as popup or as inline version

selectToday false Boolean

True, of current date is to be chosen, even if input field is empty.

locale DateLocale.EN Object

Specifies locale for rendering calendar and parsing input fields.

disableWeekends false Boolean

True if weekends are disabled.

disabledDates null String

Space separated list of disabled dates. Dates are presented in short date format of current locale.

minimumRange -1 Number

Sets minimum range permitted in days. Shorter selections are expanded automatically.

selectWeek false Boolean

Set to true for automatically selecting full weeks.

fadeOutDuration 0 Number

Duration for fade out. Value is passed for jQuery's .fadeOut function.

callback $.noop Function

Function called in init and after date selection. DateRange or Date is passed as argument and this points to calendar container.

theme '' String

Theme to be used. Currently available alternative themes are rounded and transparent. Don't forget to include the required css for the theme.

Licensed under the Apache License, Version 2.0 (the “License”); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.