ng-bs-daterangepicker-plus
v0.1.0
Published
AngularJS directive for bootstrap-daterangepicker
Downloads
30
Readme
ng-bs-daterangepicker
Angular directive for Dan Grossman's bootstrap-daterangepicker.
This is a fork of original Luis Farzati's version with a couple of incompatible fixes and localization feature.
Demo: http://kojoru.github.io/ng-bs-daterangepicker
Installation
Using bower:
bower install ng-bs-daterangepicker-plus
Using npm:
npm install ng-bs-daterangepicker-plus
How to use it
You should already have a bunch of scripts and CSS required for bootstrap-daterangepicker:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
to the list above, you should add:
<script type="text/javascript" src="ng-bs-daterangepicker.js"></script>
Then, inject ngBootstrap.dateRangePicker
in your application module:
angular.module('myApp', ['ngBootstrap.dateRangePicker']);
and then just add any element of type daterange
:
<input ng-daterange type="daterange" ng-model="myDateRange">
The result object $scope.myDateRange
has a startDate
and endDate
properties, which are instances of moment()
.
Implemented features so far
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.ranges
: mapped fromranges
attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting)locale
: mapped fromlocale
attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting)
Example with all above features:
<input
ng-daterange
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()
.
Features to be implemented:
timePicker*
show*
- other formatting options like
*Class
and stuff
Build
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