g1eb / Angular Datetime Range
Licence: mit
π
Angular directive for datetime range input
Stars: β 27
Projects that are alternatives of or similar to Angular Datetime Range
angular-datetime-inputs
π
Angular directives for datetime inputs
Stars: β 20 (-25.93%)
Mutual labels: datetime, input, element, angular-directives
Flatpickr
lightweight, powerful javascript datetimepicker with no dependencies
Stars: β 14,575 (+53881.48%)
Mutual labels: datetime, daterange
react-native-date-ranges
idea from react-native-dates >
Stars: β 68 (+151.85%)
Mutual labels: range, daterange
jquery-datepicker
A full-featured datepicker jquery plugin
Stars: β 35 (+29.63%)
Mutual labels: datetime, range
Rangetouch
A super tiny library to make `<input type='range'>` sliders work better on touch devices
Stars: β 224 (+729.63%)
Mutual labels: input, range
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: β 1,289 (+4674.07%)
Mutual labels: datetime, daterange
Chocobo-Date-Range-Picker
ποΈ Component - The Date Range Picker easier to use in AngularJS.
Stars: β 23 (-14.81%)
Mutual labels: range, daterange
react-native-daterange-picker
A React Native component for picking date ranges or single dates.
Stars: β 86 (+218.52%)
Mutual labels: range, daterange
jquery-rsSliderLens
UI slider control that magnifies the current value
Stars: β 20 (-25.93%)
Mutual labels: input, range
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: β 272 (+907.41%)
Mutual labels: input, range
Lightpick
(deprecated) Check out the new date picker Litepicker
Stars: β 204 (+655.56%)
Mutual labels: range, daterange
Vuetify Daterange Picker
The missing date range picker for Vuetify JS you have been looking for.
Stars: β 192 (+611.11%)
Mutual labels: range, daterange
Exceptionless.datetimeextensions
DateTimeRange, Business Day and various DateTime, DateTimeOffset, TimeSpan extension methods
Stars: β 142 (+425.93%)
Mutual labels: datetime, range
react-simple-range
π React slider component for inputting a numeric value within a range.
Stars: β 20 (-25.93%)
Mutual labels: input, range
Ion2 Calendar
π
A date picker components for ionic2 οΌionic3 / ionic4
Stars: β 537 (+1888.89%)
Mutual labels: range, daterange
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: β 707 (+2518.52%)
Mutual labels: input, range
Rskgrowingtextview
A light-weight UITextView subclass that automatically grows and shrinks.
Stars: β 820 (+2937.04%)
Mutual labels: input
Inputbaraccessoryview
A simple and easily customizable InputAccessoryView for making powerful input bars with autocomplete and attachments
Stars: β 807 (+2888.89%)
Mutual labels: input
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
Time range
Datetime range (collapsed state)
Datetime range (expanded state)
Install
- Install 'angular-datetime-range' with bower
bower install angular-datetime-range
Or with npm:
npm install angular-datetime-range
- Add 'g1b.datetime-range' module to your app config
angular.module('myApp', [
'g1b.datetime-range',
......
])
- 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].