This is a date component that combines Angular Material component library Input, date component flatpickr.js, ReactiveForm formControl
npm install ng-material-flatpickr
"@angular/common": ">=7.0.0",
"@angular/core": ">=7.0.0",
"@angular/forms": ">=7.0.0",
"@angular/material": ">=7.0.0",
"flatpickr": ">=4.0.0",
"rxjs": ">=5.0.0",
"date-fns": ">=2.0.0"
`
* How To Use
* This Package is based on Angular Material , flatpickr.js and date-fns,you need to install them first.
* Then,npm install ng-material-flatpickr --save
* import NgMaterialFlatpickrModule to you Angular module like
* imports:[ngxFlatpickrModule]
$3
[label:string] The placeholder in the MatInput;
[readonly:boolean]
Whether the input element should be readonly status,default:false;
[required:boolean]
Whether the control is required or not,default:false;
[requiredMsg:string]
The message for required.
[showCalendar:boolean]
Whether the calendar suffix icon show or not,default:true;
[timeControl]
if this component in a ReactiveForm bound with formGroup or formControl.
[config]
The config of flatpickr extends flatpickr.js,flatpickr,default:
`
// DatePicker config example
config: Partial = {
enableTime: true, // enable timePikcer
time_24hr: true, // 24hr time
enableSeconds: true // show seconds in timePicker
};
// timePicker config example
config: Partial = {
enableTime: true,
noCalendar: true,
dateFormat: 'H:i',
defaultHour: 6,
time_24hr: true
};
`
#### example
`
xxxx.html
[timeControl]="strategy.get('beginDate')"
[config]="config"
[requiredMsg]="('strategy.startTime'|translate)+('form.required'|translate)"
[label]="'strategy.startTime'|translate">
[timeControl]="strategy.get('endDate')"
[config]="config"
[requiredMsg]="('strategy.endTime'|translate)+('form.required'|translate)"
[label]="'strategy.endTime'|translate"
>
xxxx.ts
strategy = new FormGroup({
startTime: new FormControl('', Validators.required),
endTime: new FormControl('', Validators.required)
});
or
.ts
startTime=new FormControl('');
.html
[timeControl]="startTime"
`
strategy is an formGroup,you can get single formControl by instance.get(key) of formGroup and input it to [timeControl],otherwise,you can input single formControl like new Instance of formControl directly to the [TimeControl];
$3
(sourceDate)
This is a eventEmitter,it will be triggered when the flatpickr change its value,return a date string that can be transform to a Date by new Date();
$3
picker
This is the instance of flatpickr,som methods and value can be found in the instance.In this component,you can get it by two ways.e.g Add a symbol like '#startTime' to the component(see above),and input it to a method when some method triggers
`
"(sourceDate)=getDate($event,startTime)"
`
or get the component's ref by the ViewChild Decorator like
`
@ViewChild('startTime',{static:false)
startTime:ElementRef;
`
You can get picker by startTime.picker and you can use the instance whatever you want;
$3
If you want to change the locale of flatpickr immediately when the language of the system has been changed(no refresh),
* 1.You can provide a value for DEFAULT_LANG while import NgMaterialFlatpickrModule.
like
`
import:[
NgMaterialFlatpickrModule.forRoot('zh-CN'),
...
]
`
* 2.There is a function setDateLocale(lang) in this component,you need use decorator @ViewChild() , and use this function.
`
// init locale of flatpickr or change the locale
// 改变日期配置
setDateLocale(lang?: 'zh-CN' | 'zh-TW' | '') {
switch (lang) {
case 'zh-CN': {
this.config.locale = Mandarin;
break;
}
case 'zh-TW': {
this.config.locale = MandarinTraditional;
break;
}
default: {
this.config.locale = english;
break;
}
}
if (this.picker) {
this.picker.destroy();
}
this.picker = flatpickr(this.input.nativeElement, this.config);
}
// Where they are used
@ViewChild('startTime', {static: false})
startTime: any;
@ViewChild('endTime', {static: false})
endTime: any;
ngOnInit() {
// translateService of ngx-translate/core
this.translate.onLangChange.subscribe((res) => {
this.startTime.setDateLocale(res.lang);
this.endTime.setDateLocale(res.lang);
}
...
}
// loadFrom storage
ngAfterViewInit(): void {
// system selected language cached in localStorage
if (localStorage.getItem('selectedLang')) {
const selectedLang = localStorage.getItem('selectedLang');
this.startTime.setDateLocale(selectedLang);
this.endTime.setDateLocale(selectedLang);
}
}
``