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="https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/daterangepicker-bs3.css">
JavaScript:
<script src="https://github.com/luisfarzati/ng-bs-daterangepicker/raw/master/jquery.min.js"></script>
<script src="https://github.com/luisfarzati/ng-bs-daterangepicker/raw/master/bootstrap.min.js"></script>
<script src="https://github.com/luisfarzati/ng-bs-daterangepicker/raw/master/moment.min.js"></script>
<script src="https://github.com/luisfarzati/ng-bs-daterangepicker/raw/master/daterangepicker.js"></script>
<script src="https://github.com/luisfarzati/ng-bs-daterangepicker/raw/master/angular.min.js"></script>
to the list above, you should add:
<script src="https://github.com/luisfarzati/ng-bs-daterangepicker/raw/master/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 the ng-model
object;minDate
, maxDate
: mapped from min-date
and max-date
attributes;dateLimit
: mapped from limit
attribute;format
: mapped from format
attribute;separator
: mapped from separator
attribute.enableTimePicker
: mapped from timePicker
attribute.ranges
: mapped from ranges
attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting)opens
: mapped from open
attribute. Can be right
or left
.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()
.
timePicker*
show*
*Class
and stuffYou 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