Permalink
..
Failed to load latest commit information.
README.md docs(datepicker) updated documentations Jun 20, 2017
calendar-body.html refactor(datepicker) improve performance and refactor whole datepicke… Jun 12, 2017
calendar-body.scss fix (#269) Disabled dates on Datepicker (Month mode) can still be sel… Aug 4, 2017
calendar-body.ts chore: added new implementation of datepicker components Jun 12, 2017
calendar.html chore(datepicker) update calendar year view with controls Jun 12, 2017
calendar.scss chore(datepicker) update design animation Jun 14, 2017
calendar.ts chore(datepicker) update calendar year view with controls Jun 12, 2017
clock.html chore(datepicker) integrateed clock component with datepicker and fix… Apr 28, 2017
clock.scss chore(datepicker) integrateed clock component with datepicker and fix… Apr 28, 2017
clock.ts chore: update core and fixed lint issues Jun 13, 2017
date-locale.ts fix(datepicker) intl support cross browser issue with time #250 Jun 27, 2017
date-util.ts chore: update core and fixed lint issues Jun 13, 2017
datepicker-animations.ts feat: angular 4 compatibility Mar 28, 2017
datepicker-content.html refactor(datepicker) improve performance and refactor whole datepicke… Jun 12, 2017
datepicker-content.scss refactor(datepicker) fixed design issues and moved datepicker from da… Jun 12, 2017
datepicker-toggle.scss chore: added new implementation of datepicker components Jun 12, 2017
datepicker-toggle.ts refactor(datepicker) refactored calendar, datepicker, month-view, yea… Jun 12, 2017
datepicker.html chore: update core and fixed lint issues Jun 13, 2017
datepicker.scss refactor(datepicker) fixed design issues and moved datepicker from da… Jun 12, 2017
datepicker.ts solved tslint issue Jul 26, 2017
index.ts chore: update library modules Jun 21, 2017
month-view.html chore(datepicker) implemented animations on monthchange Jun 12, 2017
month-view.ts chore: update core and fixed lint issues Jun 13, 2017
year-view.html chore(datepicker) update calendar year view with controls Jun 12, 2017
year-view.ts chore: update core and fixed lint issues Jun 13, 2017

README.md

Md2Datepicker

Datepicker allow the user to select date and time.

<md2-datepicker>

Properties

Name Type Description
type 'date' | 'time' | 'month' | 'datetime' The type of the datepicker
required boolean Whether or not the datepicker is required
disabled boolean Whether or not the datepicker is disabled
min date The min date of Datepicker.
max date The max date of Datepicker.
placeholder string Datepicker placeholder label
format string The date format of datepicker
tabindex number The tabIndex of the datepicker.
timeInterval number Select minutes in specific time interval, default is 1.
openOnFocus boolean Opend Calendar Whether or not the datepicker is openOnFocus.
isOpen boolean Opend Calendar Whether or not the datepicker is isOpen.
dateFilter `(Date null) => boolean`
mode 'auto' | 'portrait' | 'landscape' Mode of the Datepicker, default auto.
touchUi boolean Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets.
startAt Date The date to open the calendar to initially.
startView 'clock' | 'month' | 'year' The view that the calendar should start in. Default 'month'

Events

Name Type Description
change Event Fired when change date
onOpen Event Fired when open the Datepicker Panel
onClose Event Fired when close the Datepicker Panel

Examples

A datepicker would have the following markup.

<md2-datepicker [(ngModel)]="date"></md2-datepicker>

md2DatepickerToggle

Selector: button[md2DatepickerToggle]

Name Description
md2DatepickerToggle Datepicker instance that the button will toggle.

Examples

A datepicker toggle button would have the following markup.

<md2-datepicker #birthday></md2-datepicker>
<button [md2DatepickerToggle]="birthday"></button>

Datepicker Locale Service

This DateLocale service that allows the user to specify months, daysOfWeek, dates, hours, minutes and firstDayOfWeek internationalization. The DateLocale service itself is consumed by Md2Datepicker component that deal with dates.

import { DateLocale } from 'md2';

Name Type Description
months Months = { long: Array<string>, short: Array<string>, narrow: Array<string> } Month Object with property long, short and narrow along with Array of month names (in order).
daysOfWeek DaysOfWeek = { long: Array<string>, short: Array<string>, narrow: Array<string> } DaysOfWeek Object with property long, short and narrow along with Array of the days of the week (in order).
dates Array<string> Array of dates of the month. Only necessary for locales using a numeral system other than ['1', '2', '3', ..., '31'].
hours Array<string> Array of hours of the clock. Only necessary for locales using a numeral system other than ['0', '1', '2', ..., '23'].
minutes Array<string> Array of minutes of the clock. Only necessary for locales using a numeral system other than ['0', '1', '2', ..., '59'].
firstDayOfWeek number The first day of the week. Sunday = 0, Monday = 1, etc.

Date Format

COMPONENT SYMBOL NARROW SHORT FORM LONG FORM NUMERIC 2-DIGIT
year y - - - y(2017) yy(17)
month M - MMM (Feb) MMMM (February) M(2) MM(02)
day d - - - d(3) dd(03)
hour H - - - H(13) HH(13)
minute m - - - m(5) mm(05)
second s - - - s(5) ss(05)
am/pm a - - - - -
AM/PM A - - - - -

Keyboard interaction:

  • LEFT_ARROW: Focus a day backward
  • RIGHT_ARROW: Focus a day forward
  • UP_ARROW: Focus a week backward
  • DOWN_ARROW: Focus a week forward
  • HOME: Focus first day of the month
  • END: Focus last day of the month
  • PAGE_UP: Focus a month backward
  • PAGE_DOWN: Focus a month forward
  • ALT + PAGE_UP: Focus a year backward
  • ALT + PAGE_DOWN: Focus a year forward
  • ENTER: Select focused item