Wondering what’s next for npm?Check out our public roadmap! »

    ng-material-flatpickr
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.23 • Public • Published

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

    Install

    npm i ng-material-flatpickr

    DownloadsWeekly Downloads

    61

    Version

    0.1.23

    License

    none

    Unpacked Size

    73.7 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar