Angular Datetime Input UI Element


Angular Datetime UI Element

Angular Datetime UI Element. This directive is designed to provide easy and intuitive input of moment.js date-time objects.Designed to be as simple as possible in order to afford intuitive interactions.

Datetime input UI element

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

Desgined to be as simple as possible in order to afford intuitive interactions.

Converted into an angular directive for your convenience 🙂

Date input

Angular directive datetime input - date input

Time input

Angular directive datetime input - time input

Datetime input

Angular directive datetime input - datetime input

Install

  1. Install ‘angular-datetime-inputs’ with bower
bower install angular-datetime-inputs

or with npm

npm install angular-datetime-inputs
  1. Add ‘g1b.datetime-inputs’ module to your app config
angular.module('myApp', [
  'g1b.datetime-inputs',
  ......
])
  1. Use any of the directives in a view
<date-input date="date" on-change="print(date)" placeholder="Select date"></date-input>
<time-input time="time" on-change="print(time)" placeholder="Select time"></time-input>

For both date and time input:

<datetime-input datetime="datetime" on-change="print(datetime)" placeholder="Select datetime"></datetime-input>

Attributes

PropertyUsageDefaultRequired
datemoment.js datetime object or a datetime stringnoneno
timemoment.js datetime object or a datetime stringnoneno
datetimemoment.js datetime object or a datetime stringnoneno
formatmoment.js compatible date/time format used for parsing initial datetime objectsnoneno
date-formatmoment.js compatible date format used for display in date and datetime input directives‘DD MMMM YYYY’no
time-formatmoment.js compatible time format used for display in time and datetime input directives‘HH : mm : ss’no
min-datemoment.js datetime object min datetimenoneno
max-datemoment.js datetime object max datetimenoneno
hour-stepstep size for hour input1no
minute-stepstep size for minute input1no
second-stepstep size for second input1no
on-changeHandler function that is fired on change of datetime objectnoneno
on-closeHandler function that is fired on close of the edit popovernoneno
placeholderPlaceholder is shown when input object is undefinednoneno
allow-clearAllow users to clear selected datetime valuefalseno
clear-textClear text shown in the button used to clear date objectClearno
close-textClose text shown in the button used to close edit popoverCloseno
css-classcustom css class name for datetime presentationnoneno

Datetime range

If you are looking for a range input of datetime objects, check out angular-datetime-range

For More Angular Plugins Click


 

 

Leave a Reply

Your email address will not be published. Required fields are marked *