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

feat: enhance SingleDatePicker with localization support and improved accessibility

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-19 21:42:30 +11:00
parent 047b36bd56
commit c758deda1f
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
playground/app.tsx
View File

@ -18,6 +18,7 @@ export default () => {
day: 1 day: 1
}} }}
onSelect={onSelect} onSelect={onSelect}
localization="zh-CN"
/> />
</div> </div>
</div>) </div>)

22
src/components/SingleDatePicker.tsx
View File

@ -83,37 +83,45 @@ export default ({ value, onSelect, localization }: Props) => {
<button className='stepper' onClick={() => { <button className='stepper' onClick={() => {
if (currentYear === 0) return if (currentYear === 0) return
setCurrentYear(currentYear - 1) setCurrentYear(currentYear - 1)
}}><img src={LeftArrowIcon} /></button> }} aria-label={`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`}><img src={LeftArrowIcon} /></button>
<input className='indicator' <input className='indicator'
value={currentYear} value={currentYear}
onChange={e => setCurrentYear(parseInt(e.target.value))} onChange={e => setCurrentYear(parseInt(e.target.value))}
aria-label="Year input, type a year to go to that year"
/> />
<button className='stepper' onClick={() => { <button className='stepper' onClick={() => {
if (currentYear === 9999) return if (currentYear === 9999) return
setCurrentYear(currentYear + 1) setCurrentYear(currentYear + 1)
}}><img src={RightArrowIcon} /></button> }} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}><img src={RightArrowIcon} /></button>
</div> </div>
<div className='month-selector-body'> <div className='month-selector-body'>
{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => { {Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
setCurrentMonth(index) setCurrentMonth(index)
setSelectMonth(false) setSelectMonth(false)
}}> }} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} {new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
</button>)} </button>)}
</div> </div>
</div>) </div>)
else return (<div className='datenel-component'> else return (<div className='datenel-component'>
<div className='header'> <div className='header'>
<button className='stepper' onClick={skipToLastMonth}><img src={LeftArrowIcon} /></button> <button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><img src={LeftArrowIcon} /></button>
<button className='indicator' onClick={() => setSelectMonth(true)}> <button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
{new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { 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} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><img src={RightArrowIcon} /></button>
</div> </div>
<div className='calendar-view-body'> <div className='calendar-view-body'>
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)} {l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
{dates.map(date => <button className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`} key={date.toISOString()} onClick={() => selectDate(date)}> {dates.map(date => <button
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
key={date.toISOString()}
onClick={() => selectDate(date)}
aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
tabIndex={currentMonth !== date.getMonth() ? -1 : 0 }
aria-hidden={currentMonth !== date.getMonth()}
>
{date.getDate()} {date.getDate()}
{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>} {date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
</button>)} </button>)}