angie-date-picker

    0.0.18 • Public • Published

    Advantages

    • Simple and flexible AngularJS directive that support selecting, formatting and parsing both date and time.
    • Date/time can be localized (thanks to MomentJS).
    • It supports limits (min and max date/time) and ranges.
    • It is pretty simple to use and accessible.
    • You can disable functionality (i.e. if you need only time picker - you are welcome).
    • You can customize increment steps of years, months, dates, hours, minutes.
    • And it support different date/time formatting for model value and for view value.

    Here is it

    Angular date picker

    Installation

    angie-date-picker depends on AngularJS and MomentJS libraries, so install them too. jQuery is not required.

    bower install --save angular moment

    Install using Bower (recommended):

    bower install --save angie-date-picker

    Install using NPM:

    npm install --save angie-date-picker

    Usage

    First of all add styles and scripts to a page:

    <link href="bower_components/angie-date-picker/angie-date-picker.min.css" rel="stylesheet">
     
    <script src="bower_components/moment/min/moment-with-locales.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angie-date-picker/angie-date-picker.min.js"></script>

    Step two: add module angie.datePicker into your Angular app dependencies:

    angular.module('example', [
        'angie.datePicker'          // Use date picker module
    ]);

    Step three: configure default settings according to your needs:

    angular.module('example', [
        'angie.datePicker'
    ]).run(['datePickerOptions', function (datePickerOptions) {
     
        // Configure date picker default settings
     
        datePickerOptions.spacing = 2;
        datePickerOptions.viewDateFormat = 'DD MMMM YYYY, HH:mm';
        datePickerOptions.modelDateFormat = 'YYYY-MM-DD HH:mm';
    }]);

    Step four: define date pickers settings and model values in your controller:

    angular.module('example').controller('MainCtrl', ['$scope', function ($scope) {
     
        $scope.birthday = '19-02-1993';
     
        $scope.datePickerOptions = {
            birthday: {
                time: false,
                viewDateFormat: 'DD MMMM YYYY',
                modelDateFormat: 'DD-MM-YYYY'
            },
            meeting: {
                min: moment().startOf('day')
            }
        };
     
        $scope.$watch('birthday', function (date) {
            // Will print date in model format
            console.log(date);
        });
    }]);

    Step five: use directive in your markup:

    <body ng-controller="MainCtrl">
     
    <form name="BirthdayForm">
        <label for="birthday-input">Birthday:</label>
        <div>
        <!-- Popup -->
        <input name="birthday"
               id="birthday-input"
               ng-model="birthday"
               date-picker="datePickerOptions.birthday">
        </div>
    </form>
     
    <form name="MeetingForm">
        <label>Next meeting at: {{ meeting }}</label>
        <!-- Inline date picker -->
        <date-picker ng-model="meeting" options="datePickerOptions.meeting"></date-picker>
    </form>
     
    </body>

    Contribute

    Please, send pull requests if you want to contribute and make date picker more featureful.

    License

    MIT

    Install

    npm i angie-date-picker

    DownloadsWeekly Downloads

    2

    Version

    0.0.18

    License

    MIT

    Last publish

    Collaborators

    • achugaev93