❤
npm
Sign UpSign In

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

Readme

Keywords

Package Sidebar

Install

npm i angie-date-picker

Repository

github.com/achugaev93/angie-date-picker

Homepage

github.com/achugaev93/angie-date-picker#readme

Weekly Downloads

9

Version

0.0.18

License

MIT

Last publish

Collaborators

  • achugaev93
Try on RunKit
Report malware