A simple date picker component
Use this date picker to implement selection of a single date.
You can combine two of these to get a date range, but you can use the Date Range Picker instead.
Full picker
Current Selection:
Year: 2025
Month: 1
Day: 16
1import DatePicker from '@tempoplatform/tpds/components/date-picker'
2const [currenDate, setCurrentDate] = React.useState(new Date())
3
4<DatePicker
5 year={currenDate.getFullYear()}
6 month={currenDate.getMonth()}
7 day={currenDate.getDate()}
8 onChange={date => setCurrentDate(date)}
9/>Just month and day
1<DatePicker
2 year={currenDate.getFullYear()}
3 month={currenDate.getMonth()}
4 day={currenDate.getDate()}
5 onChange={date => setCurrentDate(date)}
6 omitYear={true}
7/>Just year and month
1<DatePicker
2 year={currenDate.getFullYear()}
3 month={currenDate.getMonth()}
4 day={currenDate.getDate()}
5 onChange={date => setCurrentDate(date)}
6 omitDay={true}
7/>Just year
1<DatePicker
2 year={currenDate.getFullYear()}
3 month={currenDate.getMonth()}
4 day={currenDate.getDate()}
5 onChange={date => setCurrentDate(date)}
6 omitMonth={true}
7 omitDay={true}
8/>Just day
1<DatePicker
2 year={currenDate.getFullYear()}
3 month={currenDate.getMonth()}
4 day={currenDate.getDate()}
5 onChange={date => setCurrentDate(date)}
6 omitMonth={true}
7 omitYear={true}
8/>Prop Name
Type
Default
Required
Description
year
Number
Current year
No
The year to display
month
Number
Current month
No
The month to display.
day
Number
Today
No
The day to display.
omitYear
Boolean
false
No
Do now show the year picker.
omitMonth
Boolean
false
No
Do not show the month picker.
omitDay
Boolean
false
No
Do not show the day picker.
allowPast
Boolean
false
No
Allow post dates to be selected.
maxYearsToPast
Number
10
No
How many years in the past to show in the list.
maxYearsToFuture
Number
10
No
How many years in the future to show in the list.