themesberg / themesberg/flowbite
Date Ranger Picker Not working on Angular Fresh Install.
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
Date Range Picker doesn't have correct interactivity when used within an new Angular application.
To Reproduce
Steps to reproduce the behavior:
Using this Stackblitz as a vanilla Angular 18 environment, with Flowbite installed...
- Click on the start range date and select a date
- Click a second time and you should get the date set into the end input and a nice highlighted range for the dates.
https://stackblitz.com/edit/stackblitz-starters-g3qzed?file=src%2Fmain.ts
Expected behavior
It should work as per the component example on the Flowbite site: https://flowbite.com/docs/components/datepicker/#date-range-picker
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: macOS 14.3.1
- Browser: Firefox or Chrome
- Version Chrome: 126.0.6478.183 and Firefox: 128.0.3
Additional context
Although my example is in Stackblitz, if I follow the guide as per https://flowbite.com/docs/getting-started/angular/ locally it has the same broken behavior. However, if I clone the the Angular Starter Project you've provided and upgrade it to 18, it appears to work. I cannot for the life of me work out why there is a difference with a fresh install and the starter project you have provided.
I even attempted to see if it was something to do with Angular standalone components vs using modules but that didn't make a difference... stumped.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz at src/main.ts and reproduce the date range picker behavior in a fresh Angular 18 installation. Compare it with the Angular Starter Project upgraded to 18 and the Angular getting-started guide; done means selecting two dates fills the end input and highlights the range as shown in the datepicker example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, tailwindcss
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100