Flowbite Not Working in Angular Project

ctrl/m
0



Let me save you a few hours of searching with this workaround

npm install flowbite-datepicker --save

angular.json or project.json

 "scripts": [ "node_modules/flowbite-datepicker/dist/js/datepicker-full.min.js"  ],

Template
<div #dateField inline-datepicker datepicker-buttons datepicker-autoselect-today
(changeDate)="onDatePicked($event)" class="mx-auto sm:mx-0 bg-primary-100 "> </div>

Component
...
declare var Datepicker: any; //after import statements
...
  @ViewChild('dateField', { static: true }) dateField!: ElementRef;

  public selectedDate!: Date;

 ngOnInit(): void { this.initDatePicker();}

  initDatePicker(): void {
    let date = new Datepicker(this.dateField.nativeElement, {
      minDate: new Date(),
      todayHighlight: true,
      daysOfWeekDisabled: [0],
    });
    console.log('datepicker', date);
  }

  onDatePicked($event: any) {
    this.selectedDate = new Date($event.detail.date);
    console.log('onDatePicked', this.selectedDate);
  }
SHALOM!

Post a Comment

0Comments

Post a Comment (0)