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

fix: disable date selection for non-current months

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-20 10:02:37 +11:00
parent 1088ab5508
commit 4513d9a1ce
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
3 changed files with 2 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
playground/app.tsx
View File

@ -20,11 +20,6 @@ export default () => {
onSelect={onSelect} onSelect={onSelect}
localization="zh-CN" localization="zh-CN"
onClose={() => alert('close')} onClose={() => alert('close')}
mainColor='#424c50'
accentColor='#424c50'
reversedColor='#e9f1f6'
hoverColor='#e9e7ef44'
borderColor='#758a9944'
/> />
</div> </div>
</div>) </div>)

1
src/components/SingleDatePicker.tsx
View File

@ -194,6 +194,7 @@ export default ({ value, onSelect, localization, onClose, mainColor = '#000000',
aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this 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} tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
aria-hidden={currentMonth !== date.getMonth()} aria-hidden={currentMonth !== date.getMonth()}
disabled={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>}

1
src/style.scss
View File

@ -87,6 +87,7 @@
position: relative; position: relative;
&.extra-month { &.extra-month {
opacity: 0.3; opacity: 0.3;
cursor: default;
} }
&:hover { &:hover {
background: var(--datenel-hover-color); background: var(--datenel-hover-color);