feat: day picker by AbhishekA1509 · Pull Request #970 · devtron-labs/devtron-fe-common-lib

AbhishekA1509 · 2025-11-27T06:29:43Z

Description

This pull request completely refactors the date picker component to replace the react-dates library with react-day-picker. The new implementation introduces support for both single date and range selection, improves accessibility and customizability, and updates the styling to match the new library. Several legacy files and dependencies are removed, and the API for the date picker is updated for clarity and flexibility.

Migration from react-dates to react-day-picker:

Replaced react-dates with react-day-picker in DateTimePicker.tsx, updating all related logic to support both single date and range selection, and removed the old focus trap and moment.js usage. ([[1]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-dc6bf3a6084005ddabd8b1bf06bec25bfabf5a30ef376cb4835c2c226a755bd6L17-R48), [[2]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-dc6bf3a6084005ddabd8b1bf06bec25bfabf5a30ef376cb4835c2c226a755bd6L52-R189), [[3]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-dc6bf3a6084005ddabd8b1bf06bec25bfabf5a30ef376cb4835c2c226a755bd6L93-R211), [4] [5]
Removed legacy files and code, including SingleDatePickerComponent.tsx and old styles in datePicker.scss. ([[1]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-eca9ccbc1a9c798ae4001b6ef206bc9297843582257199060d25e02c10fd30ebL1-L80), [[2]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-db59d30cff39b6924b419a9f6fd6b4e01a673a3861bb99984a209e50903a2541L1-L103), [[3]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-b22dd3646a7f1a8bd9b1a23ab285cf4c91ebd70e348e125a1613bdf80a46459dL20))

Styling and Customization:

Added new SCSS styles in DateTimePicker.scss to match the look and feel of react-day-picker and support range selection. ([src/Shared/Components/DatePicker/DateTimePicker.scssR1-R71](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-307fd37871b0ead4448a16ec2cccd71f7a68b3c7848c8c954fe38b9d5bf2986aR1-R71))
Introduced custom navigation buttons for the calendar using shared UI components in constants.tsx. ([[1]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-4ccc31505f53c29409f6361ae5d0f498fe4e1824e719c6f487a31ce76590e477L17-R24), [[2]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-4ccc31505f53c29409f6361ae5d0f498fe4e1824e719c6f487a31ce76590e477R124-R154))

API and Type Updates:

Updated the API and types for DateTimePickerProps to support both single date and range selection, removed references to react-dates types, and improved clarity of props. ([[1]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-9031429d6cd8ea472101914a172cd7c014b93160d9632bf4a65ad46b0092a305L17), [[2]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-9031429d6cd8ea472101914a172cd7c014b93160d9632bf4a65ad46b0092a305L106-R116), [[3]](https://github.com/devtron-labs/devtron-fe-common-lib/pull/970/files#diff-9031429d6cd8ea472101914a172cd7c014b93160d9632bf4a65ad46b0092a305L125-L128))

These changes modernize the date picker component, reduce dependency bloat, and make it easier to maintain and extend.

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Test A
Test B

Checklist

The title of the PR states what changed and the related issues number (used for the release note).
Does this PR require documentation updates?
I've updated documentation as required by this PR.
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas

- Updated package.json to remove react-dates and add react-day-picker. - Created DateTimePicker component using react-day-picker, supporting both single and range date selection. - Removed SingleDatePickerComponent as it is no longer needed. - Added new styles for the DateTimePicker component. - Updated constants and types to accommodate changes in date handling. - Removed old date picker styles and configurations related to react-dates. - Adjusted Vite configuration to exclude react-dates from manual chunks.

…styling

Copilot

Pull request overview

This PR migrates the date picker component from the deprecated react-dates library to the modern react-day-picker library. The refactor adds support for both single date and date range selection, improves accessibility, and reduces dependency bloat.

Key Changes:

Replaced react-dates with react-day-picker v9.11.2 and removed deprecated dependencies
Introduced discriminated union types to support both single date and range picker modes
Added custom navigation components using the existing Button and Icon components for consistent styling

Reviewed changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
package.json	Replaced `react-dates` dependency with `react-day-picker` and removed related type definitions
package-lock.json	Updated lockfile with new dependencies including `date-fns`, `date-fns-jalali`, and `@date-fns/tz`
vite.config.ts	Removed `react-dates` manual chunk configuration
src/Shared/Components/DatePicker/types.ts	Refactored types to use discriminated unions for single/range picker modes and defined new handler types
src/Shared/Components/DatePicker/utils.tsx	Added generic type parameter to `DEFAULT_TIME_OPTIONS` and removed outdated eslint comment
src/Shared/Components/DatePicker/constants.tsx	Replaced legacy date styles with custom navigation button components using react-day-picker's CustomComponents API
src/Shared/Components/DatePicker/DateTimePicker.tsx	Complete rewrite using react-day-picker with Popover component, supporting both single and range selection modes
src/Shared/Components/DatePicker/DateTimePicker.scss	New styles customizing react-day-picker appearance with CSS custom properties
src/Shared/Components/DatePicker/datePicker.scss	Removed legacy styles for react-dates
src/Shared/Components/DatePicker/SingleDatePickerComponent.tsx	Removed deprecated component
src/Shared/Components/DatePicker/index.ts	Removed export of deprecated SingleDatePickerComponent

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

Copilot · 2025-12-01T09:01:24Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+
+    const renderInputLabel = () => {
+        if (isRangePicker) {
+            const fromDate = dateRange.from ? dayjs(dateRange.from).format(DATE_TIME_FORMATS.DD_MMM_YYYY) : ''


[nitpick] When dateRange.from is falsy in range picker mode, the fromDate will be an empty string, resulting in a label like - .... This could be visually awkward. Consider displaying a more user-friendly placeholder text like "Select start date - ..." when from is not set.

Suggested change

const fromDate = dateRange.from ? dayjs(dateRange.from).format(DATE_TIME_FORMATS.DD_MMM_YYYY) : ''

const fromDate = dateRange.from ? dayjs(dateRange.from).format(DATE_TIME_FORMATS.DD_MMM_YYYY) : 'Select start date'

Copilot · 2025-12-01T09:01:24Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+
+    const triggerElement = (
+        <SelectPicker
+            inputId="date-picker-input"


The label element uses htmlFor={id} but the actual input element inside SelectPicker uses inputId="date-picker-input" (a hardcoded value). This means the label won't properly associate with the input when clicked. Either use the id prop for the inputId or ensure they match for proper accessibility.

Copilot · 2025-12-01T09:01:25Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+    const handleSingleDateSelect: OnSelectHandler<Date> = (date) => {
+        if (!isDateUpdateRange(isRangePicker, onChange)) {
+            const updatedDate = date ? updateDate(dateObject, date) : null
+            onChange(updatedDate)
+        }
+    }


The handleSingleDateSelect function might pass null to onChange when no date is selected, but the UpdateSingleDateType type signature expects a non-nullable Date parameter. This could cause a type error. Consider updating the type to UpdateSingleDateType = (date: Date | null) => void or ensure that null dates are properly handled.

Copilot · 2025-12-01T09:01:25Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+        const today = getTodayDate()
+        today.setHours(0, 0, 0, 0)


The getTodayDate() function is called and then mutated with setHours(0, 0, 0, 0). This mutates a fresh Date object on every call to getDisabledState(). Consider creating the normalized today date once using useMemo to avoid unnecessary object mutations on every render when getDisabledState is called.

Copilot · 2025-12-01T09:01:25Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+    dateRange = {
+        from: getTodayDate(),
+        to: getTodayDate(),
+    },


[nitpick] The default value for dateRange is set to { from: getTodayDate(), to: getTodayDate() }, which means both start and end dates default to today. This could be confusing for range pickers where typically the end date might be undefined initially. Consider using { from: getTodayDate(), to: undefined } or making the default value conditional based on whether it's a range picker.

Copilot · 2025-12-01T09:01:26Z

src/Shared/Components/DatePicker/types.ts

+}
+
+export type UpdateDateRangeType = (dateRange: DateRangeType) => void
+export type UpdateSingleDateType = (date: Date) => void


The UpdateSingleDateType type is defined as (date: Date) => void, but in the handleSingleDateSelect function on line 130, onChange may be called with null when updatedDate is null. Update the type to (date: Date | null) => void to accurately reflect the function signature.

Suggested change

export type UpdateSingleDateType = (date: Date) => void

export type UpdateSingleDateType = (date: Date | null) => void

Copilot · 2025-12-01T09:01:26Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+                value: '',
+                startIcon: <Icon name="ic-calendar" color={null} />,
+            }}
+            size={ComponentSizeType.large}


The disabled prop is not passed to the date picker trigger element (SelectPicker). When the DateTimePicker is disabled, only the time picker reflects this state (line 257), but the date picker input appears enabled. Consider passing isDisabled={disabled} to the trigger SelectPicker to ensure consistent disabled state across both inputs.

Suggested change

size={ComponentSizeType.large}

size={ComponentSizeType.large}

isDisabled={disabled}

Copilot · 2025-12-01T09:01:26Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+    const handleDateRangeChange = (range: DateRange) => {
+        if (isDateUpdateRange(isRangePicker, onChange)) {
+            const fromDate = range.from ? range.from : new Date()
+            const toDate = range.to ? range.to : undefined

-    const handleFocusChange = ({ focused }) => {
-        setFocused(focused)
+            onChange({
+                from: fromDate,
+                to: toDate,
+            })


When range.from is falsy in range selection mode, the code defaults to new Date(). This means that if a user clears the start date, it will automatically default to today instead of allowing an empty/undefined state. Consider whether this is the intended behavior or if it should allow undefined for from.

Copilot · 2025-12-01T09:01:27Z

src/Shared/Components/DatePicker/types.ts

-     */
-    datePickerProps?: any
+interface DateRangeType {
+    from: Date


[nitpick] The DateRangeType interface requires from to always be defined (from: Date), but in the handleDateRangeChange function, when range.from is undefined, it defaults to new Date(). Consider whether from should be optional (from?: Date) to better represent the actual state during range selection, or document that from must always be present.

Suggested change

from: Date

from?: Date

Copilot · 2025-12-01T09:01:27Z

src/Shared/Components/DatePicker/DateTimePicker.tsx

+                                    type="button"
+                                    key={optionLabel}
+                                    className="bg__hover cn-9 dc__tab-focus dc__align-left dc__transparent p-8 br-4"
+                                    onClick={onClick || getRangeUpdateHandler(value)}


The shortcut buttons in the range picker lack accessible labels. Each button should have an aria-label attribute to describe its purpose for screen reader users, especially since the buttons only contain text that might not be self-descriptive in all contexts.

Suggested change

onClick={onClick || getRangeUpdateHandler(value)}

onClick={onClick || getRangeUpdateHandler(value)}

aria-label={`Select range: ${optionLabel}`}

…common-lib into feat/day-picker

…n and package-lock.json

…t for layout consistency

…ck.json; add instanceData to DevtronLicenseDTO type

- Imported ImgInstallFreemiumSaas and ImgInstallViaAwsMarketplace SVGs. - Updated illustrationMap to include new illustrations for 'img-install-freemium-saas' and 'img-install-via-aws-marketplace'.

….json; add img-page-not-found.svg illustration and update DevtronLicenseCard to handle SaaS instance

….json; add isSaasInstance to DevtronLicenseCardProps and update utils to derive its value from instanceData

….json; add LICENSE_KEY_QUERY_PARAM constant

…k.json

…k.json; add activateLicense export in License component

…k.json; update instanceData handling in License component

…mon-lib into feat/saas

….json

…lustration - Updated package.json and package-lock.json to version 1.21.1-beta-1 - Added new SVG illustration for celebration to the assets - Updated Illustration.tsx to include the new celebration illustration in the illustration map

…-img chore: update version to 1.22.3 and add new illustration for installing Devtron

…common-lib into feat/day-picker

…tation

…s management

fix: date picker focus

… add escape key handling for focus trap

feat: navigation upgraded

…styling

…nd improved state management

…mon-lib into refactor/app-details

refactor: remove unused PodMetadatum interface and update aggregateNo…

…t management

….json

fix: add constants required for project navigation movement to global config

feat: grafana org id flag

feat: markdown editor

…mon-lib into feat/day-picker

…k.json

AbhishekA1509 self-assigned this Nov 27, 2025

AbhishekA1509 requested review from vikramdevtron and vivek-devtron as code owners November 27, 2025 06:29

AbhishekA1509 added 3 commits November 27, 2025 12:00

refactor: remove @types/react-dates from dependencies

e860234

feat: enhance DateTimePicker with range selection and disabled state …

d21b708

…styling

chore: bump version to 1.20.6-pre-53 and update DateTimePicker logic

f27592a

AbhishekA1509 requested a review from Copilot December 1, 2025 08:56

Copilot started reviewing on behalf of AbhishekA1509 December 1, 2025 08:57 View session

Copilot finished reviewing on behalf of AbhishekA1509 December 1, 2025 08:59

Copilot AI reviewed Dec 1, 2025

View reviewed changes

vivek-devtron previously approved these changes Dec 8, 2025

View reviewed changes

Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-…

775e5db

…common-lib into feat/day-picker

AbhishekA1509 dismissed vivek-devtron’s stale review via 775e5db December 8, 2025 05:59

fix: update version from 1.21.0-pre-0 to 1.21.0-beta-2 in package.jso…

fe74b50

…n and package-lock.json

AbhishekA1509 changed the base branch from kubecon-2025 to develop December 8, 2025 06:38

AbhishekA1509 added 14 commits December 8, 2025 16:18

fix: update class name from 'flex' to 'flexbox' in InfoBlock componen…

9c0ad7d

…t for layout consistency

bump version to 1.21.0-beta-3 in package.json

888cfb7

fix: package lock

16c0e05

chore: update version to 1.21.0-beta-5 in package.json and package-lo…

72053d5

…ck.json; add instanceData to DevtronLicenseDTO type

Add new SVG illustrations for installation options

98fb162

- Imported ImgInstallFreemiumSaas and ImgInstallViaAwsMarketplace SVGs. - Updated illustrationMap to include new illustrations for 'img-install-freemium-saas' and 'img-install-via-aws-marketplace'.

chore: bump version to 1.21.0-beta-7 in package.json and package-lock…

fab5e6f

….json; add img-page-not-found.svg illustration and update DevtronLicenseCard to handle SaaS instance

chore: bump version to 1.21.0-beta-8 in package.json and package-lock…

adb0815

….json; add isSaasInstance to DevtronLicenseCardProps and update utils to derive its value from instanceData

chore: bump version to 1.21.0-beta-9 in package.json and package-lock…

28790f7

….json; add LICENSE_KEY_QUERY_PARAM constant

chore: bump version to 1.21.0-beta-11 in package.json and package-loc…

0cec9ee

…k.json

chore: bump version to 1.21.0-beta-12 in package.json and package-loc…

a7ea5f8

…k.json; add activateLicense export in License component

chore: bump version to 1.21.0-beta-13 in package.json and package-loc…

f5514b6

…k.json; update instanceData handling in License component

Merge branch 'main' of https://github.com/devtron-labs/devtron-fe-com…

09aee76

…mon-lib into feat/saas

chore: bump version to 1.21.1-beta-0 in package.json and package-lock…

55f04e4

….json

AbhishekA1509 and others added 30 commits December 29, 2025 14:44

Merge pull request #994 from devtron-labs/feat/add-installing-devtron…

d0712be

…-img chore: update version to 1.22.3 and add new illustration for installing Devtron

Merge branch 'main' into refactor/app-details

37fefe9

Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-…

14c0746

…common-lib into feat/day-picker

chore: version bump

eac8b90

refactor: remove margin from LoadingCard component

d6daac4

fix: format values in SegmentedBarChart to use locale string represen…

57dff89

…tation

feat: add avoidFocusTrap prop to various components for improved focu…

4b45cde

…s management

chore: version bump

46999df

chore: add skaffold

9b07131

Merge pull request #999 from devtron-labs/fix/date-picker-focus

0b4ffbb

fix: date picker focus

feat: add icons and illustrations

4639152

chore: version bump

30bf7b1

feat: enhance GenericModal with border variant and alignment options;…

ff7db03

… add escape key handling for focus trap

feat: update ic-curved-arrow.svg path fill color to use CSS variable

2ff76f5

Merge pull request #1000 from devtron-labs/feat/navigation-upgraded

87bc9b8

feat: navigation upgraded

feat: enhance markdown editor functionality and styling

67538f4

feat: enhance GenericDescription component with improved toolbar and …

5858229

…styling

feat: update GenericDescription component with new toolbar commands a…

b563377

…nd improved state management

Merge branch 'main' of https://github.com/devtron-labs/devtron-fe-com…

88cdc5c

…mon-lib into refactor/app-details

Merge pull request #991 from devtron-labs/refactor/app-details

2184abe

refactor: remove unused PodMetadatum interface and update aggregateNo…

feat: update version to 1.22.7 and modify navigation types for projec…

308d5e6

…t management

fix: revert version to 1.22.6-beta-2 in package.json and package-lock…

0a78400

….json

feat: update version to 1.22.7 in package.json and package-lock.json

ad8c301

Merge pull request #1006 from devtron-labs/fix/ea-project

871cedb

fix: add constants required for project navigation movement to global config

feat: add GRAFANA_ORG_ID to customEnv interface

100a1b1

feat: update version to 1.22.8 in package.json and package-lock.json

d4e81f1

Merge pull request #1010 from devtron-labs/feat/grafana-org-id

73ad76e

feat: grafana org id flag

Merge pull request #1002 from devtron-labs/feat/markdown-editor

6cc5c5e

feat: markdown editor

Merge branch 'main' of https://github.com/devtron-labs/devtron-fe-com…

028d31f

…mon-lib into feat/day-picker

feat: update version to 1.22.8-beta-7 in package.json and package-loc…

ea8ad8e

…k.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: day picker#970

feat: day picker#970
AbhishekA1509 wants to merge 71 commits intodevelopfrom
feat/day-picker

AbhishekA1509 commented Nov 27, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Copilot AI Dec 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments

	const fromDate = dateRange.from ? dayjs(dateRange.from).format(DATE_TIME_FORMATS.DD_MMM_YYYY) : ''
	const fromDate = dateRange.from ? dayjs(dateRange.from).format(DATE_TIME_FORMATS.DD_MMM_YYYY) : 'Select start date'

	export type UpdateSingleDateType = (date: Date) => void
	export type UpdateSingleDateType = (date: Date \| null) => void

	size={ComponentSizeType.large}
	size={ComponentSizeType.large}
	isDisabled={disabled}

	onClick={onClick \|\| getRangeUpdateHandler(value)}
	onClick={onClick \|\| getRangeUpdateHandler(value)}
	aria-label={`Select range: ${optionLabel}`}

Conversation

AbhishekA1509 commented Nov 27, 2025

Description

Type of change

How Has This Been Tested?

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments