saas-js/saas-ui

Date (Range) Pickers | Enable input field to trigger dialogue too (syncing values between input and dialogue)

Open

#183 opened on Dec 18, 2023

View on GitHubContributor guide
 (3 comments) (0 reactions) (1 assignee)TypeScript (171 forks)github user discovery
Plannedhelp wanted

Repository metrics

Stars
 (1,643 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

https://saas-ui.dev/docs/components/date-time/date-input vs https://saas-ui.dev/docs/components/date-time/date-picker

Make it possible to combine trigger & input so you can have a date form field that triggers the opening of the dialogue not only on click of the calendar icon but also on click of the form field itself for better usability (i.e enable both keyboard entry as well as comfy entry). If we have to implement it by ourselves, we have to create our component to keep the calendar and input in sync so even though we don't want to, we'll go with the trigger/button variant for now.

UX could be similar to

(haven't checked the code of those packages though)

Contributor guide

Research direction
Modify the DatePicker component to allow the input field to trigger the dialog opening on click, and sync the input value with the calendar dialog.
Tech stack
typescriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65