MdDatetimepicker

The Material2 picker extended to include a timepicker and more.

Demo

http://components.mikemcanulty.com

Screenshots

Requirements

• hammerjs
• angular/material
• angular/forms
• angular/platform-browser
• angular/animations
• rxjs/Subscription

Installation

Download

• Download the entire src folder. Rename it to 'datetimepicker' and place it in your root 'app' folder.

Or

• Install with npm

npm i md-datetimepicker --save

Add dependency

import { MdDatetimepickerModule } from 'md-datetimepicker';

The following modules are required:

import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';

 imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    MdDatetimepickerModule
   ]

Usage

<md-input-container>
    <input mdInput [MdDatetimepicker]="picker" [date]="now" placeholder="Choose a date">
		    <button mdSuffix [mdDatetimepickerToggle]="picker" [hideTime]="false"></button>
</md-input-container>
<md-datetimepicker #picker [hideTime]="false"></md-datetimepicker>

Input Attributes

The three following attributes on the HTMLInputElement are optional; you can omit entirely.

• [date] --The input [value] and picker date when opened.

• [min] --date

• [max] --date

Datetimepicker Attributes

• [hideTime] --datepicker only

Datetimepicker Toggle Button Attribute

• [hideTime] -- Changes icon from datetime to a date only icon

• [color] -- {string} icon fill color

Demo

Here is a demo

Contact

michael.mcanulty88@gmail.com
Portland, Oregon

If you find an error or would like something added on and don't have time to do so, please let me know and I will try and help.

Michael