1.0.2 • Public • Published

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


Click here for a live demo.


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

npm install @senzil/angular-datetime-range
yarn add @senzil/angular-datetime-range

#####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'])
  1. Use directives in a view
<datetime-range ng-model="myDatetimeRange"></datetime-range>

Angular directive datetime range

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

Angular directive time range


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


Package Sidebar


npm i @senzil/angular-datetime-range

Weekly Downloads






Last publish


  • pablodgonzalez