Date-range picker

The date-range picker directive creates a text box where users can select date ranges from a set of well-known options. You can also allow users to select dates to create specific date ranges. The directive works hand-in-hand with a date-range picker service to provide service-oriented functionality.

Date-range picker settings

  • bb-date-range-picker — Creates a text box with a dropdown to select date ranges.
    • bb-date-range-picker-value — Specifies an object that tracks the value of the date-range picker control. The .dateRangeType property provides the integer (ENUM) value of the date-range type that users select.
    • bb-date-range-picker-automation-id — Specifies a string to use when creating the bb-auto-field attribute on elements in the date-range picker.
    • bb-date-range-picker-options(Optional.) Specifies an options object that can customize the behavior of the date-range picker.
      • availableDateRangeTypes(Optional.) Provides an array of integers (dateRangeTypes ENUM) to specify an ordered list of date-range types for the dropdown. Common variations are available in the date-range picker service.
      • getDateRangeTypeInfo(Optional.) A function that you can provide to associate custom date-range types with captions and descriptions. We recommend that the custom date-range types you use be set to values above 1000 to avoid collisions with SkyUX date-range types. It should return an object with caption and description properties, and it has the following argument:
        • dateRangeType — The date-range type.
    • bb-date-range-picker-label(Optional.) Provides a text label to display over the field where users select date ranges.
    • bb-date-range-picker-from-date(Optional.) A variable that is bound to the "from date" in a specific date range.
    • bb-date-range-picker-to-date(Optional.) A variable that is bound to the "to date" in a specific date range.
    • bb-date-range-picker-valid(Optional.) A variable that is set to true when dates in a specific date range are valid and false when dates are not valid.
    • bb-date-range-picker-no-labels(Optional.) Indicates whether to hide the labels for the date-range picker and specific date controls. When set to true, placeholder text appears within the specific date controls.

Date-range picker service

The date-range picker service provides functionality that works closely with the directive. The service includes the following properties:

  • dateRangeTypes — An ENUM of all date-range types that the date-range picker understands and can include in the dropdown.
  • getDateRangeTypeCaption — A function to get the caption of the dropdown item with the following arguments:
    • dateRangeType — The date-range type associated with the caption.
    • getDateRangeTypeInfo(Optional.) A function that you can provide to associate custom date-range types with captions and descriptions. It should return an object with caption and description properties, and it has the following argument:
      • dateRangeType — The date-range type.
  • getDateRangeFilterDescription — A function to get the description of a date-range type with the following arguments:
    • dateRangeType — The date-range type associated with the description.
    • getDateRangeTypeInfo(Optional.) A function that you can provide to associate custom date-range types with captions and descriptions. It should return an object with caption and description properties, and it has the following argument:
      • dateRangeType — The date-range type.
  • getDateRangeOptions — A function that provides different sets of dateRangeTypes in a given order. The contents of the returned arrays depend on the following flags in the optionTypes object passed to the function.
    • includeDefault — If set to true, the returned array will contain the default order and set of date-range types.
    • includeSpecific — If set to true, the returned array will contain the date-range type that lets users select dates for a specific range.
    • includePast — If set to true, the returned array will contain the date-range types that are appropriate to filter for things that occurred in the past.
  • defaultDateRangeOptions(Deprecated.) Use the getDateRangeOptions function instead. An array of dateRangeTypes that provides the default order and the set of date-range types to include in the dropdown.
  • specificDateRangeOptions(Deprecated.) Use the getDateRangeOptions function instead. An array of dateRangeTypes that provides the same options as defaultDateRangeOptions, plus a date-range type that let users select dates for a specific date range.
  • pastDateRangeOptions(Deprecated.) Use the getDateRangeOptions function instead. An array of dateRangeTypes that are appropriate to filter for things that occurred in the past. For example, you don't want to search for items created "next month."

Demo

Selected dateRangeType: '{{dateRangeCtrl.dateRangePickerValue.dateRangeType}}'
Caption: '{{dateRangeCtrl.bbDateRangePicker.getDateRangeTypeCaption(dateRangeCtrl.dateRangePickerValue.dateRangeType)}}'
Description: '{{dateRangeCtrl.bbDateRangePicker.getDateRangeFilterDescription(dateRangeCtrl.dateRangePickerValue.dateRangeType)}}'



Date-range picker with option to select specific dates

