ng-bs-daterangepicker

WebJar for ng-bs-daterangepicker

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

github-com-luisfarzati-ng-bs-daterangepicker
Last Version

Last Version

0.0.5
Release Date

Release Date

Type

Type

jar
Description

Description

ng-bs-daterangepicker
WebJar for ng-bs-daterangepicker
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/luisfarzati/ng-bs-daterangepicker

Download github-com-luisfarzati-ng-bs-daterangepicker

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-luisfarzati-ng-bs-daterangepicker/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-luisfarzati-ng-bs-daterangepicker</artifactId>
    <version>0.0.5</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-luisfarzati-ng-bs-daterangepicker/
implementation 'org.webjars.bower:github-com-luisfarzati-ng-bs-daterangepicker:0.0.5'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-luisfarzati-ng-bs-daterangepicker/
implementation ("org.webjars.bower:github-com-luisfarzati-ng-bs-daterangepicker:0.0.5")
'org.webjars.bower:github-com-luisfarzati-ng-bs-daterangepicker:jar:0.0.5'
<dependency org="org.webjars.bower" name="github-com-luisfarzati-ng-bs-daterangepicker" rev="0.0.5">
  <artifact name="github-com-luisfarzati-ng-bs-daterangepicker" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-luisfarzati-ng-bs-daterangepicker', version='0.0.5')
)
libraryDependencies += "org.webjars.bower" % "github-com-luisfarzati-ng-bs-daterangepicker" % "0.0.5"
[org.webjars.bower/github-com-luisfarzati-ng-bs-daterangepicker "0.0.5"]

Dependencies

compile (5)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.0.7,)
org.webjars.bower : momentjs jar (,2.9.0)
org.webjars.bower : bootstrap-daterangepicker jar 1.3.17
org.webjars.bower : jquery jar [0,)
org.webjars.bower : bootstrap jar [3.0.0,3.1)

Project Modules

There are no modules declared in this project.

ng-bs-daterangepicker

Angular directive for Dan Grossman's 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:

<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().

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:

<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().

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

Bitdeli Badge

Versions

Version
0.0.5