Automate datepicker is a simple datepicker for Automate web sites purposes.
npm install automate-datepickerplaintext
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
`
API
---
$3
Input Type Default Required Description [container] string nullno 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] booleanfalseno 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'
defaultno 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 Belowno 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
``
| 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 |
(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. |