1.0.10 • Published 6 years ago

extended-datetimepicker v1.0.10

Weekly downloads
63
License
MIT
Repository
github
Last release
6 years ago

Angular Material DateTimePicker

An Angular Material based, an Android style date-time picker. Some basic functionalities are:

  • Double click to select date or time
  • Swipe left to go to next month or Swipe right to go to previous month.
  • Disable the set of continous or non-continous date sets.
  • Jump to current day
  • Highlight Week days (Business Days)
  • Display week number (in header)
  • Weekdays as per browser language

Updates

DateAuthorDescription
2016-11-21AmittKExtended version of angular-material-datetimepicker
2017-04-14AmittKChanges to the display structure of date and month
2017-07-26AmittKJump to today date is introduced
2017-07-28AmittKHighlight only week-days (working business days)
2017-07-30AmittKDisplaying the week number in header, UI updated
2017-07-30AmittKUI updated with icons and tooltips

Dependencies

Depends on the following library:

  • Angular Material & it's dependencies
  • Angular Touch
  • MomentJS

Installing via Bower

bower install extended-datetimepicker

Installing via Npm

npm install extended-datetimepicker

Live Example

Click here to visualize live examples.

Usage

Add the plugin module as a dependency to your AngularJS module:

    angular.module('myAwesomeModule', [
      //other dependencies ignored
      'ngMaterialDatePicker'
    ]);

This plugin exposes a directive which should be used as an attribute for an input element. The directive is mdc-datetime-picker. An example of this is given below:

    <md-input-container flex-gt-md="30">
        <label>Timepicker Only</label>
        <input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
               placeholder="Time"
               min-date="minDate"
               format="hh:mm a"
               ng-model="time">
    </md-input-container>

Directive Attributes

The directive accepts several attributes which are described below:

NameTypeDescription
ng-model(String|Date|Moment)Initial Date or model to assign the date to
formatStringMomentJS Format,defaults to HH:mm for time picker only, YYYY-MM-DD for date picker only and YYYY-MM-DD HH:mm for both timepicker and date picker
short-timeBooleantrue => Display 12 hours AM|PM
min-date(String|Date|Moment)Minimum selectable date
max-date(String|Date|Moment)Maximum selectable date
dateBooleantrue => Has Datepicker (default: true)
timeBooleantrue => Has Timepicker (default: true)
cancel-textStringText for the cancel button (default: Cancel)
ok-textStringText for the OK button (default: OK)
disable-datesDate[]Dates to be disabled or not selectable by user.
week-daysBooleantrue => Highlight only working days (default: false).
1.0.10

6 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago