@nolanroose/ngx-simple-datepicker v1.3.0
NgxSimpleDatepicker
NgxSimpleDatePicker is a custom FormControl with validation, which uses vanillajs-datepicker for the selection by calendar part, and which uses angular2-text-mask for the free input part, witch text-mask-addons
Installation
- Firt of all, you need to install:
- vanillajs-datepicker
yarn add vanillajs-datepicker@^1.2.0
ornpm install --save vanillajs-datepicker@^1.2.0
yarn add -D @types/vanillajs-datepicker@^1.2.1
- angular2-text-mask
yarn add angular2-text-mask@^9.0.0
ornpm install --save angular2-text-mask@^9.0.0
- text-mask-addons
yarn add text-mask-addons@^3.8.0
ornpm install --save text-mask-addons@^3.8.0
- luxon
yarn add luxon@^3.2.1
ornpm install --save luxon@^3.2.1
yarn add -D @types/luxon@^3.2.1
Or in one time:
yarn add vanillajs-datepicker@^1.2.0 angular2-text-mask@^9.0.0 text-mask-addons@^3.8.0 luxon@^3.0.1
yarn add -D @types/vanillajs-datepicker@^1.2.1 @types/luxon@^3.0.0
- Then you need to install the package:
npm install --save @nolanroose/ngx-simple-datepicker
or
yarn add @nolanroose/ngx-simple-datepicker
Add to your main style file (style.scss
):
@import "~@nolanroose/ngx-simple-datepicker/assets/styles/default-theme";
Usage
in your component:
export class AppComponent implements OnInit {
public form!: FormGroup;
public ngOnInit(): void {
this.form = new FormGroup({
date: new FormControl('')
});
}
}
in your template:
<form [formGroup]="form">
<ngx-simple-datepicker
[form]="form"
[inputKey]="'date'"
[placeholder]="'test'"
[formGlobalError]="false"
[formControlName]="'date'"
[id]="'date'"
></ngx-simple-datepicker>
</form>
example with default theme:
Theming
Copy the variable file from
~@nolanroose/ngx-simple-datepicker/assets/styles/_variables.scss
Paste it into your custom variable themes (custom-datepicker-theme.scss
), change the variables.
Import the variable file before the import of default theme:
@import "custom-datepicker-theme.scss";
@import "~@nolanroose/ngx-simple-datepicker/assets/styles/default-theme";
Internationalization
For the moment, the datepicker is only internationalized for the French, English, Spanish languages.
Test locally
- clone this repository
yarn install
yarn run build:lib:dev
yarn run start
Roadmap
- Add internationalization
- Add tests
- Add more documentation
- Add configuration service
- Add contributions guidelines
- Add real ci cd pipeline
9 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago