ng-daterangepicker

WebJar for ng-daterangepicker

License	MIT
GroupId	org.webjars.bower
ArtifactId	ng-daterangepicker
Last Version	0.4.1
Release Date	Jan 25, 2016
Type	jar
Description	ng-daterangepicker WebJar for ng-daterangepicker
Project URL	http://webjars.org
Source Code Management	https://github.com/yuyaohshimo/ng-daterangepicker

Download ng-daterangepicker

Filename	Size
ng-daterangepicker-0.4.1.pom
ng-daterangepicker-0.4.1.jar	18 KB
ng-daterangepicker-0.4.1-sources.jar	22 bytes
ng-daterangepicker-0.4.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/ng-daterangepicker/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>ng-daterangepicker</artifactId>
    <version>0.4.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/ng-daterangepicker/
implementation 'org.webjars.bower:ng-daterangepicker:0.4.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/ng-daterangepicker/
implementation ("org.webjars.bower:ng-daterangepicker:0.4.1")

Apache Buildr

'org.webjars.bower:ng-daterangepicker:jar:0.4.1'

Apache Ivy

<dependency org="org.webjars.bower" name="ng-daterangepicker" rev="0.4.1">
  <artifact name="ng-daterangepicker" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='ng-daterangepicker', version='0.4.1')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "ng-daterangepicker" % "0.4.1"

Leiningen

[org.webjars.bower/ng-daterangepicker "0.4.1"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.3.5,)
org.webjars.bower : moment	jar	[2.9.0,2.10)

Project Modules

There are no modules declared in this project.

ng-daterangepicker

Date range picker for Angular.js

Demo

http://yuyaohshimo.github.io/ng-daterangepicker

Installation

$ bower install ng-daterangepicker

Usage

You should write script and link tag in HTML header:

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css"/>

You should write date-range-picker tag as an angular directive:

<date-range-picker use-browser-default="useBrowserDefault" options="options" initial-range="initialRange" locale="locale" format="format" apply-button-label="applyButtonLabel" apply-date-range="applyDateRange(start, end)"></date-range-picker>

Options

• use-browser-default: if you want to use a browser's calendar, set true
• options: range options
• initial-range: initial range
• locale: locale for moment
• format: format to display date
• apply-button-label: label of custom button (optional)
• apply-date-range: callback function

Example:

options = [
  // if you want to set date with calendar, put custom
  {
    label: 'Custom',
    value: 'custom'
  },
  // if you want to set all range option, put all
  {
    label: 'All',
    value: 'all',
    selected: true
  },
  {
    label: 'Today',
    value:'today',
    start: moment(),
    end: moment()
  },
  {
    label: 'This week',
    value:'thisWeek',
    start: moment().startOf('week'),
    end: moment().endOf('week')
  },
  {
    label: 'This month',
    value:'thisMonth',
    start: moment().startOf('month'),
    end: moment().endOf('month')
  }
];
initialRange = {
  start: moment(), // today
  end: moment().add(1, 'days') // tomorrow
};
locale = {
  year: 'YYYY年',
  months : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
  weekdaysShort: '日_月_火_水_木_金_土'.split('_')
};
format = {
  date: 'YYYY/MM/DD',
  to: '~'
};
applyDateRange = function(start, end, option) {
  console.log(start);
  console.log(end);
  console.log(option);
};

Development

Please run gulp.

$ gulp

Test

E2E Test

We can do E2E test using protractor.

$ npm run update-webdriver

$ gulp test:e2e

License

MIT license

Versions

Version
0.4.1 Jan 25, 2016
0.4.0 Jun 4, 2015