Selected dateRangeType: '{{specificRangeCtrl.dateRangePickerValue.dateRangeType}}'
Caption: '{{specificRangeCtrl.bbDateRangePicker.getDateRangeTypeCaption(specificRangeCtrl.dateRangePickerValue.dateRangeType)}}'
Description: '{{specificRangeCtrl.bbDateRangePicker.getDateRangeFilterDescription(specificRangeCtrl.dateRangePickerValue.dateRangeType)}}'
From date: {{specificRangeCtrl.fromDate | date: 'MM/dd/yyyy'}}
To date: {{specificRangeCtrl.toDate | date: 'MM/dd/yyyy'}}
Date range: not valid

Date-range picker with custom options

Selected dateRangeType: '{{customRangeCtrl.dateRangePickerValue.dateRangeType}}'
Caption: '{{customRangeCtrl.bbDateRangePicker.getDateRangeTypeCaption(customRangeCtrl.dateRangePickerValue.dateRangeType, customRangeCtrl.dateRangePickerOptions.getDateRangeTypeInfo)}}'
Description: '{{customRangeCtrl.bbDateRangePicker.getDateRangeFilterDescription(customRangeCtrl.dateRangePickerValue.dateRangeType, customRangeCtrl.dateRangePickerOptions.getDateRangeTypeInfo)}}'

Markup

