angular-bootstrap-daterangepicker

WebJar for angular-bootstrap-daterangepicker

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-bootstrap-daterangepicker
Last Version	0.2.0
Release Date	Aug 26, 2015
Type	jar
Description	angular-bootstrap-daterangepicker WebJar for angular-bootstrap-daterangepicker
Project URL	http://webjars.org
Source Code Management	https://github.com/wangshijun/angular-bootstrap-daterangepicker

Download angular-bootstrap-daterangepicker

Filename	Size
angular-bootstrap-daterangepicker-0.2.0.pom
angular-bootstrap-daterangepicker-0.2.0.jar	16 KB
angular-bootstrap-daterangepicker-0.2.0-sources.jar	22 bytes
angular-bootstrap-daterangepicker-0.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-daterangepicker/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-bootstrap-daterangepicker</artifactId>
    <version>0.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-daterangepicker/
implementation 'org.webjars.bower:angular-bootstrap-daterangepicker:0.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-daterangepicker/
implementation ("org.webjars.bower:angular-bootstrap-daterangepicker:0.2.0")

Apache Buildr

'org.webjars.bower:angular-bootstrap-daterangepicker:jar:0.2.0'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-bootstrap-daterangepicker" rev="0.2.0">
  <artifact name="angular-bootstrap-daterangepicker" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-bootstrap-daterangepicker', version='0.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-bootstrap-daterangepicker" % "0.2.0"

Leiningen

[org.webjars.bower/angular-bootstrap-daterangepicker "0.2.0"]

Dependencies

compile (3)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.3,1.4)
org.webjars.bower : bootstrap-daterangepicker	jar	1.3.22
org.webjars.bower : bootstrap	jar	[3,4)

Project Modules

There are no modules declared in this project.

angular-bootstrap-daterangepicker

Angular directive for Dan Grossman's bootstrap-daterangepicker.

Demo: http://luisfarzati.github.io/angular-bootstrap-daterangepicker

Installation

Using bower:

bower install angular-bootstrap-daterangepicker

Using npm:

npm install angular-bootstrap-daterangepicker

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="angular-bootstrap-daterangepicker.js"></script>

Then, inject angular-bootstrap-daterangepicker in your application module:

angular.module('myApp', ['angular-bootstrap-daterangepicker']);

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.
• ranges: mapped from ranges attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting)

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:

• 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

Versions

Version
0.2.0 Aug 26, 2015