Datetime range and Time range input UI element

This directive is designed to provide easy and intuitive input of moment-range.js datetime range objects.

Typically this can be used to represent a moment range with start and an end datetime objects.
Desgined to be as simple as possible to afford intuitive interactions, including scrolling.

Converted into an angular directive for your convenience :)

This work was based over the angular-date-time directive but forked to use an moment-range.js as ng-model

Demo

Click here for a live demo.

Installation

#####1) Install '@senzil/angular-datetime-range'

npm install @senzil/angular-datetime-range
yarn add @senzil/angular-datetime-range
    
https://cdn.rawgit.com/senzil/angular-datetime-range/v1.0.0/dist/datetime-range.min.js
https://cdn.rawgit.com/senzil/angular-datetime-range/v1.0.0/dist/datetime-range.min.css

#####2) Prerequisites

You must set up these dependencies

1. angular.js
2. moment.js
3. moment-range.js
4. moment-timezone.js

######NPM or YARN if you use npm or yarn, the dependencies will download with the directive.

######In Browser In the browser you must add the scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.js" charset="utf-8"></script>

#####3) Add 'senzil.datetime-range' module to your app config

angular.module('myApp', ['senzil.datetime-range'])

3. Use directives in a view

<datetime-range ng-model="myDatetimeRange"></datetime-range>

<time-range ng-model="myTimeRange"></time-range>

Attributes

|Property | Usage | Default | Required | |:------------- |:-------------|:-----:|:-----:| | ng-model | DateRange (moment-range.js) object to bind from controller | none | yes | | limits-range | DateRange (moment-range.js) object with bounds limits for the component| moment.range(null, null) - all time | no | | timezone | Timezone string name (only datetime-range)| moment.tz.guess() | no | | includeSeconds | Boolean - Show seconds in directive to set them | false | no | | showClose | Boolean - Show close button in directive | false | no | | on-change | Handler function that is fired on change of range object | none | no | | on-change-start | Handler function that is fired on change of range.start moment object | none | no | | on-change-end | Handler function that is fired on change of range.end moment object | none | no | | on-close | Handler function that is fired on close of edit popover | none | no |

Dependencies

• AngularJS
• moment.js
• moment-timezone.js
• moment-range.js