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

refactor: add month navigation functionality to SingleDatePicker component

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-19 15:05:34 +11:00
parent 1b204b8dc0
commit 52e4695ad5
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/SingleDatePicker.tsx
View File

@ -18,13 +18,29 @@ export default () => {
setSelectedDate(date) setSelectedDate(date)
} }
function skipToLastMonth() {
if (currentMonth === 0) {
setCurrentMonth(11)
setCurrentYear(currentYear - 1)
}
else setCurrentMonth(currentMonth - 1)
}
function skipToNextMonth() {
if (currentMonth === 11) {
setCurrentMonth(0)
setCurrentYear(currentYear + 1)
}
else setCurrentMonth(currentMonth + 1)
}
return (<div className='datenel-component'> return (<div className='datenel-component'>
<div className='header'> <div className='header'>
<button className='month-stepper'><img src={LeftArrowIcon} /></button> <button className='month-stepper' onClick={skipToLastMonth}><img src={LeftArrowIcon} /></button>
<button className='month-indicator'> <button className='month-indicator'>
{new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' })} {new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' })}
</button> </button>
<button className='month-stepper'><img src={RightArrowIcon} /></button> <button className='month-stepper' onClick={skipToNextMonth}><img src={RightArrowIcon} /></button>
</div> </div>
<div className='body'> <div className='body'>