themesberg / themesberg/flowbite

Date Ranger Picker Not working on Angular Fresh Install.

Open
#938 0 comments 0 reactions 0 assignees View on GitHub

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...

  1. Click on the start range date and select a date
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.