feat: add dateformat and placeholder prop for datepicker input [DSSUP-199] #2472

tewarig · 2025-01-14T10:44:25Z

Description

Added dateFormat and placeholder props:
The dateFormat prop allows custom formatting for the date displayed in the input.
The placeholder prop enables customization of the placeholder text, which defaults to the date format. This is useful since the placeholder text might differ from the date format or could be unclear to users.
Removed the chevron icon when the picker prop is used.

Additional Information

this fixes -
#2469
#2470

Component Checklist

Update Component Status Page
Perform Manual Testing in Other Browsers
Add KitchenSink Story
Add Interaction Tests (if applicable)
Add changeset

changeset-bot · 2025-01-14T10:44:28Z

🦋 Changeset detected

Latest commit: 107e9d7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-01-14T10:44:37Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2025-01-14T10:48:01Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 107e9d7:

Sandbox	Source
razorpay/blade: basic	Configuration

saurabhdaware · 2025-01-14T10:58:08Z

packages/blade/src/components/DatePicker/DateInput.web.tsx

@@ -92,12 +92,13 @@ const _DatePickerInput = (
    successText,
    errorText,
    helpText,
+    dateFormat,
+    placeholder,


Its fine to not expose placeholder right? dateFormat can have its own defined placeholder I'm guessing 🤔

I think we should expose the placeholder.
If someone wants to change it from "DD/MM/YYYY" to something like "Select Date," it should be allowed.
developers may want to modify the placeholder to suit their needs.
We should allow developers to modify the placeholder because having a predefined one could impose unnecessary constraints.

Yeah fine. just keep the default as it was before.

If we set placeholder to "Select Date" how would the end-user know which format they are supposed to enter date in 🤔

Works to have placeholder for now since we'll have good default anyways. Can discuss it later.

okay leaving placeholder for now. with default value DD/MM/YYYY.

saurabhdaware · 2025-01-14T10:59:04Z

packages/blade/src/components/DatePicker/types.ts

+    /**
+     * Sets the date format to be displayed in the input field.
+     */
+    dateFormat?: string;


can we have more explit types like 'DD/MM/YYYY' | 'MMM' etc?

We can expose limited options here in dateFormat, but I think using a string is more ideal. What if the user wants to display the date like 'yyyy/mm/dd'? Using a string here allows more flexibility in how the date is formatted. Let me know if we should define an explicit type.

There is one thing, though maybe I should change the default type based on the picker prop as well.

But in this case the consumer wouldn't get autocomplete on which formats are possible no? they'll have to read documentation for that.

What if the user wants to display the date like 'yyyy/mm/dd'?

Also, this is something that we should avoid exposing. If one datepicker on one product is dd/mm/yyyy, other is mm/dd/yyyy, and other is yyyy/mm/dd the consumer will have different experiences of typing dates in all products so this is something that we can put guardrails on.

IMO we can support dd/mm/yyyy | mmm | mmmm | yyyy. This should cover most usecases while keeping the experience consistent.

There is one thing, though maybe I should change the default type based on the picker prop as well.

We can if we want but its fine even if we skip this since I don't see anyone using day picker just to show month. That experience will look visibly broken so consumers won't do it most likely

added explit formats

rzpcibot · 2025-01-14T11:00:16Z

Bundle Size Report

Updated Components

Status	Component	Base Size (kb)	Current Size (kb)	Diff
⬆	DatePicker	86.770	86.982	+0.212 KB
⬇	Fade	1.054	1.053	-0.001 KB

Generated by 🚫 dangerJS against 107e9d7

packages/blade/src/components/DatePicker/DateInput.web.tsx

saurabhdaware · 2025-01-15T03:46:06Z

packages/blade/src/components/DatePicker/DatePicker.web.tsx

+      return format;
+    }
+    if (picker === 'day') {
+      return 'DD';


@anuraghazra @tewarig Shouldn't day picker also be dd/mm/yyyy by default? just the date number won't be useful in most scenarios no?

Like I would normally use day picker when I want people to only choose a day of given month but I would still want user to know which month they've chosen right?

okay, will change this

anuraghazra

Mostly LGTM

tewarig · 2025-01-15T11:23:00Z

packages/blade/src/components/DatePicker/CalendarHeader.web.tsx

-            <Link
-              onClick={() => {
-                onLevelChange('year');
-              }}


need to change to this

tewarig added 2 commits January 14, 2025 15:07

fix: showLevelChangeLink only if picker is not defined

368807a

feat: added dateFormat and placeholder props

90f8c7f

tewarig changed the title ~~Feat: add dateformat and placeholder prop for datepicker input~~ Feat: add dateformat and placeholder prop for datepicker input [FC-1234] Jan 14, 2025

tewarig changed the title ~~Feat: add dateformat and placeholder prop for datepicker input [FC-1234]~~ feat: add dateformat and placeholder prop for datepicker input [FC-1234] Jan 14, 2025

tewarig marked this pull request as ready for review January 14, 2025 10:52

tewarig requested review from chaitanyadeorukhkar, kamleshchandnani, anuraghazra, snitin315 and saurabhdaware as code owners January 14, 2025 10:52

saurabhdaware reviewed Jan 14, 2025

View reviewed changes

anuraghazra reviewed Jan 14, 2025

View reviewed changes

packages/blade/src/components/DatePicker/DateInput.web.tsx Outdated Show resolved Hide resolved

feat: added default values

3b42b65

tewarig added the P0 Critical label Jan 14, 2025

tewarig added 2 commits January 14, 2025 17:33

feat: add changeset

944542a

chore: review changes

d58d7f8

tewarig changed the title ~~feat: add dateformat and placeholder prop for datepicker input [FC-1234]~~ feat: add dateformat and placeholder prop for datepicker input [DSSUP-199] Jan 14, 2025

saurabhdaware reviewed Jan 15, 2025

View reviewed changes

chore: update date formats

87bd14e

tewarig force-pushed the feat/add-dateformat-and-placeholder-prop-for-datepicker-input branch from 5c2e8bb to 87bd14e Compare January 15, 2025 07:30

saurabhdaware previously approved these changes Jan 15, 2025

View reviewed changes

anuraghazra previously approved these changes Jan 15, 2025

View reviewed changes

chore: update picker

2ce7b18

tewarig dismissed stale reviews from anuraghazra and saurabhdaware via 2ce7b18 January 15, 2025 08:44

chore: updated types

2d0a4ca

chore: udpdate jsdocs comments

107e9d7

saurabhdaware approved these changes Jan 15, 2025

View reviewed changes

tewarig merged commit 7025932 into master Jan 15, 2025
13 of 15 checks passed

tewarig deleted the feat/add-dateformat-and-placeholder-prop-for-datepicker-input branch January 15, 2025 09:19

tewarig commented Jan 15, 2025

View reviewed changes

tewarig mentioned this pull request Jan 15, 2025

fix: date picker on level change issue [FC-1234] #2479

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add dateformat and placeholder prop for datepicker input [DSSUP-199] #2472

feat: add dateformat and placeholder prop for datepicker input [DSSUP-199] #2472

tewarig commented Jan 14, 2025 •

edited

Loading

changeset-bot bot commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

codesandbox-ci bot commented Jan 14, 2025 •

edited

Loading

saurabhdaware Jan 14, 2025

tewarig Jan 14, 2025

anuraghazra Jan 14, 2025

saurabhdaware Jan 15, 2025

tewarig Jan 15, 2025

saurabhdaware Jan 14, 2025

tewarig Jan 14, 2025

saurabhdaware Jan 15, 2025

tewarig Jan 15, 2025

rzpcibot commented Jan 14, 2025 •

edited

Loading

saurabhdaware Jan 15, 2025 •

edited

Loading

tewarig Jan 15, 2025

tewarig Jan 15, 2025

anuraghazra left a comment

tewarig Jan 15, 2025 •

edited

Loading

feat: add dateformat and placeholder prop for datepicker input [DSSUP-199] #2472

feat: add dateformat and placeholder prop for datepicker input [DSSUP-199] #2472

Conversation

tewarig commented Jan 14, 2025 • edited Loading

Description

Additional Information

Component Checklist

changeset-bot bot commented Jan 14, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Jan 14, 2025 • edited Loading

codesandbox-ci bot commented Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rzpcibot commented Jan 14, 2025 • edited Loading

Bundle Size Report

saurabhdaware Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuraghazra left a comment

Choose a reason for hiding this comment

tewarig Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

tewarig commented Jan 14, 2025 •

edited

Loading

changeset-bot bot commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

codesandbox-ci bot commented Jan 14, 2025 •

edited

Loading

rzpcibot commented Jan 14, 2025 •

edited

Loading

saurabhdaware Jan 15, 2025 •

edited

Loading

tewarig Jan 15, 2025 •

edited

Loading