Angular 2 date picker - Angular2 reusable UI component
Simple Angular2 date picker. Online demo is here
- Fork and clone this repo
- npm install
- Open a terminal and type "npm start"
- Open "http://localhost:5000" to browser
To install this component to an external project, follow the procedure:
-
Make sure you're using Webpack. You can check needed dependencies from the package.json file of this module.
-
npm install mydatepicker
. -
Add MyDatePickerModule import to your @NgModule like example below
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyTestApp } from './my-test-app'; import { MyDatePickerModule } from 'mydatepicker/src/my-date-picker/my-date-picker.module'; @NgModule({ imports: [ BrowserModule, MyDatePickerModule ], declarations: [ MyTestApp ], bootstrap: [ MyTestApp ] }) export class MyTestAppModule {}
-
Use the following snippet inside your template:
<my-date-picker [options]="myDatePickerOptions" (dateChanged)="onDateChanged($event)"></my-date-picker>
-
Mandatory attributes:
- [options]="myDatePickerOptions"
- (dateChanged)="onDateChanged($event)"
-
Optional attributes:
- [selDate]="selectedDate" || [defaultMonth]="defaultMonth"
- [locale]="locale"
-
Example of the options data (not all properties listed):
myDatePickerOptions = {
todayBtnTxt: 'Today',
dateFormat: 'yyyy-mm-dd',
firstDayOfWeek: 'mo',
sunHighlight: true,
height: '34px',
width: '260px',
inline: false,
disableUntil: {year: 2016, month: 8, day: 10},
selectionTxtFontSize: '16px'
};
- Example of the date changed callback:
onDateChanged(event:any) {
console.log('onDateChanged(): ', event.date, ' - formatted: ', event.formatted, ' - epoc timestamp: ', event.epoc);
}
All input properties are optional.
Bind to an object containing replacements for any of the following defaults:
{su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat'}
{ 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' }
'yyyy-mm-dd'
'Today'
'mo'
true
{year: 2016, month: 6, day: 26}
{year: 2016, month: 7, day: 22}
false
false
'34px'
'100%'
'18px'
'false'
A two-letter ISO 639-1 language code can be provided as shorthand for several of the options listed above. Currently supported languages: en, fr, ja and fi. If the locale is used it overrides dayLabels, monthLabels, dateFormat, todayBtnTxt, firstDayOfWeek and sunHighlight properties from the options.
- new locale data can be added to this file.
Provide the initially chosen date that will display both in the text input field and provide the default for the popped-up datepicker.
If selDate
is not specified, when the datepicker is opened, it will
ordinarily default to selecting the current date. If you would prefer
a different year and month to be the default for a freshly chosen date
picking operation, specify a [defaultMonth]
in the same format as
that for the datepicker options (yyyy.mm
if not otherwise specified).
Online demo is here
- Firefox (latest)
- Chromium (latest)
- Edge
- IE11
- License: MIT
- Author: kekeh