Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luisfarzati/ng-bs-daterangepicker
AngularJS directive for bootstrap-daterangepicker
https://github.com/luisfarzati/ng-bs-daterangepicker
Last synced: 3 months ago
JSON representation
AngularJS directive for bootstrap-daterangepicker
- Host: GitHub
- URL: https://github.com/luisfarzati/ng-bs-daterangepicker
- Owner: luisfarzati
- License: mit
- Archived: true
- Created: 2013-09-16T04:39:15.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2018-05-28T14:14:59.000Z (over 6 years ago)
- Last Synced: 2024-05-19T10:03:41.851Z (7 months ago)
- Language: JavaScript
- Homepage: http://luisfarzati.github.io/ng-bs-daterangepicker/
- Size: 3.02 MB
- Stars: 246
- Watchers: 13
- Forks: 167
- Open Issues: 57
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ng-bs-daterangepicker
---
Angular directive for Dan Grossman's [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker).
Demo: http://luisfarzati.github.io/ng-bs-daterangepicker
Installation
---
Using bower:
```
bower install ng-bs-daterangepicker
```
Using npm:
```
npm install ng-bs-daterangepicker
```
How to use it
---
You should already have a bunch of scripts and CSS required for bootstrap-daterangepicker:
CSS:
```html
```
JavaScript:
```html
```
to the list above, you should add:
```html
```
Then, inject `ngBootstrap` in your application module:
```js
angular.module('myApp', ['ngBootstrap']);
```
and then just add an `input` of type `daterange`:
```html
```
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 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:
```html
```
The `limit` attribute lets you specify a number and unit similarly as you would invoke `moment.duration()`.
### Features to be implemented:
* Some `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
```
[](https://bitdeli.com/free "Bitdeli Badge")