Date Range Picker

A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework.


Date and Time

Single Date Picker

Predefined Ranges


require(['jquery', 'px-libs/daterangepicker'], function($) {


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

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

Then inject the plugin into your angular application:

angular.module('yourApp', ['daterangepicker']);

Alternatively, you can include daterangepicker plugin using ocLazyLoad plugin:

    serie: true,
    name: 'daterangepicker',
    files: [

daterangepicker directive

daterangepicker directive requires start-date attribute to be on the element.

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

start-date and end-date attributes

start-date and end-date attributes have a two-way data binding:

<input daterangepicker start-date="startDateModel" end-date="endDateModel" type="text" class="form-control">

<input daterangepicker start-date="dateModel" single-date-picker="true" type="text" class="form-control">


daterangepicker'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.
  • always-show-calendars
  • apply-class
  • auto-apply
  • auto-update-input
  • button-classes
  • cancel-class
  • date-limit
  • drops
  • end-date
  • is-custom-date
  • is-invalid-date
  • linked-calendars
  • locale
  • max-date
  • min-date
  • opens
  • parent-el
  • ranges
  • show-custom-range-label
  • show-dropdowns
  • show-i-s-o-week-numbers
  • show-week-numbers
  • single-date-picker
  • start-date
  • time-picker
  • time-picker24-hour
  • time-picker-increment
  • time-picker-seconds

<input daterangepicker start-date="startDateModel" end-date="endDateModel" type="text" class="form-control"
       button-classes="['btn', 'btn-outline']">


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

  • on-apply
  • on-cancel
  • on-hide
  • on-hide-calendar
  • on-show
  • on-show-calendar

<input daterangepicker start-date="startDateModel" end-date="endDateModel" type="text" class="form-control"

function SomeController() {
  this.apply = function(e, picker) { ... }
  this.cancel = function(e, picker) { ... }
  this.showCalendar = function(e, picker) { ... }