Datepicker

The datepicker directive wraps the Angular UI Bootstrap datepicker directive. It creates a text box with a calendar picker to select dates.

Datepicker settings

  • bb-datepicker — Creates a text box with a calendar picker.
    • bb-datepicker-custom-validation(Optional.) Specifies an object that contains a function to validate entries in the text box.
      • formatValue — A function to be called when users enter text in the textbox. The only parameter to pass to the function is the raw value of the text box. If a problem occurs when formatting value in the input, the function returns an object or a promise of an object with the following properties:
        • formattedValue — The result after the validation formats the value in the input. For example, the validation can translate values such as "June 2015" into numerical dates.
        • formattingErrorMessage(Optional.) The response that displays if an error occurs during validations.
    • bb-date-format(Optional.) Specifies the format string to use for dates in the text box. This overrides the SKY UX default of MM/dd/yyyy that is set by the currentCultureDateFormatString property in bbDatepickerConfig. You set up the format string just like the format strings for the Angular date filter. Note that this control does not accept format strings like short, shortDate, longDate. You must use the formats like MM/dd/yyyy.
    • bb-date-options(Optional.) Specifies an options object to customize the datepicker. The options include all valid options for the Angular UI Bootstrap datepicker-options object. You can set application defaults for the showWeeks and startingDay properties of the Angular UI Bootstrap datepicker in the bbDatepickerConfig constant defined in sky.datepicker. The SKY UX defaults for showWeeks and startingDay are false and 0.
    • bb-datepicker-name(Optional) Provides a value to bind to the name attribute of the datepicker input. The value is used for validation and form submission.
    • bb-datepicker-close-on-date-selection(Optional.) Indicates whether to close the datepicker calendar after users select dates. (Default: true)
    • bb-datepicker-append-to-body(Optional.) Indicates whether to append the datepicker popup element to body instead of the datepicker text box. For modal forms, appending the datepicker to body can prevent the datepicker from interfering with the rest of the modal. (Default: false)
    • bb-datepicker-max(Optional.) A JavaScript Date object to set a maximum date for the datepicker control and input. Input validation is bound to $scope.myFormName.inputName.$error.maxDate. You can set this value globally in the bbDatepickerConfig object property maxDate.
    • bb-datepicker-min(Optional.) A JavaScript Date object to set a minimum date for the datepicker control and input. Input validation is bound to $scope.myFormName.inputName.$error.minDate. You can set this value globally in the bbDatepickerConfig object property minDate.
    • ng-model — Specifies an object to bind the date value in and out of the datepicker. This is set to a JavaScript Date object when set or parsed from the Bootstrap datepicker.
    • bb-datepicker-placeholder(Optional.) Overrides the default placeholder text that appears in the datepicker input.
    • bb-datepicker-show-button-bar(Optional.) Indicates whether to display a button bar under the datepicker. (Default: false)
    • bb-datepicker-alt-input-formats(Optional.) Specifies an array of alternate formats acceptable for manual entry. For example, if the bb-date-format is set to 'MM/dd/yyyy', you could specify 'M/d/yyyy' as an alternate format for the user. This extends the bbAltInputFormats array set in bbDatepickerConfig. If no alternate inputs are set in bb-datepicker or bbDatepickerConfig, then bb-datepicker will accept either padded or unpadded days and months for manual entry.
  • bbDatepickerConfig — A global configuration object that applies options to datepickers throughout an application.

Validation

The bb-datepicker directive sets validation on the datepicker input using bb-datepicker-name for the input name. To check whether a date value is valid, you can access the dateFormat validator through $scope.myFormName.inputName.$error.dateFormat. The error message for an invalid date is in $scope.myFormName.inputName.invalidFormatMessage.

Demo

{{datepickerCtrl.date2}}
{{datepickerCtrl.date1}}

Markup

