diff --git a/playground/app.tsx b/playground/app.tsx
index 1e3f68e..7311990 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -3,9 +3,15 @@ import { WeekPicker } from "../src/index.ts"
 import './app.scss'
 
 export default () => {
+
+
 	return (<div className='app'>
 		<div className="border">
-			<WeekPicker />
+			<WeekPicker value={{
+				year: 2025,
+				month: 1,
+				day: 1
+			}} />
 		</div>
 	</div>)
 }
\ No newline at end of file
diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 5b5cad2..3b6d779 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -3,7 +3,21 @@ import RightArrowIcon from '@/assets/icons/right-arrow.svg'
 import { useEffect, useState } from 'react'
 import { getCalendarDates, getL10Weekday } from '../utils'
 
-export default () => {
+interface Props {
+	value?: Date | { year: number, month: number, day: number }
+}
+
+/**
+ * A panel that allows users to select a date.
+ * 
+ * @component
+ * 
+ * @param {Object} 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.
+ */
+export default ({ value }: Props) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
 	const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 	const [selectedDate, setSelectedDate] = useState(new Date())
@@ -15,6 +29,15 @@ export default () => {
 		setDates(getCalendarDates(currentMonth, currentYear))
 	}, [currentMonth, currentYear])
 
+	useEffect(() => {
+		if (!value) return
+		const date = value instanceof Date ? value : new Date(value.year, value.month - 1, value.day)
+		console.log(date)
+		setSelectedDate(date)
+		setCurrentMonth(date.getMonth())
+		setCurrentYear(date.getFullYear())
+	}, [value])
+
 	function selectDate(date: Date) {
 		setSelectedDate(date)
 	}