📆 DatePicker

[JoeyDjr]

💡 This discussion is about the DatePicker component.

✨ To build the DatePicker, I separated the logic, the UI, and the components.
I first built a Calendar component with its hook and selectors. Then I built the DatePicker component composed of a basic input and the Calendar.

📅 Calendar

👉 First of all, I built the Calendar component.

💄 UI proposition for the calendar.

🏗️ It has the following properties :

• currentDate: string | Date - sets the current date of the calendar
• weekStart: Day - the first day of the week to display
• onSelect?: (date: string) => void - callback function called when a date is selected
• onSelectRange?: (start: string, end: string) => void - callback function called when a range of date is selected

It also defines the following type :
export type Day = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday'

👔 The Calendar component comes with the useCalendar hook to manage the calendar state. This hook provides the following actions :

• dateSelected - executes when a date is selected
• previousMonthReached - executes when the previous month is reached
• nextMonthReached - executes when the next month is reached
• previousYearReached - executes when the previous year is reached
• nextYearReached - executes when the next year is reached

🧐 And it maintains a state that saves the following data :

• currentDate: string | Date - the current calendar date
• startDateSelected?: string | Date - if it exists, the calendar is able to provide a range of dates and this property saves the start of that range.

To access this data, the Calendar uses selectors functions.

🙈 Finally, to build the Calendar UI, it implements some private functions which allow the calendar to perform useful calculations such as the first day of the month, the number of days in the month, but also that allow the construction of the calendar display (retrieve of the days of the month to be displayed as well as retrieve the data of the days composing this month)

📆 DatePicker

👉 And then the DatePicker is the main component. It is an Input with a calendar icon that open the Calendar component on clicking.

💄 UI proposition for the DatePicker. (without the range)

🏗️ The DatePicker has the following properties :

• defaultValue?: string - the default value of the date picker that displays the current date of the Calendar
• disabled?: boolean - defines whether the input is disabled
• format?: DateFormat - sets the format of the date that users can enter manually
• weekStart: Day - the first day of the week to display the calendar
• range?: boolean - defines whether the date picker allows a range of dates to be selected . It is false by default so that the user can only select one date
• onChange: (date: string) => void - callback method called when the date in the date picker changes (by selecting a date from the calendar or by entering a date manually)
• onRangeChange: (start: string, end: string) => void - callback method called when the user selects a date range, or manually enters the start and end dates

With the following type :

type DateFormat =
  | 'yyyy-mm-dd'
  | 'yyyy/mm/dd'
  | 'dd-mm-yyyy'
  | 'dd/mm/yyyy'
  | 'mm-dd-yyyy'
  | 'mm/dd/yyyy'

💡 Ideas

🙏 Please do not hesitate to contribute and feel free to contribute and suggest features, design or ideas.
@fredericvilcot @ccamel @lolottetheclash @ErikssonJoakim

Two points come to my mind:

• the design of the component in range mode
• the type of dates used and returned by the component (string, JS Date); for the moment the component handles ISO dates

[SpicySalm0n]

Yo! @JoeyDjr 😊

🕹️ UX remarks:
I understand the development needs and the construction you purpose to match with the operation of the date picker. But for a user it's not easy to understand what all these arrows correspond to (right/left/up/down) and i'm a bit confused myself: what's the left and right arrows for?
-> If it is to close the date picker, in practice the user will click elsewhere on the screen or at the limit click again on the input. And in addition we cant put an arrow to close if the entry is a calendar icon. And so what's the down one?
Otherwise I find it good in terms of operation, it's a date picker that's simple and quick to use!

💄 UI remarks:

• I think there are too many colors and the result is therefore not harmonious. On this type of component, it is more judicious to play on the opacities or the tints of a single color. For example the gray for the disable numbers you can put it in a white with reduced opacity).
  An other example: the round of the selected day, I would have put it in white reduced opacity (12%). This will make a light blue effect but in the same shade as the background and therefore more pleasing to the eye.

• For the number of the selected day, it's THE chosen one! I would have put it clearly in 100% white and I agree for the bold.

• You put a lot of margin between the rows of numbers. It would also be necessary to air out the month and the year because the "header" of the date picker is very compact while the numbers are very airy.

• I find the date picker very "raw" and I would have added some rounded corners to soften this small component, but that's up to me to bring the general rules to all the components, especially for the aspects of the cards. I am currently working on the main lines but I guarantee you a general framework that will give this modern and "easy to use" aspect to all the components.

If necessary, I can transcribe everything I have just said into a small prototype.

[JoeyDjr]

Thank you for your remarks.
I forgot to precise it. The left and right icon allow to change month. And the up and down one allow to change year. Of course they are not the definitive icons. It was just a distinction for me during the first step of the implementation and I think we will need a more beautiful component.

I think it will be necessary to have a prototype for that after confirmation with @fredericvilcot

[lolottetheclash]

Thanks for this discussion!
I have some questions about the properties:

Calendar:

• currentDate: is it mandatory? It could be optional with a default value of the current date maybe?
• weekStart: it could be optional with a default value of Monday if the language I18N is fr and Sunday if it is en?
• onSelect should be mandatory though, right?

DatePicker:

• Wouldn't it be better to replace the defaultValue by the value(which doesn't exist now)
• range: is it useful? In the sense that if there is an onRangeChange callback provided, it allows to deduce that the calendar should select a range of dates.
• onRangeChange: should be optional I think

Also a detail, I wonder if an enum is not more suitable than a type for the days of the week?