<div>
  <div ng-controller="DateRangePickerDemoController as dateRangeCtrl" class="form-group">
      <bb-date-range-picker bb-date-range-picker-value="dateRangeCtrl.dateRangePickerValue"
                            bb-date-range-picker-options="dateRangeCtrl.dateRangePickerOptions"
                            bb-date-range-picker-automation-id="'DirectiveDemo'"
                            bb-date-range-picker-label="'Date-range picker'"
                            ></bb-date-range-picker>

      Selected dateRangeType: <strong>'{{dateRangeCtrl.dateRangePickerValue.dateRangeType}}'</strong>
      <br />
      Caption: <strong>'{{dateRangeCtrl.bbDateRangePicker.getDateRangeTypeCaption(dateRangeCtrl.dateRangePickerValue.dateRangeType)}}'</strong>
      <br />
      Description: <strong>'{{dateRangeCtrl.bbDateRangePicker.getDateRangeFilterDescription(dateRangeCtrl.dateRangePickerValue.dateRangeType)}}'</strong>

      <br />
      <br />
      <button ng-click="dateRangeCtrl.selectToday()">Select today</button>
      <br />
      <button ng-click="dateRangeCtrl.reset()">Reset</button>
      <br />
      <label>
          <input type="checkbox" ng-model="dateRangeCtrl.options.pastOnly" /> Past items filter
      </label>

  </div>
  <h3>Date-range picker with option to select specific dates</h3>
  <div ng-controller="SpecificDateRangePickerDemoController as specificRangeCtrl" class="form-group">
      <bb-date-range-picker bb-date-range-picker-value="specificRangeCtrl.dateRangePickerValue"
                              bb-date-range-picker-options="specificRangeCtrl.dateRangePickerOptions"
                              bb-date-range-picker-automation-id="'DirectiveDemo'"
                              bb-date-range-picker-from-date="specificRangeCtrl.fromDate"
                              bb-date-range-picker-to-date="specificRangeCtrl.toDate"
                              bb-date-range-picker-label="'Date-range picker'"
                              bb-date-range-picker-valid="specificRangeCtrl.isValid"
                              ></bb-date-range-picker>

      Selected dateRangeType: <strong>'{{specificRangeCtrl.dateRangePickerValue.dateRangeType}}'</strong>
      <br />
      Caption: <strong>'{{specificRangeCtrl.bbDateRangePicker.getDateRangeTypeCaption(specificRangeCtrl.dateRangePickerValue.dateRangeType)}}'</strong>
      <br />
      Description: <strong>'{{specificRangeCtrl.bbDateRangePicker.getDateRangeFilterDescription(specificRangeCtrl.dateRangePickerValue.dateRangeType)}}'</strong>

      <br />
      From date: <strong>{{specificRangeCtrl.fromDate | date: 'MM/dd/yyyy'}}</strong>
      <br />
      To date: <strong>{{specificRangeCtrl.toDate | date: 'MM/dd/yyyy'}}</strong>
      <br />
      Date range: <strong><span ng-hide="specificRangeCtrl.isValid">not</span> valid</strong>

      <br />

  </div>

  <h3>Date-range picker with custom options</h3>
  <div ng-controller="CustomDateRangePickerDemoController as customRangeCtrl" class="form-group">
      <bb-date-range-picker bb-date-range-picker-value="customRangeCtrl.dateRangePickerValue"
                              bb-date-range-picker-options="customRangeCtrl.dateRangePickerOptions"
                              bb-date-range-picker-automation-id="'DirectiveDemo'"
                              bb-date-range-picker-from-date="customRangeCtrl.fromDate"
                              bb-date-range-picker-to-date="customRangeCtrl.toDate"
                              bb-date-range-picker-label="'Date-range picker'"
                              bb-date-range-picker-valid="customRangeCtrl.isValid"
                              ></bb-date-range-picker>

      Selected dateRangeType: <strong>'{{customRangeCtrl.dateRangePickerValue.dateRangeType}}'</strong>
      <br />
      Caption: <strong>'{{customRangeCtrl.bbDateRangePicker.getDateRangeTypeCaption(customRangeCtrl.dateRangePickerValue.dateRangeType, customRangeCtrl.dateRangePickerOptions.getDateRangeTypeInfo)}}'</strong>
      <br />
      Description: <strong>'{{customRangeCtrl.bbDateRangePicker.getDateRangeFilterDescription(customRangeCtrl.dateRangePickerValue.dateRangeType, customRangeCtrl.dateRangePickerOptions.getDateRangeTypeInfo)}}'</strong>

      <br />

  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function DateRangePickerDemoController($scope, bbDateRangePicker) {
        var self = this,
            pastDateRangeOptions,
            defaultDateRangeOptions;


        self.options = {};

        self.bbDateRangePicker = bbDateRangePicker;

        pastDateRangeOptions = bbDateRangePicker.getDateRangeOptions(
            {
                includePast: true
            });

        defaultDateRangeOptions = bbDateRangePicker.getDateRangeOptions(
            {
                includeDefault: true
            });


        self.dateRangePickerValue = {
            dateRangeType: bbDateRangePicker.dateRangeTypes.TOMORROW
        };

        self.dateRangePickerOptions = {};

        self.selectToday = function () {
            self.dateRangePickerValue = {
                dateRangeType: bbDateRangePicker.dateRangeTypes.TODAY
            };
        };

        self.reset = function () {
            self.dateRangePickerValue = {};
        };

        $scope.$watch(function () {
            return self.options.pastOnly;
        }, function (newVal) {
            if (newVal === true) {
                self.dateRangePickerOptions.availableDateRangeTypes = pastDateRangeOptions;
            } else {
                self.dateRangePickerOptions.availableDateRangeTypes = defaultDateRangeOptions;
            }
        });
    }

    DateRangePickerDemoController.$inject = ['$scope', 'bbDateRangePicker'];

    function SpecificDateRangePickerDemoController($scope, bbDateRangePicker) {
        var self = this;

        self.options = {};

        self.bbDateRangePicker = bbDateRangePicker;
        self.dateRangePickerValue = {
            dateRangeType: bbDateRangePicker.dateRangeTypes.SPECIFIC_RANGE
        };

        self.dateRangePickerOptions = {};

        self.dateRangePickerOptions.availableDateRangeTypes = bbDateRangePicker.getDateRangeOptions(
            {
                includeDefault: true,
                includeSpecific: true
            });

    }

    SpecificDateRangePickerDemoController.$inject = ['$scope', 'bbDateRangePicker'];

    function CustomDateRangePickerDemoController($scope, bbDateRangePicker) {
        var self = this,
            availableTypes,
            everyFourYearsType = 1001;

        self.options = {};

        self.bbDateRangePicker = bbDateRangePicker;
        self.dateRangePickerValue = {
            dateRangeType: everyFourYearsType
        };

        availableTypes = bbDateRangePicker.getDateRangeOptions(
            {
                includeDefault: true
            });

        availableTypes.push(everyFourYearsType);

        function getDateRangeTypeInfo(dateRangeType) {
            if (dateRangeType === everyFourYearsType) {
                return {
                    caption: 'Every four years',
                    description: '{0} for every four years'
                };
            }
        }

        self.dateRangePickerOptions = {
            availableDateRangeTypes: availableTypes,
            getDateRangeTypeInfo: getDateRangeTypeInfo
        };

    }

    CustomDateRangePickerDemoController.$inject = ['$scope', 'bbDateRangePicker'];

    angular.module('stache')
        .controller('DateRangePickerDemoController', DateRangePickerDemoController)
        .controller('SpecificDateRangePickerDemoController', SpecificDateRangePickerDemoController)
        .controller('CustomDateRangePickerDemoController', CustomDateRangePickerDemoController);
}());