https://github.com/stumpam/ngx-date-input
Angular Date picker with masked input.
https://github.com/stumpam/ngx-date-input
angular calendar date datepicker input maskedinput
Last synced: 2 months ago
JSON representation
Angular Date picker with masked input.
- Host: GitHub
- URL: https://github.com/stumpam/ngx-date-input
- Owner: stumpam
- License: mit
- Created: 2020-02-09T13:20:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-06T09:44:13.000Z (over 2 years ago)
- Last Synced: 2023-12-06T10:54:36.022Z (over 2 years ago)
- Topics: angular, calendar, date, datepicker, input, maskedinput
- Language: TypeScript
- Homepage:
- Size: 1.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# NgxDateInput
Angular Date picker with masked input.
Demo: [https://stackblitz.com/edit/ngx-date-input](https://stackblitz.com/edit/ngx-date-input)
## Quick Start
1. Import NgxDateInputModule to your project.
```typescript
import { NgxDateInputModule } from '@stumpam/ngx-date-input';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxDateInputModule, ReactiveFormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
2. Use in HTML template
```typescript
```
or with custom image (svg)
```typescript
```
3. Set up in parent component
```typescript
options4: DateInputOptions = {
// valid date types D/DD, M/MM, YYYY and any dividers between - default: 'D. M. YYYY'
format: 'D. M. YYYY',
// minimal date in YYYY-MM-DD format - default: empty
min: '2020-03-10',
// maximum date in YYYY-MM-DD format - default: empty
max: '2020-04-10',
// bolean whether datepicker returns Date object or YYYY-MM-DD format - default: false
iso: boolean,
// Disables weekends fo pick fromcalendar
disableWeekends: boolean,
// Hides other month dates in calendar
hideOtherMonths: boolean,
// Path to image of calendar, when not set it will use ng-content
image: '*',
// Sets default view of calendare component. Month shows month dates, year show month per selected year, decade shows 9 followin years in grid
view: 'month' | 'year' | 'decade',
// Shows inactive arrow if previous or next month/year is not active
showInactiveArrows?: boolean;
// Hides topbar today button - default: true
hideTopbarToday?: boolean;
// Show bottom bar - default: true
showBottomBar?: boolean;
bottomBar?: {
// Shows today button in bottom bar - default: true
today?: boolean;
// Shows clear button in bottom bar - default: false
clear?: boolean;
// Shows close button in bottom bar - default: true
close?: boolean;
}
// Shows clear button in input - default: false
showInputClear?: boolean;
// Calendar which starts in `decade` will be end aligned to the options.max date
maxAtEnd?: boolean;
// Calendar which starts in `decade` will be start aligned to the options.min date
minAtStart?: boolean;
};
```
### Works with [formly](https://formly.dev)
If you want to add attributes directly to input element make custom Formly field and initialize it on `ngOnInit`
```typescript
ngOnInit() {
this.attributes = {
id: this.id,
...this.to.attributes,
};
}
```
and use it in the template
```HTML
```
> ⚠ Caution
>
> Attributes are bound just once on ngOnIput hook. Changes are matter of future improvements.