Skip to content

Date range picker component for Twitter Bootstrap - Using Sugar.js instead of Date.js

Notifications You must be signed in to change notification settings

tylerwolff/bootstrap-daterangepicker

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Date Range Picker for Twitter Bootstrap

Improvely.com

This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely.

If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.

View a demo

Usage

This component relies on Twitter Bootstrap, Datejs and jQuery.

Basic usage:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />

<script type="text/javascript">
$(document).ready(function() {
  $('input[name="daterange"]').daterangepicker();
});
</script>

Additional options allow:

  • Custom callback handler called when the date range selection is made
  • Setting initial start and end dates for the calendars
  • Bounding the minimum and maximum selectable dates
  • Overriding all labels in the interface with localized text
  • Starting the calendar week on any day of week
  • Overriding the direction the dropdown expands (left/right of element it's attached to)
  • Setting the date format string for parsing and printing dates
  • Showing week numbers

Syntax for all the options can be found in the examples.html file.

License

This code is made available under the same license as Twitter Bootstrap. Date.js is included in this repository for convenience. It is available under the MIT license.

--

Copyright 2012 Dan Grossman

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.

About

Date range picker component for Twitter Bootstrap - Using Sugar.js instead of Date.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%