ng-material-flatpickr

This is a date component that combines Angular Material component library Input, date component flatpickr.js, ReactiveForm formControl.

####Images Demo

webDemo on github

####webDemo on gitee

us/pw: widzz/widzz12345

ng-material-flatpickr is in menu New marketing strategy

####dependencies Earlier versions may be support

I build it with v10, and test it with v7,it works well.

    "@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]

Input:

[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<BaseOptions> = {
    enableTime: true, // enable timePikcer
    time_24hr: true, // 24hr time
    enableSeconds: true // show seconds in timePicker
   };
 // timePicker config example
 config: Partial<BaseOptions> = {
        enableTime: true,
        noCalendar: true,
        dateFormat: 'H:i',
        defaultHour: 6,
        time_24hr: true
    };   

example

xxxx.html

 <lib-ng-material-flatpickr
                        #startTime (sourceDate)="onStartSourceDate($event,endTime)"
                        [timeControl]="strategy.get('beginDate')"
                        [config]="config"
                        [requiredMsg]="('strategy.startTime'|translate)+('form.required'|translate)"
                        [label]="'strategy.startTime'|translate">
                    </lib-ng-material-flatpickr>
                    <lib-ng-material-flatpickr
                        #endTime (sourceDate)="onEndSourceDate($event,startTime)"
                        [timeControl]="strategy.get('endDate')"
                        [config]="config"
                        [requiredMsg]="('strategy.endTime'|translate)+('form.required'|translate)"
                        [label]="'strategy.endTime'|translate"
                    ></lib-ng-material-flatpickr>
 
 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];

output

(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();

instance

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;

localize

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);
           }
    }