Astrian/datenel-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: add localization support to SingleDatePicker for date formatting

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-19 21:04:49 +11:00
parent 51a49e1165
commit 1c532851ac
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/SingleDatePicker.tsx
View File

@ -10,6 +10,7 @@ interface Props {
month: number, month: number,
day: number day: number
}) => void }) => void
localization?: string
} }
/** /**
@ -23,14 +24,16 @@ interface Props {
* date by parent component. * date by parent component.
* @param {(date: { year: number, month: number, day: number }) => void} props.onSelect - A callback * @param {(date: { year: number, month: number, day: number }) => void} props.onSelect - A callback
* function that will be called when a date is selected inside the panel. * function that will be called when a date is selected inside the panel.
* @param {string} props.localization - The language code that will be used to localize the panel.
* Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Default to the
* language of the user’s browser.
*/ */
export default ({ value, onSelect }: Props) => { export default ({ value, onSelect, localization }: Props) => {
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth()) const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
const [currentYear, setCurrentYear] = useState(new Date().getFullYear()) const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedDate, setSelectedDate] = useState(new Date())
const [dates, setDates] = useState<Date[]>([]) const [dates, setDates] = useState<Date[]>([])
const userLang = navigator.language const [l10nDays, setL10nDays] = useState<string[]>([])
const l10nDays = getL10Weekday(userLang)
const [selectMonth, setSelectMonth] = useState(true) const [selectMonth, setSelectMonth] = useState(true)
useEffect(() => { useEffect(() => {
@ -45,6 +48,11 @@ export default ({ value, onSelect }: Props) => {
setCurrentYear(date.getFullYear()) setCurrentYear(date.getFullYear())
}, [value]) }, [value])
useEffect(() => {
const i18n = localization || navigator.language
setL10nDays(getL10Weekday(i18n))
}, [localization])
function selectDate(date: Date) { function selectDate(date: Date) {
setSelectedDate(date) setSelectedDate(date)
onSelect?.({ onSelect?.({
@ -90,7 +98,7 @@ export default ({ value, onSelect }: Props) => {
setCurrentMonth(index) setCurrentMonth(index)
setSelectMonth(false) setSelectMonth(false)
}}> }}>
{new Date(currentYear, index).toLocaleString(userLang, { month: 'long' })} {new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
</button>)} </button>)}
</div> </div>
</div>) </div>)
@ -98,7 +106,7 @@ export default ({ value, onSelect }: Props) => {
<div className='header'> <div className='header'>
<button className='stepper' onClick={skipToLastMonth}><img src={LeftArrowIcon} /></button> <button className='stepper' onClick={skipToLastMonth}><img src={LeftArrowIcon} /></button>
<button className='indicator' onClick={() => setSelectMonth(true)}> <button className='indicator' onClick={() => setSelectMonth(true)}>
{new Date(currentYear, currentMonth).toLocaleString(userLang, { month: 'long', year: 'numeric' })} {new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
</button> </button>
<button className='stepper' onClick={skipToNextMonth}><img src={RightArrowIcon} /></button> <button className='stepper' onClick={skipToNextMonth}><img src={RightArrowIcon} /></button>
</div> </div>