dcc redesign: DatePickerSingle and DatePickerRange
#3495
Conversation
KoolADE85
force-pushed
the
feature/dcc-refactor-datepicker
branch
2 times, most recently
from
b2d62da to
de88f2b
Compare
KoolADE85
force-pushed
the
feature/dcc-refactor-datepicker
branch
from
de88f2b to
75fd1fe
Compare
|
Wow! First look at this is amazing 🤩 I love how you can easily skip months and years - that's been a pain point in the old date pickers for a long time. This is an incredible amount of work given that the Radix components does not have date pickers and you had to build all of this from scratch. I see you are still using moment.js for the date formatting. Since they are no longer recommending moment.js to be used in new project, would you consider using one of their recommended alternatives? It might make it easier to add support for locale at some point https://momentjs.com/docs/#/-project-status/ |
|
Thanks @AnnMarieW ! And wow, I did not realize moment was fading away like that! I will take a look at replacing moment - it shouldn't be too much effort there.
|
| * DatePickerRange is a tailor made component designed for selecting | ||
| * timespan across multiple days off of a calendar. |
There was a problem hiding this comment.
I'd remove the tailor made from the description.
| import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; | ||
| import * as Popover from '@radix-ui/react-popover'; | ||
| import { | ||
| CalendarIcon, | ||
| CaretDownIcon, | ||
| Cross1Icon, | ||
| ArrowLeftIcon, | ||
| ArrowRightIcon, | ||
| } from '@radix-ui/react-icons'; | ||
| import AutosizeInput from 'react-input-autosize'; | ||
| import Calendar, {CalendarHandle} from '../utils/calendar/Calendar'; | ||
| import {DatePickerRangeProps, CalendarDirection} from '../types'; | ||
| import { | ||
| dateAsStr, | ||
| strAsDate, | ||
| formatDate, | ||
| isDateDisabled, | ||
| isSameDay, | ||
| } from '../utils/calendar/helpers'; | ||
| import '../components/css/datepickers.css'; | ||
| import uuid from 'uniqid'; | ||
| import moment from 'moment'; |
There was a problem hiding this comment.
These imports should be grouped/sorted, third parties first then local file.
I would also recommend we change to something else, I don't think we use that much moment.js. Luxon seems like a good alternative, I also had a good experience with |
At long last, here is a PR to modernize the date pickers.
You can play with them here:
https://dcc-redesign.plotly.app/datepickers-single
https://dcc-redesign.plotly.app/datepickers-range
Some improvements:
dcc.Dropdown's look and feelCloses #3391