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