automate-datepicker

Automate DatePicker

Automate datepicker is a simple datepicker for Automate web sites purposes. 

Features

* [x] Custom formatting
* [x] Min/Max date restriction
* [x] Ability to disable specific days of week
* [x] Ability to disable specific dates
* [x] Ability to hightlight specific dates
* [x] Ability to change initial view (days, month, year)
* [x] Custom template
* [x] Accessibility
* [x] Themes

Warning

Library is under active development and may have API breaking changes for subsequent major versions after 1.0.0.

Getting started

$3

#### NPM

``plaintext
npm install --save @automate-datepicker
`

$3

`typescript
import { AutomateDatePickerModule } from 'automate-datepicker';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [AppComponent],
imports: [AutomateDatePickerModule, FormsModule],
bootstrap: [AppComponent]
})
export class AppModule {}
`

$3

Define options in your consuming component:

`typescript
@Component({...})
export class ExampleComponent {
selectedDate: Date;
}
`

In template use automate-datepicker component with your options

`html




{{formattedDate}}







`

API

---

$3

Input	Type	Default	Required	Description
[container]	string	null	no	Append dropdown to body or any other element using css selector. For correct positioning body should have position:relative
[placeholder]	string	-	no	The date-picker input placeholder
[disabled]	boolean	false	no	If set to true the input would be disabled
[placement]	'left' | 'right'	left	no	Set the dropdown position on open
[theme]	'default' | 'dark' |  'default christmas' |  'dark christmas'	default	no	Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body)
[config]	DatePickerConfig	See Below	no	Configuration object - see description below

$3

Output	Description
(onShown)	Fired on datepicker open
(onClose)	Fired on datepicker close

$3

Name	Description
show	Opens the datepicker panel
hide	Closes the datepicker panel
toggle	Change from open state to close or close state to open

$3

`typescript

``

Here are the available configurations:

Name	Type	Default	Applies To	Description
format	string	'MM/dd/yyyy'	All	Will be used as the input format style.
minDate	Date	undefined	All	Disables all dates (on the date-picker) that are set to before the minDate.
maxDate	Date	undefined	All	Disables all dates (on the date-picker) that are set to after the maxDate.
disabledDaysOfWeek	number[]	undefined	day	Disables provided days of week.
disabledDates	Date[]	undefined	day	Disables provided dates.
hightLightedDates	{ date:Date, style:Partial<CSSStyleDeclaration> }[]	undefined	day	Hightlight provided dates by specific style.
daysOfWeek	string[]		day	Days of week names.
startView	EAutomateDatepickerCalendarMode  (Days = 1, Months = 2, Years = 3)	Days	All	The mode of the calender which will be displayed first.
closeAfterSelect	boolean	true	All	Indicate, should datepicker be closed after selection.
showTodayDay	boolean	true	day	Indicate, should datepicker days calendar hightlight today date.
monthTitle	string	'MMMM'	day	Month format at the datepicker header.
yearTitle	string	'yyyy'	month, year	Year format at the datepicker header.
dayLabel	string	'd'	day	Day format at the datepicker calendar.
monthLabel	string	'MMMM'	month	Month format at the datepicker calendar.
yearLabel	string	'yyyy'	year	Year format at the datepicker calendar.