📅 Angular directive for datetime range input
Branch: master
Clone or download
Latest commit dfbc75a Mar 20, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
images Remove title headers from date and time range screenshot images Mar 20, 2018
src Abbreviate month names in the display area to the first three letters Mar 20, 2018
.gitignore Initial commit. Jun 5, 2016
LICENSE Add LICENSE Dec 1, 2017
README.md Update README.md Mar 20, 2018
bower.json Bump version number Mar 20, 2018
gulpfile.js Add time-range directive to the build flow in gulp Mar 20, 2018
index.html
index.js Require minified version of the directive in dist folder, fixed modul… Jan 4, 2017
package.json Bump version number Mar 20, 2018
yarn.lock Update yarn.lock file Dec 3, 2017

README.md

Datetime range input UI element

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

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

Converted into an angular directive for your convenience :)

Demo

Click here for a live demo.

Date range

Angular directive datetime range input - date range

Time range

Angular directive datetime range input - time range

Datetime range (collapsed state)

Angular directive datetime range input - datetime range (collapsed)

Datetime range (expanded state)

Angular directive datetime range input - datetime range (expanded)

Install

  1. Install 'angular-datetime-range' with bower
bower install angular-datetime-range

Or with npm:

npm install angular-datetime-range
  1. Add 'g1b.datetime-range' module to your app config
angular.module('myApp', [
  'g1b.datetime-range',
  ......
])
  1. Use 'datetime-range' directive in a view
<datetime-range start="start" end="end"></datetime-range>

Attributes

Property Usage Default Required
start Start moment.js datetime object or a datetime string none yes
end End moment.js datetime object or a datetime string none yes
presets Array of preset ranges, click here for more info none no
min-date moment.js datetime object min datetime none no
max-date moment.js datetime object max datetime none no
on-change Handler function that is fired on change of start and/or end datetime objects none no
on-change-start Handler function that is fired on change of start datetime object none no
on-change-end Handler function that is fired on change of end datetime object none no
on-close Handler function that is fired on close of the edit popover none no
close-text Close text shown in the button used to close edit popover Close no

Presets

You can provide any number of preset ranges for quick selection in edit view.

Consider the following example with ranges of current week, month and year.

$scope.presets = [
  {
    'name': 'This Week',
    'start': moment().startOf('week').startOf('day'),
    'end': moment().endOf('week').endOf('day'),
  }, {
    'name': 'This Month',
    'start': moment().startOf('month').startOf('day'),
    'end': moment().endOf('month').endOf('day'),
  }, {
    'name': 'This Year',
    'start': moment().startOf('year').startOf('day'),
    'end': moment().endOf('year').endOf('day'),
  }
];

Other input directives

If you are looking for other datetime input elements, check out angular-datetime-inputs

Dependencies