Material Design Date Picker - npm adaptation

This module is a simple date picker for those who writes project with Angular Material and wants an alternative date picker to the standard one. It built with Angular Material and Moment.js. Design was inspired by Google Material Design specifications.

• Demo
• License
• Requirements
• Installation
• Usage
• API Documentation
• Contributing

Demo

Live demo.

License

This software is provided free of change and without restriction under the MIT License

Requirements

Angular Material >= 1.0.0

Moment.js

Installation

This package is installable through the Bower package manager.

npm install am-date-picker --save

Include the am.date-picker module as a dependency in your application.

angular.module('myApp', ['ngMaterial', 'am.date-picker']);

Usage

controller

require("am-date-picker");
require("am-date-picker/dist/am-date-picker.min.css");

angular
    .module('myApp', [
        'ngMaterial',
        'am.date-picker',
    ])
    .config(['amDatePickerConfigProvider', function(amDatePickerConfigProvider) {
        amDatePickerConfigProvider.setOptions({
            popupDateFormat: 'Do of MMMM',
            calendarIcon: '/static/images/icons/ic_today_24px.svg',
            clearIcon: '/static/images/icons/ic_close_24px.svg',
            nextIcon: '/static/images/icons/ic_chevron_right_18px.svg',
            prevIcon: '/static/images/icons/ic_chevron_left_18px.svg',
            inputPipe: (formatedSstring, date) =>{
                let daysFromNow = moment().diff(date, 'days');

                if(daysFromNow > -2 && daysFromNow < 2){
                    return moment().calendar(date);
                } else {
                    return formatedSstring;
                }
            }
        })
    }])
    .controller('MainCtrl', ['$scope', function ($scope) {
        $scope.minDate = new Date('2014-01-05');
        $scope.maxDate = new Date('2014-01-15');
        $scope.date = new Date('2014-01-10');
    }]);

Note that images for icons have to be set globally through the amDatePickerConfig.

markup

<am-date-picker ng-model="date"
                am-input-date-format="L"
                am-input-label="Pick a Date"
                am-max-date="maxDate"
                am-max-year="2015"
                am-min-date="minDate"
                am-min-year="2000"
                am-popup-date-format="D/M"
                am-today-button="Today"
                am-input-filer="functFilter"
                am-show-input-icon="true">
</am-date-picker>

API Documentation

Theming

This component uses configured theme with $mdThemingProvider or default one.

Validation

This component supports ngMessages. Supported attributes are:

• required: whether a required date is not set.
• minDate: whether the selected date is before the minimum allowed date.
• maxDate: whether the selected date is after the maximum allowed date.
• valid: whether the specified is not valid date.

API

All settings can be provided as attributes in the am-date-picker or globally configured through the amDatePickerConfig.

| Attribute | Type | Description | | :--------------------- | :------------ | :---------- | | ng-model | Date Object | Two-way data-binding date property. | | ng-change | expression | Expression evaluated when the model value changes. | | am-allow-clear | boolean | Whether the input could be clear (default: true). | | am-back-button-text | String | Set text for back button displayed in year selection(default: Back). | | am-cancel-button | String | Set text for cancel button. If not provided the button won't be shown. | | am-input-date-format | String | The format for displayed date in input (default: LL). | | am-input-label | String | The text to display as input label. | | am-locale | String | Set locale (default: en). | | am-max-date | Date Object | Defines the maximum selectable date. | | am-min-date | Date Object | Defines the minimum selectable date. | | am-max-year | Number | Defines the maximum year displayed in year selection (default: 2020). | | am-min-year | Number | Defines the minimum year displayed in year selection (default: 1920). | | am-popup-date-format | String | The format for displayed date in popup header (default: ddd, MMM D). | | am-show-input-icon | boolean | Whether to display the calendar icon (default: false). | | am-today-button | String | The text for today button. If not provided the button won't be shown. |

Specific settings that can be globally configured through the amDatePickerConfig only.

| Attribute | Type | Description | | :--------------------- | :------------ | :---------- | | calendarIcon | String | Path to the calendar icon. | | clearIcon | String | Path to the clear icon. | | nextIcon | String | Path to the chevron right icon. | | prevIcon | String | Path to the chevron left icon. | | inputPipe | Function | Can change defaul display view |

Date formats and locale should correspond MomentJS ones.

Contributing

If you have an improvement (especially in animation part), bug report or request please let me know or post a pull request.

See how to run app locally.

See how to run test.