diff --git a/playground/app.tsx b/playground/app.tsx
index 7311990..b2497c5 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -4,14 +4,20 @@ import './app.scss'
export default () => {
+ function onSelect(value) {
+ alert(`You select ${value.year}-${value.month}-${value.day}`)
+ }
return (
)
}
\ No newline at end of file
diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 286167e..2b8dae0 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -5,6 +5,11 @@ import { getCalendarDates, getL10Weekday } from '../utils'
interface Props {
value?: Date | { year: number, month: number, day: number }
+ onSelect?: (date: {
+ year: number,
+ month: number,
+ day: number
+ }) => void
}
/**
@@ -16,8 +21,10 @@ interface Props {
* @param {Date | { year: number, month: number, day: number }} props.value - Control the selected
* date programmatically, including situations like provide a default value or control the selected
* date by parent component.
+ * @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.
*/
-export default ({ value }: Props) => {
+export default ({ value, onSelect }: Props) => {
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
const [selectedDate, setSelectedDate] = useState(new Date())
@@ -39,6 +46,11 @@ export default ({ value }: Props) => {
function selectDate(date: Date) {
setSelectedDate(date)
+ onSelect?.({
+ year: date.getFullYear(),
+ month: date.getMonth() + 1,
+ day: date.getDate()
+ })
}
function skipToLastMonth() {