ng-eternicode-datepicker

WebJar for ng-eternicode-datepicker

License	MIT
Categories	Github Development Tools Version Controls
GroupId	org.webjars.bower
ArtifactId	github-com-fkammer-ng-eternicode-datepicker
Last Version	0.1.3
Release Date	Sep 30, 2016
Type	jar
Description	ng-eternicode-datepicker WebJar for ng-eternicode-datepicker
Project URL	http://webjars.org
Source Code Management	https://github.com/fkammer/ng-eternicode-datepicker

Download github-com-fkammer-ng-eternicode-datepicker

Filename	Size
github-com-fkammer-ng-eternicode-datepicker-0.1.3.pom
github-com-fkammer-ng-eternicode-datepicker-0.1.3.jar	11 KB
github-com-fkammer-ng-eternicode-datepicker-0.1.3-sources.jar	22 bytes
github-com-fkammer-ng-eternicode-datepicker-0.1.3-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-fkammer-ng-eternicode-datepicker/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-fkammer-ng-eternicode-datepicker</artifactId>
    <version>0.1.3</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-fkammer-ng-eternicode-datepicker/
implementation 'org.webjars.bower:github-com-fkammer-ng-eternicode-datepicker:0.1.3'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-fkammer-ng-eternicode-datepicker/
implementation ("org.webjars.bower:github-com-fkammer-ng-eternicode-datepicker:0.1.3")

Apache Buildr

'org.webjars.bower:github-com-fkammer-ng-eternicode-datepicker:jar:0.1.3'

Apache Ivy

<dependency org="org.webjars.bower" name="github-com-fkammer-ng-eternicode-datepicker" rev="0.1.3">
  <artifact name="github-com-fkammer-ng-eternicode-datepicker" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='github-com-fkammer-ng-eternicode-datepicker', version='0.1.3')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "github-com-fkammer-ng-eternicode-datepicker" % "0.1.3"

Leiningen

[org.webjars.bower/github-com-fkammer-ng-eternicode-datepicker "0.1.3"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1,2)
org.webjars.bower : bootstrap-datepicker	jar	1.6.1

Project Modules

There are no modules declared in this project.

ng-eternicode-datepicker

AngularJS wrapper for the awesome bootstrap-datepicker by @eternicode.

Installation

bower

bower install ng-eternicode-datepicker --save

npm

npm install ng-eternicode-datepicker --save

Other
Download file dist/ng-eternicode-datepicker.min.js

Include files

The original bootstrap-datepicker files have to be included first. These files are required:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="bower_components/ng-eternicode-datepicker/dist/ng-eternicode-datepicker.js"></script>

If you want to use a different language remember to include the appropriate bootstrap-datepicker language file. For example:

<script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.de.min.js"></script>

Usage

Remember to add the module fk.eternicode-datepicker as a dependency to your angular module:

angular.module('yourApp', ['fk.eternicode-datepicker']);

Text input

<div datepicker ng-model="dateInput">
  <input type="text" class="form-control">
</div>

!! ATTENTION !!
You can't apply datepicker and ng-model directly to an input field.
As the bootstrap-datepicker changes the value of the input field, this would mess around with our model.

Component

<div class="input-group date" datepicker ng-model='dateComponent'>
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-th"></i>
  </span>
</div>

Embedded / Inline

<div datepicker ng-model='dateEmbedded'></div>

Range

Currently not supported.

Options

To pass additional datepicker options use the dp-options attribute:

<div datepicker ng-model="dateInput" dp-options="datepickerOptions">
  <!-- dp-options not ng-options! -->
  <input type="text" class="form-control">
</div>

// Inside your controller
$scope.datepickerOptions = {
  autoclose: true
};

Please refer to the bootstrap-datepicker docs to learn more about supported options.

datepickerDefaultsProvider

Many options will be the same for every datepicker in your app. At least the language and date format should be consinstent. For this reason you could set default options which are used for every datepicker with the datepickerDefaultsProvider.

angular.module('yourApp')
  .config(['datepickerDefaultsProvider', function (datepickerDefaultsProvider) {
    datepickerDefaultsProvider.setDefaultOptions({
      language: 'de',
      format: 'dd.mm.yyyy',
      assumeNearbyYear: true,
      autoclose: true,
      todayHighlight: true
    });
  });

Ofcourse you could override or extend your defaults with the dp-options attribute.

Todo

• Tests
• Angular form validation

License

MIT

Versions

Version
0.1.3 Sep 30, 2016