react_antd_datepicker_with_chinese_locale_typescript.ts

1import React, { useState } from 'react';
2import { DatePicker, message, Alert, ConfigProvider } from 'antd';
3import type { Dayjs } from 'dayjs';
4import dayjs from 'dayjs';
5import 'dayjs/locale/zh-cn';
6import zhCN from 'antd/locale/zh_CN';
7import './index.css';
8
9const App: React.FC = () => {
10  const [date, setDate] = useState<Dayjs | null>(null);
11
12  const handleChange = (value: Dayjs | null) => {
13    message.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
14    setDate(value);
15  };
16
17  return (
18    <ConfigProvider locale={zhCN}>
19      <div style={{ width: 400, margin: '100px auto' }}>
20        <DatePicker onChange={handleChange} />
21        <div style={{ marginTop: 16 }}>
22          <Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} />
23        </div>
24      </div>
25    </ConfigProvider>
26  );
27};
28
29export default App;