<div ng-controller="DatepickerDemoController as datepickerCtrl">
    <form name="datepickerCtrl.testform" novalidate>

        <div class="row">
            <div class="col-md-6 col-xs-12">
                <label>Date field</label>
                <bb-datepicker bb-datepicker-min="datepickerCtrl.minDate" bb-datepicker-max="datepickerCtrl.maxDate" bb-datepicker-name="date2" ng-model="datepickerCtrl.date2" bb-datepicker-placeholder="datepickerCtrl.placeholder"></bb-datepicker>
                <label class="error" ng-show="datepickerCtrl.testform.date2.$error.dateFormat">{{datepickerCtrl.testform.date2.invalidFormatMessage}}</label>
                <label class="error" ng-show="datepickerCtrl.testform.date2.$error.minDate">Date is prior to minimum date range</label>
                <label class="error" ng-show="datepickerCtrl.testform.date2.$error.maxDate">Date is after maximum date range</label>
                <label class="error" ng-show="datepickerCtrl.testform.date2.$error.required && datepickerCtrl.testform.date2.$touched">Date is required</label>
            </div>
            <div class="col-md-6 col-xs-12">
                <label>Date value</label>
                <div>{{datepickerCtrl.date2}}</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-xs-12">
                <button class="btn btn-primary"  style="margin-top: 5px; margin-bottom: 5px;" type="button" ng-click="datepickerCtrl.setDate()">Set date</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-xs-12">
                <label>Date field - custom formatting</label>
                <bb-datepicker bb-datepicker-name="date1" ng-required="true" ng-model="datepickerCtrl.date1" bb-datepicker-custom-validation="datepickerCtrl.customFormat"></bb-datepicker>
                <label class="error" ng-show="datepickerCtrl.testform.date1.$error.dateFormat && datepickerCtrl.testform.date1.$touched">{{datepickerCtrl.testform.date1.invalidFormatMessage}}</label>
                <label class="error" ng-show="datepickerCtrl.testform.date1.$error.required && datepickerCtrl.testform.date1.$touched">Date is required</label>
            </div>
            <div class="col-md-6 col-xs-12">
                <label>Date value</label>
                <div>{{datepickerCtrl.date1}}</div>
            </div>
        </div>

        <div class="row">
            <div class="col-md6 col-xs-12">
                <button class="btn btn-primary" style="margin-top: 5px; margin-bottom: 5px;" type="button" ng-click="datepickerCtrl.openModal()">Open date picker modal</button>
            </div>
        </div>
    </form>
</div>

<script type="text/ng-template" id="demo/datepicker/datepickermodal.html">
    <bb-modal>
        <div class="modal-form">
            <bb-modal-header >Date picker modal</bb-modal-header>
            <div bb-modal-body>
                <form name="dateModalCtrl.datepickerModal" novalidate>
                    <div class="row">
                        <div class="col-md-6 col-xs-12">
                            <label>Date field</label>
                                <bb-datepicker bb-datepicker-name="date2" ng-model="dateModalCtrl.date" ng-required="true" bb-date-format="'dd/MM/yyyy'" bb-datepicker-append-to-body="true"></bb-datepicker>
                                <label class="error" ng-show="dateModalCtrl.datepickerModal.date2.$error.dateFormat">{{dateModalCtrl.datepickerModal.date2.invalidFormatMessage}}</label>
                                <label class="error" ng-show="dateModalCtrl.datepickerModal.date2.$error.required && dateModalCtrl.datepickerModal.date2.$touched">Date is required</label>
                        </div>
                        <div class="col-md-6 col-xs-12">
                            <label>Date value</label>
                            <div>{{dateModalCtrl.date}}</div>
                        </div>
                    </div>
                </form>
            </div>
            <bb-modal-footer>
                <bb-modal-footer-button-primary ng-disabled="dateModalCtrl.datepickerModal.$invalid"></bb-modal-footer-button-primary>
                <bb-modal-footer-button>Sample button</bb-modal-footer-button>
                <bb-modal-footer-button-cancel></bb-modal-footer-button-cancel>
            </bb-modal-footer>
        </div>
    </bb-modal>
</script>

JavaScript

/*global angular */
(function () {
    'use strict';

    function DatepickerModalController() {
        var self = this;
        self.date = '';
    }

    function DatepickerDemoController(bbModal, $q) {
        var self = this;

        function formatValue(value) {
            return $q(function (resolve) {
                var formattedValue = value,
                    formattingErrorMessage;

                if (value.toUpperCase() !== value) {
                    formattingErrorMessage = "Any letters should be capitalized.";
                } else {
                    formattedValue = "[" + value.toUpperCase() + "]";
                }

                resolve({
                    formattedValue: formattedValue,
                    formattingErrorMessage: formattingErrorMessage
                });
            });
        }

        function openModal() {
            bbModal.open({
                controller: 'DatepickerModalController as dateModalCtrl',
                templateUrl: 'demo/datepicker/datepickermodal.html'
            });
        }


        self.openModal = openModal;

        self.setDate = function () {
            self.date1 = 'aaa';
        };
        self.customFormat = {
            formatValue: formatValue
        };

        self.date1 = '5/28/2015';
        self.date2 = '2015-05-17T00:00:00';
        self.placeholder = 'Your date here';
        self.minDate = new Date('5/21/2014');
        self.maxDate = new Date();
    }

    DatepickerDemoController.$inject = ['bbModal', '$q'];

    angular.module('stache')
    .controller('DatepickerModalController', DatepickerModalController)
    .controller('DatepickerDemoController', DatepickerDemoController);

}());