Angular directive for Dan Grossman's bootstrap-daterangepicker.
Demo: http://luisfarzati.github.io/ng-bs-daterangepicker
Using bower:
bower install ng-bs-daterangepicker
Using npm:
npm install ng-bs-daterangepicker
You should already have a bunch of scripts and CSS required for bootstrap-daterangepicker:
CSS:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css">
JavaScript:
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>
<script src="angular.min.js"></script>
to the list above, you should add:
<script src="ng-bs-daterangepicker.js"></script>
Then, inject ngBootstrap
in your application module:
angular.module('myApp', ['ngBootstrap']);
and then just add an input
of type daterange
:
<input type="daterange" ng-model="myDateRange" />
The result object $scope.myDateRange
has a startDate
and endDate
properties, which are instances of moment()
.
-
startDate
,endDate
: are taken from theng-model
object; -
minDate
,maxDate
: mapped frommin-date
andmax-date
attributes; -
dateLimit
: mapped fromlimit
attribute; -
format
: mapped fromformat
attribute; -
separator
: mapped fromseparator
attribute. -
enableTimePicker
: mapped fromtimePicker
attribute. -
ranges
: mapped fromranges
attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting) -
opens
: mapped fromopen
attribute. Can beright
orleft
.
Example with all above features:
<input
type="daterange"
ng-model="dates"
min-date="2013-09-10"
max-date="2013-09-25"
limit="3 days"
format="L"
separator="/"
ranges="{'Special Range':{'startDate': '2013-09-2', 'endDate': '2013-09-5'}}">
The limit
attribute lets you specify a number and unit similarly as you would invoke moment.duration()
.
- Some
timePicker*
show*
- other formatting options like
*Class
and stuff
You can run the tests by running:
npm install
bower install
grunt
assuming you already have grunt
installed, otherwise you also need to do:
npm install -g grunt-cli