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-modelobject; -
minDate,maxDate: mapped frommin-dateandmax-dateattributes; -
dateLimit: mapped fromlimitattribute; -
format: mapped fromformatattribute; -
separator: mapped fromseparatorattribute. -
enableTimePicker: mapped fromtimePickerattribute. -
ranges: mapped fromrangesattribute. Can be a JSON string or scoped object. (check daterangepicker for formatting) -
opens: mapped fromopenattribute. Can berightorleft.
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
*Classand 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
