Datepicker https://eternicode.github.io/bootstrap-datepicker

Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.

Base

Features

Range

to

Inline

Usage


require(['jquery', 'px/extensions/bootstrap-datepicker'], function($) {
  ...
});
        

Usage

To use datepicker plugin, you need to include the next scripts:


<script src="path/to/js/libs/bootstrap-datepicker.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-bootstrap-datepicker.js"></script>
        

Then inject the plugin into your angular application:

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

Alternatively, you can include datepicker plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'bootstrap-datepicker',
    files: [
      'path/to/js/libs/bootstrap-datepicker.js',
      'path/to/js/pixeladmin/directives/angular-bootstrap-datepicker.js',
    ],
  },
]);
        

bootstrap-datepicker directive

You can use bootstrap-datepicker directive where you want. And when the scope is destroyed the directive will be destroyed.

With component

Range

to

date attribute

date has a two-way data binding:



<input bootstrap-datepicker date="ctrl.dateModel" type="text" class="form-control">


<input bootstrap-datepicker date="ctrl.multidateModel" multidate="true" type="text" class="form-control">


<div bootstrap-datepicker date="ctrl.dateRangeModel" class="input-daterange input-group">
  ...
</div>
        

Instance

You can define instance attribute to get a pointer to datepicker element:


<input bootstrap-datepicker type="text" class="form-control" instance="ctrl.$datepicker">
        

function SomeController() {
  // Pointer
  this.$datepicker = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$datepicker('show');
  this.$datepicker('getUTCDate');
});
        

Options

datepicker's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.

Options marked with have an angular $watch listener applied to it.
  • assume-nearby-year
  • autoclose
  • before-show-century
  • before-show-day
  • before-show-decade
  • before-show-month
  • before-show-year
  • calendar-weeks
  • clear-btn
  • container
  • dates-disabled
  • days-of-week-disabled
  • days-of-week-highlighted
  • disable-touch-keyboard
  • enable-on-readonly
  • end-date
  • force-parse
  • format
  • immediate-updates
  • keep-empty-values
  • keyboard-navigation
  • language
  • max-view-mode
  • min-view-mode
  • multidate
  • multidate-separator
  • orientation
  • show-on-focus
  • start-date
  • start-view
  • templates
  • title
  • today-btn
  • today-highlight
  • toggle-active
  • update-view-date
  • week-start
  • z-index-offset

<input bootstrap-datepicker type="text" class="form-control"
       calendar-weeks="true"
       today-btn="'linked'"
       clear-btn="true">
        

Events

Event handlers can be bound using attributes (see the plugin's documentation):

  • on-change-century
  • on-change-date
  • on-change-decade
  • on-change-month
  • on-change-year
  • on-clear-date
  • on-hide
  • on-show

<input bootstrap-datepicker type="text" class="form-control"
       on-show="ctrl.show"
       on-hide="ctrl.hide"
       on-change-date="ctrl.changeDate">
        

function SomeController() {
  this.show = function(e) { ... }
  this.hide = function(e) { ... }
  this.changeDate = function(e) { ... }
});