how to add flowbite datepicker in angular application

[sunysunysuny]

I am following the steps as suggest in documentation

npm i @themesberg/tailwind-datepicker --save

As I am importing it into my component file it displaying below error

import Datepicker from '@themesberg/tailwind-datepicker/Datepicker';

Cannot find module '@themesberg/tailwind-datepicker/Datepicker' or its corresponding type declarations.

Let me know where I am making mistakes

Thanks

[stefanovolpatti]

Hi @sunysunysuny Have you try to import the Datepicker from th CDN? You can find the link here

But it looks like Flowbite doesn't support types 🤔

[yunushuyut]

I am following the steps as suggest in documentation

npm i @themesberg/tailwind-datepicker --save

As I am importing it into my component file it displaying below error

import Datepicker from '@themesberg/tailwind-datepicker/Datepicker';

Cannot find module '@themesberg/tailwind-datepicker/Datepicker' or its corresponding type declarations.

Let me know where I am making mistakes

Thanks

@sunysunysuny Could you solve this or find any workaround? If yes, give me the info, please.

[BariqDharmawan]

I've same problem. I'm using vanilla flowbite

[leomunizq]

nothing yet ?

[heloufir]

Using the datepicker from the Flowbite docs https://flowbite.com/docs/plugins/datepicker/#javascript I got the same issue, the import Datepicker from 'flowbite-datepicker/Datepicker'; was not working.

So what I did (I don't think it's the perfect way to do it, but it works):

Add this to the scripts section of angular.json file:

node_modules/flowbite-datepicker/dist/js/datepicker-full.min.js

Then to use it in my component I declared a var named Datepicker:

declare var Datepicker: any;

Then use it simply like in the docs.

EDIT

I faced another problem, when the input value changed (using the date picker, the user choose a date) the form control is not getting the change event, so the value is not updated on it. So I added an event listener (javascript way) and added some logic:

private initDatePickerElement(element: any): void {
    new Datepicker(element, this.datePickerConfig);
    element.addEventListener('changeDate', (e: any) => {
      const value = e.target.value;
      const formControlName = e.target.getAttribute('formControlNamePath');
      const formControl = this.form.get(formControlName);
      formControl?.setValue(value);
      formControl?.markAsDirty();
    });
  }

Explanation:

1. Flowbite Datepicker initialization
2. Add an event listener on changeDate event
3. Getting the formControl dynamically based on the formControlName attribute of the field that it's value changed
4. Setting the value on this formControl
5. Mark the formControl as touched (dirty), this is optional (I have to do it because I have some logic on my html)

[nieuwie]

Amazing, your solution works! Thank you so much!

[pachoGit]

@heloufir works fine for "Datepicker" but does NOT work for "DateRangePicker"

declare var Datepicker: any;
declare var DateRangePicker: any;

export class DateRangeSelectComponent implements AfterViewInit {
  @ViewChild('dateField') date!: ElementRef;

  ngAfterViewInit(): void {
    new Datepicker(this.date.nativeElement, {}); // Works fine
    new DateRangePicker(this.date.nativeElement, {}); // Not works!
}

[alator21]

@heloufir @pachoGit Would you be so kind and provide a minimal repro using stackblitz please? I can't make it work.

[cirinoe]

@pachoGit for DateRangePicker the nativeElement must be a container of two inputs otherwise it doesn't work

[kidskidspacana]

@heloufir works fine for "Datepicker" but does NOT work for "DateRangePicker"

declare var Datepicker: any;
declare var DateRangePicker: any;

export class DateRangeSelectComponent implements AfterViewInit {
  @ViewChild('dateField') date!: ElementRef;

  ngAfterViewInit(): void {
    new Datepicker(this.date.nativeElement, {}); // Works fine
    new DateRangePicker(this.date.nativeElement, {}); // Not works!
}

i did follow this but i got an error 'ReferenceError: Datepicker is not defined'

[heloufir]

@heloufir works fine for "Datepicker" but does NOT work for "DateRangePicker"

declare var Datepicker: any;
declare var DateRangePicker: any;

export class DateRangeSelectComponent implements AfterViewInit {
  @ViewChild('dateField') date!: ElementRef;

  ngAfterViewInit(): void {
    new Datepicker(this.date.nativeElement, {}); // Works fine
    new DateRangePicker(this.date.nativeElement, {}); // Not works!
}

i did follow this but i got an error 'ReferenceError: Datepicker is not defined'

Hi,

Just got the same issue on a new project, and resolved it following these steps:

• install Datepicker dependency: npm install flowbite-datepicker --save
• Add javascript file to you angular.json file:

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

• add the Datepicker reference into your component:

declare var Datepicker: any;

• then use the Datepicker object:

new Datepicker(element, {});

[JuankAnacona]

Using the datepicker from the Flowbite docs https://flowbite.com/docs/plugins/datepicker/#javascript I got the same issue, the import Datepicker from 'flowbite-datepicker/Datepicker'; was not working.

So what I did (I don't think it's the perfect way to do it, but it works):

Add this to the scripts section of angular.json file:

node_modules/flowbite-datepicker/dist/js/datepicker-full.min.js

Then to use it in my component I declared a var named `Datepicker`:

declare var Datepicker: any;

Then use it simply like in the docs.

### EDIT I faced another problem, when the input value changed (using the date picker, the user choose a date) the form control is not getting the change event, so the value is not updated on it. So I added an event listener (javascript way) and added some logic:

private initDatePickerElement(element: any): void {
    new Datepicker(element, this.datePickerConfig);
    element.addEventListener('changeDate', (e: any) => {
      const value = e.target.value;
      const formControlName = e.target.getAttribute('formControlNamePath');
      const formControl = this.form.get(formControlName);
      formControl?.setValue(value);
      formControl?.markAsDirty();
    });
  }

Explanation:

1. Flowbite Datepicker initialization
2. Add an event listener on changeDate event
3. Getting the formControl dynamically based on the formControlName attribute of the field that it's value changed
4. Setting the value on this formControl
5. Mark the formControl as touched (dirty), this is optional (I have to do it because I have some logic on my html)

Nice fix. Thanks !!