An Angular Material based, an Android style date-time picker, with ability to disable set of continuous or non-continuous date sets.
Branch: master
Clone or download
amittkSharma Update README.md
Adding downloads and version shield
Latest commit 2b52164 Feb 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Update material-datetimepicker.css Sep 18, 2017
font
js
.gitignore
LICENSE Initial commit Nov 20, 2016
LICENSE.md Initial Commit for extension Nov 20, 2016
README.md Update README.md Feb 26, 2018
beautifier.js
bower.json fix the bower.json Aug 31, 2017
index.html
package.json
remtopx.php Initial Commit for extension Nov 20, 2016

README.md

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

Date Author Description
2016-11-21 AmittK Extended version of angular-material-datetimepicker
2017-04-14 AmittK Changes to the display structure of date and month
2017-07-26 AmittK Jump to today date is introduced
2017-07-28 AmittK Highlight only week-days (working business days)
2017-07-30 AmittK Displaying the week number in header, UI updated
2017-07-30 AmittK UI 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] (http://rawgit.com/amittkSharma/extended-datetimepicker/master/index.html) 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:

Name Type Description
ng-model (String|Date|Moment) Initial Date or model to assign the date to
format String MomentJS 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-time Boolean true => Display 12 hours AM|PM
min-date (String|Date|Moment) Minimum selectable date
max-date (String|Date|Moment) Maximum selectable date
date Boolean true => Has Datepicker (default: true)
time Boolean true => Has Timepicker (default: true)
cancel-text String Text for the cancel button (default: Cancel)
ok-text String Text for the OK button (default: OK)
disable-dates Date[] Dates to be disabled or not selectable by user.
week-days Boolean true => Highlight only working days (default: false).