{"id":123785,"date":"2026-11-08T05:33:28","date_gmt":"2026-11-07T21:33:28","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/123785.html"},"modified":"2026-11-08T05:33:28","modified_gmt":"2026-11-07T21:33:28","slug":"vue3%e6%97%a5%e6%9c%9f%e9%80%89%e6%8b%a9%e5%99%a8%ef%bc%88datepicker%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/123785.html","title":{"rendered":"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09"},"content":{"rendered":"

\u6548\u679c\u5982\u4e0b\u56fe：<\/h3>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

\u5728\u7ebf\u9884\u89c8<\/h3>\n

APIs<\/h3>\n

\u53d7\u63a7 \/ \u975e\u53d7\u63a7：\u4f20\u5165 v-model:value \u5373\u53d7\u63a7，\u7ec4\u4ef6\u53ea\u7ecf update:value \u4e0a\u62a5；\u4e0d\u4f20\u65f6\u7531\u7ec4\u4ef6\u81ea\u6301，\u53ef\u7528 defaultValue \u6307\u5b9a\u521d\u503c\u3002\u4e24\u8005\u540c\u65f6\u4f20\u65f6\u4ee5 value \u4e3a\u51c6\u3002<\/p>\n

DatePicker Props<\/h4>\n\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b\u9ed8\u8ba4\u503c<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
value v-model<\/td>\n\u53cc\u5411\u7ed1\u5b9a\u503c，\u6beb\u79d2\u65f6\u95f4\u6233；\u8303\u56f4\u5f62\u6001\u4e3a\u4e24\u6bb5\u5143\u7ec4，\u67d0\u6bb5\u53ef\u4e3a null；\u4f20\u5165\u5373\u53d7\u63a7，\u4e0d\u4f20\u65f6\u7ec4\u4ef6\u81ea\u6301（\u53ef\u7528 defaultValue \u6307\u5b9a\u521d\u503c，\u7f3a\u7701\u65e0\u9009\u4e2d\u503c）<\/td>\nnumber | [number | null, number | null] | null<\/td>\nundefined<\/td>\n<\/tr>\n
defaultValue<\/td>\n\u975e\u53d7\u63a7\u521d\u59cb\u503c，\u672a\u7ed1 v-model:value \u65f6\u751f\u6548；\u4e0e\u9762\u677f\u521d\u59cb\u65e5\u671f defaultPickerValue\u3001\u9ed8\u8ba4\u65f6\u5206\u79d2 defaultTime \u4e0d\u540c，\u672c\u5b57\u6bb5\u51b3\u5b9a\u9009\u4e2d\u503c\u672c\u8eab<\/td>\nnumber | [number | null, number | null] | null<\/td>\nundefined<\/td>\n<\/tr>\n
open v-model<\/td>\n\u9762\u677f\u662f\u5426\u5c55\u5f00；\u4f20\u5165\u5373\u53d7\u63a7，\u5185\u90e8\u89e6\u53d1\u53ea\u7ecf update:open \/ openChange \u4e0a\u62a5（\u4e0d\u4f20\u65f6\u7531\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4，\u7f3a\u7701\u6536\u8d77）<\/td>\nboolean<\/td>\nundefined<\/td>\n<\/tr>\n
formattedValue v-model<\/td>\n\u5b57\u7b26\u4e32\u8f68\u9053\u7684\u53cc\u5411\u7ed1\u5b9a\u503c，\u4f20\u5165\u65f6\u4ee5\u5b83\u4e3a\u51c6（\u53d7\u63a7）；\u663e\u793a\u683c\u5f0f\u7531 format \/ valueFormat \u51b3\u5b9a<\/td>\nstring | [string, string] | null<\/td>\nundefined<\/td>\n<\/tr>\n
type<\/td>\n\u9009\u62e9\u5f62\u6001<\/td>\nDatePickerType<\/td>\n\u2018date\u2019<\/td>\n<\/tr>\n
format<\/td>\n\u65e5\u671f\u5c55\u793a\u683c\u5f0f，\u672a\u4f20\u65f6\u6309 DefaultFormat，\u53c2\u8003 format<\/td>\nstring<\/td>\nundefined<\/td>\n<\/tr>\n
valueFormat<\/td>\n\u7ed1\u5b9a\u503c\u683c\u5f0f，\u9ed8\u8ba4\u4e0e format \u76f8\u540c<\/td>\nstring<\/td>\nundefined<\/td>\n<\/tr>\n
placeholder<\/td>\n\u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57，\u8303\u56f4\u5f62\u6001\u53ef\u4f20\u5165\u4e24\u6bb5\u6587\u6848<\/td>\nstring | [string, string]<\/td>\n\u2018\u2019<\/td>\n<\/tr>\n
defaultPickerValue<\/td>\n\u9762\u677f\u521d\u59cb\u65e5\u671f（\u6beb\u79d2\u65f6\u95f4\u6233），\u9ed8\u8ba4\u53d6 value \u6216\u4eca\u5929<\/td>\nnumber<\/td>\nundefined<\/td>\n<\/tr>\n
startDayOfWeek<\/td>\n\u4e00\u5468\u7684\u5f00\u59cb\u662f\u661f\u671f\u51e0，0-6，0 \u662f\u5468\u4e00；\u5468\u5f62\u6001\u6052\u6309 ISO \u5468（\u5468\u4e00\u8d77\u59cb），\u8be5\u5c5e\u6027\u5bf9\u5468\u5f62\u6001\u4e0d\u751f\u6548<\/td>\n0 | 1 | 2 | 3 | 4 | 5 | 6<\/td>\n0<\/td>\n<\/tr>\n
disabledDate<\/td>\n\u4e0d\u53ef\u9009\u62e9\u7684\u65e5\u671f，\u5165\u53c2\u4e3a\u300c\u5f53\u65e5\u96f6\u70b9\u300d\u7684\u6beb\u79d2\u65f6\u95f4\u6233；\u6708 \/ \u5b63 \/ \u5e74\u5f62\u6001\u4e0b\u6309\u6574\u6bb5\u5224\u5b9a（\u6574\u6bb5\u90fd\u4e0d\u53ef\u9009\u8be5\u683c\u624d\u7981\u7528）<\/td>\n(timestamp: number) => boolean<\/td>\nundefined<\/td>\n<\/tr>\n
disabledTime<\/td>\n\u4e0d\u53ef\u9009\u62e9\u7684\u65f6\u95f4，\u4ec5\u5e26\u65f6\u95f4\u7684\u5f62\u6001\u751f\u6548；\u5165\u53c2\u4e3a\u5f53\u524d\u9762\u677f\u8349\u7a3f\u503c\u7684\u65f6\u95f4\u6233，\u8303\u56f4\u5f62\u6001\u989d\u5916\u63a5\u6536\u6bb5\u6807\u8bc6<\/td>\nDatePickerDisabledTime | DatePickerRangeDisabledTime<\/td>\nundefined<\/td>\n<\/tr>\n
defaultTime<\/td>\n\u9009\u4e2d\u65e5\u671f\u65f6\u7684\u9ed8\u8ba4\u65f6\u5206\u79d2（\u53ea\u53d6\u5176\u4e2d\u7684\u65f6\u5206\u79d2，\u4e0d\u53c2\u4e0e\u65f6\u95f4\u9762\u677f\u7684\u9884\u9009\u5c55\u793a）；\u8303\u56f4\u5f62\u6001\u53ef\u6309\u6bb5\u4f20\u5165\u4e24\u6bb5\u5143\u7ec4，\u67d0\u6bb5\u4e3a undefined \u65f6\u8be5\u6bb5\u9000\u56de\u5f53\u524d\u65f6\u523b<\/td>\nnumber | [number | undefined, number | undefined]<\/td>\nundefined<\/td>\n<\/tr>\n
timePickerProps<\/td>\n\u65f6\u95f4\u9762\u677f\u9009\u9879（\u6b65\u957f \/ 12 \u5c0f\u65f6\u5236 \/ \u9690\u85cf\u7981\u7528\u9879）<\/td>\nDatePickerTimeProps<\/td>\nundefined<\/td>\n<\/tr>\n
presets<\/td>\n\u9884\u8bbe\u9009\u9879，\u70b9\u51fb\u5373\u63d0\u4ea4\u5e76\u6536\u8d77<\/td>\nDatePickerPreset[]<\/td>\n[]<\/td>\n<\/tr>\n
width<\/td>\n\u9009\u62e9\u5668\u5bbd\u5ea6，\u5355\u4f4d px，\u4e0d\u4f20\u65f6\u968f\u5185\u5bb9\u81ea\u9002\u5e94<\/td>\nstring | number<\/td>\nundefined<\/td>\n<\/tr>\n
size<\/td>\n\u9009\u62e9\u5668\u5927\u5c0f<\/td>\n\u2018small\u2019 | \u2018middle\u2019 | \u2018large\u2019<\/td>\n\u2018middle\u2019<\/td>\n<\/tr>\n
status<\/td>\n\u6821\u9a8c\u72b6\u6001<\/td>\n\u2018warning\u2019 | \u2018error\u2019<\/td>\nundefined<\/td>\n<\/tr>\n
bordered<\/td>\n\u662f\u5426\u5c55\u793a\u8fb9\u6846<\/td>\nboolean<\/td>\ntrue<\/td>\n<\/tr>\n
disabled<\/td>\n\u662f\u5426\u7981\u7528；\u8303\u56f4\u5f62\u6001\u53ef\u4f20\u4e24\u6bb5\u5143\u7ec4\u9010\u6bb5\u7981\u7528（\u88ab\u7981\u7528\u7684\u6bb5\u4e0d\u53ef\u8f93\u5165，\u4e14\u8be5\u6bb5\u65e5\u671f\u88ab\u5bf9\u7aef\u7684\u503c\u9501\u6b7b）<\/td>\nboolean | [boolean, boolean]<\/td>\nfalse<\/td>\n<\/tr>\n
allowClear<\/td>\n\u662f\u5426\u5c55\u793a\u6e05\u9664\u6309\u94ae<\/td>\nboolean<\/td>\ntrue<\/td>\n<\/tr>\n
allowEmpty<\/td>\n\u8303\u56f4\u5f62\u6001\u5404\u6bb5\u662f\u5426\u5141\u8bb8\u4e3a\u7a7a，\u4e3a\u7a7a\u65f6\u8be5\u6bb5\u53ef\u88ab\u5355\u72ec\u6e05\u7a7a\u5e76\u5bf9\u5916\u63d0\u4ea4<\/td>\n[boolean, boolean]<\/td>\n[false, false]<\/td>\n<\/tr>\n
inputReadOnly<\/td>\n\u8f93\u5165\u6846\u662f\u5426\u53ea\u8bfb（\u907f\u514d\u79fb\u52a8\u7aef\u5524\u8d77\u952e\u76d8）<\/td>\nboolean<\/td>\nfalse<\/td>\n<\/tr>\n
to<\/td>\n\u9762\u677f\u6302\u8f7d\u7684\u5bb9\u5668\u8282\u70b9：\u663e\u5f0f\u4f20\u5165\u65f6\u6309\u6b64\u6302\u8f7d（\u5143\u7d20\u6807\u7b7e\u540d (\u4f8b\u5982 'body') \u6216\u5143\u7d20\u672c\u8eab，false \u4f1a\u5f85\u5728\u539f\u5730）；\u4e0d\u4f20\u65f6\u4f18\u5148\u6302\u5230\u6700\u8fd1\u7684\u627f\u8f7d\u5c42\u5185\u5bb9\u5bb9\u5668（Modal \/ Drawer \/ Dialog \u5361\u7247\u6216\u4e0a\u5c42\u6d6e\u5c42\u9762\u677f），\u65e0\u627f\u8f7d\u5c42\u65f6\u4e3a body<\/td>\nstring | HTMLElement | false<\/td>\nundefined<\/td>\n<\/tr>\n
placement<\/td>\n\u9762\u677f\u5f39\u51fa\u4f4d\u7f6e<\/td>\n\u2018topLeft\u2019 | \u2018top\u2019 | \u2018topRight\u2019 | \u2018bottomLeft\u2019 | \u2018bottom\u2019 | \u2018bottomRight\u2019<\/td>\n\u2018bottomLeft\u2019<\/td>\n<\/tr>\n
showArrow<\/td>\n\u8303\u56f4\u5f62\u6001\u7684\u9762\u677f\u6307\u793a\u7bad\u5934\u662f\u5426\u5c55\u793a：\u4e0d\u4f20\u65f6\u8ddf\u968f\u5f39\u51fa\u65b9\u4f4d（\u4ec5\u5de6\u4fa7\u5bf9\u9f50\u7684 bottomLeft \/ topLeft \u5c55\u793a），true \u59cb\u7ec8\u5c55\u793a\u3001false \u59cb\u7ec8\u9690\u85cf<\/td>\nboolean<\/td>\nundefined<\/td>\n<\/tr>\n
showToday<\/td>\n\u662f\u5426\u5c55\u793a\u9762\u677f\u5e95\u90e8\u7684\u300c\u4eca\u5929\u300d\u5feb\u6377，\u9762\u677f\u5207\u5230\u5468 \/ \u6708 \/ \u5b63 \/ \u5e74\u89c6\u56fe\u65f6\u9690\u85cf<\/td>\nboolean<\/td>\ntrue<\/td>\n<\/tr>\n
showNow<\/td>\n\u662f\u5426\u5c55\u793a\u9762\u677f\u5e95\u90e8\u7684\u300c\u6b64\u523b\u300d\u5feb\u6377，\u4ec5\u5e26\u65f6\u95f4\u7684\u5f62\u6001\u751f\u6548<\/td>\nboolean<\/td>\ntrue<\/td>\n<\/tr>\n
dateRender<\/td>\n\u81ea\u5b9a\u4e49\u65e5\u671f\u5355\u5143\u683c\u7684\u5185\u5bb9\u4e0e\u6837\u5f0f（\u66ff\u6362\u65e5\u53f7），\u5355\u5143\u683c\u5bb9\u5668\u4e0e\u9009\u4e2d \/ \u60ac\u6d6e \/ \u533a\u95f4\u5e95\u8272\u4ecd\u7531\u7ec4\u4ef6\u63d0\u4f9b；\u5165\u53c2 current \u4e3a\u8be5\u683c\u65e5\u671f\u7684\u96f6\u70b9\u65f6\u95f4\u6233\u3001today \u4e3a\u5f53\u524d\u65f6\u523b\u65f6\u95f4\u6233<\/td>\n(params: { current: number; today: number }) => VNode | VNode[]<\/td>\nundefined<\/td>\n<\/tr>\n
renderExtraFooter<\/td>\n\u9762\u677f\u5e95\u90e8\u7684\u989d\u5916\u9875\u811a，\u6e32\u67d3\u5728\u300c\u4eca\u5929\u300d\u300c\u786e\u5b9a\u300d\u7b49\u64cd\u4f5c\u884c\u4e4b\u4e0a<\/td>\n() => VNode | VNode[]<\/td>\nundefined<\/td>\n<\/tr>\n
suffixIcon<\/td>\n\u81ea\u5b9a\u4e49\u9009\u62e9\u6846\u540e\u7f00\u56fe\u6807<\/td>\nVNode | (() => VNode)<\/td>\nundefined<\/td>\n<\/tr>\n
panelClass<\/td>\n\u9762\u677f\u989d\u5916\u7c7b\u540d<\/td>\nstring<\/td>\n\u2018\u2019<\/td>\n<\/tr>\n
panelStyle<\/td>\n\u9762\u677f\u989d\u5916\u6837\u5f0f<\/td>\nCSSProperties<\/td>\nundefined<\/td>\n<\/tr>\n
zIndex<\/td>\n\u9762\u677f\u5c42\u7ea7，\u4f18\u5148\u7ea7\u6700\u9ad8（\u8986\u76d6\u9ed8\u8ba4\u5c42\u7ea7\u4e0e ConfigProvider \u7684 baseZIndex \u81ea\u52a8\u5206\u914d）<\/td>\nnumber<\/td>\nundefined<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DatePickerType Type<\/h4>\n\n\u540d\u79f0\u503c<\/tr>\n\n\n
DatePickerType<\/td>\n\u2018date\u2019 | \u2018datetime\u2019 | \u2018week\u2019 | \u2018month\u2019 | \u2018quarter\u2019 | \u2018year\u2019 | \u2018daterange\u2019 | \u2018datetimerange\u2019 | \u2018weekrange\u2019 | \u2018monthrange\u2019 | \u2018quarterrange\u2019 | \u2018yearrange\u2019<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DatePickerDisabledTime Type<\/h4>\n

\u4e0d\u53ef\u9009\u62e9\u7684\u65f6\u95f4\u5224\u5b9a，\u5165\u53c2\u4e3a\u5f53\u524d\u9762\u677f\u8349\u7a3f\u503c\u7684\u65f6\u95f4\u6233\u3002<\/p>\n\n\u540d\u79f0\u503c<\/tr>\n\n\n
DatePickerDisabledTime<\/td>\n(timestamp: number) => DatePickerDisabledTimeUnits<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DatePickerRangeDisabledTime Type<\/h4>\n

\u8303\u56f4\u5f62\u6001\u7684\u4e0d\u53ef\u9009\u62e9\u65f6\u95f4\u5224\u5b9a，side \u6807\u8bc6\u5f53\u524d\u4f5c\u7528\u5728\u8d77\u70b9\u8fd8\u662f\u7ec8\u70b9\u3002<\/p>\n\n\u540d\u79f0\u503c<\/tr>\n\n\n
DatePickerRangeDisabledTime<\/td>\n(timestamp: number, side: \u2018start\u2019 | \u2018end\u2019) => DatePickerDisabledTimeUnits<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DatePickerDisabledTimeUnits Type<\/h4>\n\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b<\/tr>\n\n\n\n\n
disabledHours?<\/td>\n\u7981\u7528\u7684\u300c\u65f6\u300d<\/td>\n() => number[]<\/td>\n<\/tr>\n
disabledMinutes?<\/td>\n\u7981\u7528\u7684\u300c\u5206\u300d，\u5165\u53c2\u4e3a\u9009\u4e2d\u7684\u300c\u65f6\u300d<\/td>\n(hour: number) => number[]<\/td>\n<\/tr>\n
disabledSeconds?<\/td>\n\u7981\u7528\u7684\u300c\u79d2\u300d，\u5165\u53c2\u4e3a\u9009\u4e2d\u7684\u300c\u65f6\u300d\u300c\u5206\u300d<\/td>\n(hour: number, minute: number) => number[]<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DatePickerTimeProps Type<\/h4>\n\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b<\/tr>\n\n\n\n\n\n\n
hourStep?<\/td>\n\u300c\u65f6\u300d\u7684\u6b65\u957f，\u9ed8\u8ba4 1；\u987b\u80fd\u6574\u9664 24，\u975e\u6cd5\u503c\u6309 1 \u5904\u7406<\/td>\nnumber<\/td>\n<\/tr>\n
minuteStep?<\/td>\n\u300c\u5206\u300d\u7684\u6b65\u957f，\u9ed8\u8ba4 1；\u987b\u80fd\u6574\u9664 60，\u975e\u6cd5\u503c\u6309 1 \u5904\u7406<\/td>\nnumber<\/td>\n<\/tr>\n
secondStep?<\/td>\n\u300c\u79d2\u300d\u7684\u6b65\u957f，\u9ed8\u8ba4 1；\u987b\u80fd\u6574\u9664 60，\u975e\u6cd5\u503c\u6309 1 \u5904\u7406<\/td>\nnumber<\/td>\n<\/tr>\n
use12Hours?<\/td>\n\u662f\u5426\u4f7f\u7528 12 \u5c0f\u65f6\u5236，\u4e0e 12 \u5c0f\u65f6\u5236\u683c\u5f0f（hh）\u914d\u5408\u4f7f\u7528<\/td>\nboolean<\/td>\n<\/tr>\n
hideDisabledOptions?<\/td>\n\u662f\u5426\u9690\u85cf\u7981\u7528\u7684\u9009\u9879<\/td>\nboolean<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DatePickerPreset Type<\/h4>\n\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b<\/tr>\n\n\n\n
label<\/td>\n\u9884\u8bbe\u540d\u79f0<\/td>\nstring | VNode<\/td>\n<\/tr>\n
value<\/td>\n\u9884\u8bbe\u503c：\u5355\u9009\u5f62\u6001\u4e3a\u4e00\u4e2a\u65f6\u95f4\u6233，\u8303\u56f4\u5f62\u6001\u4e3a\u4e24\u6bb5\u5143\u7ec4；\u53ef\u4e3a\u8fd4\u56de\u9884\u8bbe\u503c\u7684\u51fd\u6570（\u70b9\u51fb\u65f6\u624d\u6c42\u503c）<\/td>\nnumber | [number, number] | (() => number | [number, number])<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DatePickerRangeInfo Type<\/h4>\n

\u8303\u56f4\u5f62\u6001\u8349\u7a3f\u53d8\u66f4\u7684\u6765\u6e90\u4fe1\u606f\u3002<\/p>\n\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b<\/tr>\n\n\n
range<\/td>\n\u8349\u7a3f\u53d8\u66f4\u843d\u5728\u54ea\u4e00\u6bb5<\/td>\n\u2018start\u2019 | \u2018end\u2019<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

DefaultFormat Value<\/h4>\n\n\u540d\u79f0\u503c<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
date<\/td>\n\u2018yyyy-MM-dd\u2019<\/td>\n<\/tr>\n
datetime<\/td>\n\u2018yyyy-MM-dd HH:mm:ss\u2019<\/td>\n<\/tr>\n
week<\/td>\n\u2018RRRR-II\u5468\u2019<\/td>\n<\/tr>\n
month<\/td>\n\u2018yyyy-MM\u2019<\/td>\n<\/tr>\n
quarter<\/td>\n\u2018yyyy-QQQ\u2019<\/td>\n<\/tr>\n
year<\/td>\n\u2018yyyy\u2019<\/td>\n<\/tr>\n
daterange<\/td>\n\u2018yyyy-MM-dd\u2019<\/td>\n<\/tr>\n
datetimerange<\/td>\n\u2018yyyy-MM-dd HH:mm:ss\u2019<\/td>\n<\/tr>\n
weekrange<\/td>\n\u2018RRRR-II\u5468\u2019<\/td>\n<\/tr>\n
monthrange<\/td>\n\u2018yyyy-MM\u2019<\/td>\n<\/tr>\n
quarterrange<\/td>\n\u2018yyyy-QQQ\u2019<\/td>\n<\/tr>\n
yearrange<\/td>\n\u2018yyyy\u2019<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

format \u652f\u6301\u7684\u683c\u5f0f\u5316\u5360\u4f4d\u7b26\u5217\u8868<\/h4>\n

format \/ valueFormat \u91c7\u7528 date-fns \u5360\u4f4d\u7b26，\u5e38\u7528\u5360\u4f4d\u7b26：<\/p>\n\n\u6807\u8bc6\u793a\u4f8b\u63cf\u8ff0<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
yy<\/td>\n26<\/td>\n\u5e74，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
yyyy<\/td>\n2026<\/td>\n\u5e74，\u56db\u4f4d\u6570<\/td>\n<\/tr>\n
M<\/td>\n1-12<\/td>\n\u6708<\/td>\n<\/tr>\n
MM<\/td>\n01-12<\/td>\n\u6708，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
Q<\/td>\n1-4<\/td>\n\u5b63\u5ea6<\/td>\n<\/tr>\n
QQQ<\/td>\nQ1-Q4<\/td>\n\u5b63\u5ea6，\u5e26 Q \u524d\u7f00<\/td>\n<\/tr>\n
d<\/td>\n1-31<\/td>\n\u65e5<\/td>\n<\/tr>\n
dd<\/td>\n01-31<\/td>\n\u65e5，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
h<\/td>\n1-12<\/td>\n\u5c0f\u65f6，12 \u5c0f\u65f6\u5236<\/td>\n<\/tr>\n
hh<\/td>\n01-12<\/td>\n\u5c0f\u65f6，12 \u5c0f\u65f6\u5236，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
H<\/td>\n0-23<\/td>\n\u5c0f\u65f6<\/td>\n<\/tr>\n
HH<\/td>\n00-23<\/td>\n\u5c0f\u65f6，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
m<\/td>\n0-59<\/td>\n\u5206\u949f<\/td>\n<\/tr>\n
mm<\/td>\n00-59<\/td>\n\u5206\u949f，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
s<\/td>\n0-59<\/td>\n\u79d2<\/td>\n<\/tr>\n
ss<\/td>\n00-59<\/td>\n\u79d2，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
ww<\/td>\n01-53<\/td>\n\u7b2c\u51e0\u5468，\u4e24\u4f4d\u6570（\u672c\u5730\u5468\u53e3\u5f84）<\/td>\n<\/tr>\n
II<\/td>\n01-53<\/td>\nISO \u5468\u5e8f\u53f7，\u4e24\u4f4d\u6570<\/td>\n<\/tr>\n
RRRR<\/td>\n2026<\/td>\nISO \u5468\u5e74，\u56db\u4f4d\u6570<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u5468\u5f62\u6001\u7684\u9ed8\u8ba4\u683c\u5f0f\u4e3a RRRR-II\u5468（\u5982 2026-41\u5468）：\u300c\u5468\u300d\u662f\u5b57\u9762\u91cf\u540e\u7f00，\u4e2d\u6587\u8bed\u5883\u4e0b\u7528\u4e8e\u6307\u660e\u8be5\u6570\u5b57\u4e3a\u5468\u5e8f\u53f7，\u4e0d\u9700\u8981\u65f6\u4f20\u5165 format="RRRR-II" \u5373\u53ef\u79fb\u9664；date-fns \u4e0d\u5141\u8bb8\u300c\u5468\u5e74 + \u672c\u5730\u5468\u5e8f\u53f7\u300d\u540c\u4e32（yyyy \u4e0e ww \u4f1a\u89e3\u6790\u5931\u8d25），\u6545\u5468\u5e8f\u53f7\u987b\u4e0e\u5468\u5e74\u540c\u4e3a ISO \u53e3\u5f84\u3002<\/p>\n

Slots<\/h3>\n\n\u540d\u79f0\u8bf4\u660e\u7528\u6cd5<\/tr>\n\n\n\n\n\n
dateRender<\/td>\n\u81ea\u5b9a\u4e49\u65e5\u671f\u5355\u5143\u683c\u7684\u5185\u5bb9\u4e0e\u6837\u5f0f（\u66ff\u6362\u65e5\u53f7），\u4f18\u5148\u4e8e\u540c\u540d\u5c5e\u6027<\/td>\nv-slot:dateRender<\/td>\n<\/tr>\n
renderExtraFooter<\/td>\n\u9762\u677f\u5e95\u90e8\u7684\u989d\u5916\u9875\u811a，\u4f18\u5148\u4e8e\u540c\u540d\u5c5e\u6027<\/td>\nv-slot:renderExtraFooter<\/td>\n<\/tr>\n
suffixIcon<\/td>\n\u81ea\u5b9a\u4e49\u9009\u62e9\u6846\u540e\u7f00\u56fe\u6807<\/td>\nv-slot:suffixIcon<\/td>\n<\/tr>\n
separator<\/td>\n\u8303\u56f4\u5f62\u6001\u4e24\u6bb5\u4e4b\u95f4\u7684\u5206\u9694\u7b26<\/td>\nv-slot:separator<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Events<\/h3>\n\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b<\/tr>\n\n\n\n\n\n\n\n\n
change<\/td>\n\u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03<\/td>\n(value: number | [number | null, number | null] | null, formattedValue: string | [string, string] | null) => void<\/td>\n<\/tr>\n
calendarChange<\/td>\n\u8303\u56f4\u5f62\u6001\u5f85\u9009\u533a\u95f4\u53d8\u5316\u65f6\u7684\u56de\u8c03，info.range \u6807\u8bc6\u672c\u6b21\u6539\u52a8\u843d\u5728\u54ea\u4e00\u6bb5<\/td>\n(value: [number | null, number | null] | null, formattedValue: [string, string] | null, info: DatePickerRangeInfo) => void<\/td>\n<\/tr>\n
ok<\/td>\n\u5e26\u65f6\u95f4\u7684\u5f62\u6001\u70b9\u51fb\u300c\u786e\u5b9a\u300d\u65f6\u7684\u56de\u8c03<\/td>\n(value: number | [number | null, number | null] | null, formattedValue: string | [string, string] | null) => void<\/td>\n<\/tr>\n
openChange<\/td>\n\u9762\u677f\u5c55\u5f00\u6536\u8d77\u65f6\u7684\u56de\u8c03<\/td>\n(open: boolean) => void<\/td>\n<\/tr>\n
panelChange<\/td>\n\u9762\u677f\u89c6\u56fe\u5207\u6362\u65f6\u7684\u56de\u8c03<\/td>\n(value: number, mode: string) => void<\/td>\n<\/tr>\n
focus<\/td>\n\u8f93\u5165\u6846\u83b7\u53d6\u7126\u70b9\u65f6\u7684\u56de\u8c03，relatedTarget \u4e3a\u5931\u53bb\u7126\u70b9\u7684\u5143\u7d20<\/td>\n(e: FocusEvent) => void<\/td>\n<\/tr>\n
blur<\/td>\n\u8f93\u5165\u6846\u5931\u7126\u7684\u56de\u8c03，relatedTarget \u4e3a\u83b7\u5f97\u7126\u70b9\u7684\u5143\u7d20<\/td>\n(e: FocusEvent) => void<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Methods<\/h3>\n\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b<\/tr>\n\n\n\n
focus<\/td>\n\u83b7\u53d6\u9009\u62e9\u5668\u7126\u70b9<\/td>\n() => void<\/td>\n<\/tr>\n
blur<\/td>\n\u4f7f\u9009\u62e9\u5668\u5931\u53bb\u7126\u70b9<\/td>\n() => void<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u521b\u5efa\u65e5\u671f\u9009\u62e9\u5668\u7ec4\u4ef6 DatePicker.vue<\/h3>\n

<<\/span>script setup lang=<\/span>"ts"<\/span>><\/span>
\nimport<\/span> {<\/span> computed,<\/span> nextTick,<\/span> ref,<\/span> useSlots,<\/span> watch }<\/span> from<\/span> 'vue'<\/span>
\nimport<\/span> type<\/span> {<\/span> CSSProperties,<\/span> TransitionProps,<\/span> VNode }<\/span> from<\/span> 'vue'<\/span>
\nimport<\/span> Popup from<\/span> 'components\/popup'<\/span>
\nimport<\/span> {<\/span>
\n DatePanel,<\/span>
\n DatetimePanel,<\/span>
\n PickerIcon,<\/span>
\n PickerTrigger,<\/span>
\n PresetPanel,<\/span>
\n RangePanel,<\/span>
\n formatTimestamp,<\/span>
\n getDefaultFormat,<\/span>
\n getDefaultTime,<\/span>
\n getInputSize,<\/span>
\n getPanelModeOf,<\/span>
\n isOutOfRangeBoundary,<\/span>
\n isRangeType,<\/span>
\n PANEL_NAV_KEYS<\/span>,<\/span>
\n parseTimestamp,<\/span>
\n type<\/span> PickerActiveSection<\/span>,<\/span>
\n type<\/span> PickerDateRender<\/span>,<\/span>
\n type<\/span> PickerDateRenderParams<\/span>,<\/span>
\n type<\/span> PickerDefaultTime<\/span>,<\/span>
\n type<\/span> PickerDisabledTime<\/span>,<\/span>
\n type<\/span> PickerFormattedValue<\/span>,<\/span>
\n type<\/span> PickerPanelMode<\/span>,<\/span>
\n type<\/span> PickerPreset<\/span>,<\/span>
\n type<\/span> PickerPresetValue<\/span>,<\/span>
\n type<\/span> PickerRangeDisabledTime<\/span>,<\/span>
\n type<\/span> PickerRangeFormattedValue<\/span>,<\/span>
\n type<\/span> PickerRangeSide<\/span>,<\/span>
\n type<\/span> PickerRangeValue<\/span>,<\/span>
\n type<\/span> PickerSelectSource<\/span>,<\/span>
\n type<\/span> PickerSize<\/span>,<\/span>
\n type<\/span> PickerStatus<\/span>,<\/span>
\n type<\/span> PickerTimePanelProps<\/span>,<\/span>
\n type<\/span> PickerType<\/span>,<\/span>
\n type<\/span> PickerValue<\/span>,<\/span>
\n type<\/span> StartDayOfWeek<\/span>
\n}<\/span> from<\/span> 'components\/picker'<\/span>
\nimport<\/span> type<\/span> {<\/span> FloatingPlacement,<\/span> MountElement }<\/span> from<\/span> 'components\/utils'<\/span>
\nimport<\/span> {<\/span> FLOATING_LAYER_Z_INDEX<\/span>,<\/span> useContainerClose,<\/span> useControlledModel,<\/span> useSlotsExist }<\/span> from<\/span> 'components\/utils'<\/span>
\nexport<\/span> interface<\/span> Props<\/span> {<\/span>
\n value?<\/span>:<\/span> PickerValue \/\/ (v-model:value) \u5f53\u524d\u53d6\u503c；\u4f20\u5165\u5373\u53d7\u63a7<\/span>
\n defaultValue?<\/span>:<\/span> PickerValue \/\/ \u975e\u53d7\u63a7\u521d\u59cb\u503c，\u672a\u7ed1 v-model:value \u65f6\u751f\u6548（\u4e0e\u9762\u677f\u521d\u59cb\u65e5\u671f defaultPickerValue \u4e0d\u540c）<\/span>
\n open?<\/span>:<\/span> boolean<\/span> \/\/ (v-model:open) \u9762\u677f\u662f\u5426\u5c55\u5f00；\u4f20\u5165\u5373\u53d7\u63a7<\/span>
\n \/\/ \u53cc\u5411\u7ed1\u5b9a<\/span>
\n formattedValue?<\/span>:<\/span> PickerFormattedValue \/\/ \u5b57\u7b26\u4e32\u8f68\u9053\u503c：\u7236\u7ec4\u4ef6\u4f20\u5165\u65f6\u4ee5\u5b83\u4e3a\u51c6（\u53d7\u63a7），\u968f\u9009\u62e9\u7ecf update \u4e8b\u4ef6\u56de\u5199<\/span>
\n \/\/ \u5185\u5bb9\u6570\u636e<\/span>
\n type?<\/span>:<\/span> PickerType \/\/ \u9009\u62e9\u5f62\u6001<\/span>
\n format?<\/span>:<\/span> string<\/span> \/\/ \u5c55\u793a\u683c\u5f0f，date-fns \u5360\u4f4d\u7b26，\u9ed8\u8ba4\u968f type \u53d8\u5316<\/span>
\n valueFormat?<\/span>:<\/span> string<\/span> \/\/ \u7ed1\u5b9a\u503c\u683c\u5f0f，\u9ed8\u8ba4\u4e0e format \u76f8\u540c<\/span>
\n placeholder?<\/span>:<\/span> string<\/span> |<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> \/\/ \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57，\u8303\u56f4\u5f62\u6001\u53ef\u5206\u522b\u4e3a\u4e24\u6bb5\u6307\u5b9a<\/span>
\n defaultPickerValue?<\/span>:<\/span> number<\/span> \/\/ \u9762\u677f\u521d\u59cb\u65e5\u671f（\u65f6\u95f4\u6233），\u9ed8\u8ba4\u53d6 value \u6216\u4eca\u5929<\/span>
\n startDayOfWeek?<\/span>:<\/span> StartDayOfWeek \/\/ \u4e00\u5468\u8d77\u59cb\u65e5，0 \u4e3a\u5468\u4e00<\/span>
\n disabledDate?<\/span>:<\/span> (<\/span>timestamp:<\/span> number<\/span>)<\/span> =><\/span> boolean<\/span> \/\/ \u4e0d\u53ef\u9009\u62e9\u7684\u65e5\u671f<\/span>
\n disabledTime?<\/span>:<\/span> PickerDisabledTime |<\/span> PickerRangeDisabledTime \/\/ \u4e0d\u53ef\u9009\u62e9\u7684\u65f6\u95f4，\u4ec5\u5e26\u65f6\u95f4\u5f62\u6001\u751f\u6548（\u8303\u56f4\u5f62\u6001\u989d\u5916\u63a5\u6536\u6bb5\u6807\u8bc6）<\/span>
\n defaultTime?<\/span>:<\/span> PickerDefaultTime \/\/ \u7a7a\u8349\u7a3f\u65f6\u7684\u9ed8\u8ba4\u65f6\u5206\u79d2（\u53ea\u53d6\u5176\u4e2d\u7684\u65f6\u5206\u79d2），\u8303\u56f4\u5f62\u6001\u53ef\u6309\u6bb5\u6307\u5b9a<\/span>
\n timePickerProps?<\/span>:<\/span> PickerTimePanelProps \/\/ \u65f6\u95f4\u9762\u677f\u9009\u9879（\u6b65\u957f \/ 12 \u5c0f\u65f6\u5236 \/ \u9690\u85cf\u7981\u7528\u9879）<\/span>
\n presets?<\/span>:<\/span> PickerPreset[<\/span>]<\/span> \/\/ \u9884\u8bbe\u9009\u9879，\u70b9\u51fb\u5373\u63d0\u4ea4\u5e76\u6536\u8d77；\u8303\u56f4\u4e3a\u4e24\u6bb5\u5143\u7ec4，\u503c\u53ef\u4e3a\u60f0\u6027\u6c42\u503c\u7684\u51fd\u6570<\/span>
\n \/\/ \u5f62\u6001\u5916\u89c2<\/span>
\n width?<\/span>:<\/span> string<\/span> |<\/span> number<\/span> \/\/ \u9009\u62e9\u5668\u5bbd\u5ea6，\u4e0d\u4f20\u65f6\u968f\u5185\u5bb9\u81ea\u9002\u5e94<\/span>
\n size?<\/span>:<\/span> PickerSize \/\/ \u9009\u62e9\u5668\u5927\u5c0f<\/span>
\n status?<\/span>:<\/span> PickerStatus \/\/ \u6821\u9a8c\u72b6\u6001<\/span>
\n bordered?<\/span>:<\/span> boolean<\/span> \/\/ \u662f\u5426\u5c55\u793a\u8fb9\u6846<\/span>
\n \/\/ \u72b6\u6001\u53cd\u9988<\/span>
\n disabled?<\/span>:<\/span> boolean<\/span> |<\/span> [<\/span>boolean<\/span>,<\/span> boolean<\/span>]<\/span> \/\/ \u662f\u5426\u7981\u7528，\u8303\u56f4\u5f62\u6001\u53ef\u4f20\u4e24\u6bb5\u5143\u7ec4\u9010\u6bb5\u7981\u7528<\/span>
\n allowClear?<\/span>:<\/span> boolean<\/span> \/\/ \u662f\u5426\u5c55\u793a\u6e05\u9664\u6309\u94ae<\/span>
\n allowEmpty?<\/span>:<\/span> [<\/span>boolean<\/span>,<\/span> boolean<\/span>]<\/span> \/\/ \u8303\u56f4\u5f62\u6001\u5404\u6bb5\u662f\u5426\u5141\u8bb8\u4e3a\u7a7a，\u4e3a\u7a7a\u65f6\u8be5\u6bb5\u53ef\u88ab\u5355\u72ec\u6e05\u7a7a\u5e76\u5bf9\u5916\u63d0\u4ea4<\/span>
\n inputReadOnly?<\/span>:<\/span> boolean<\/span> \/\/ \u8f93\u5165\u6846\u662f\u5426\u53ea\u8bfb（\u907f\u514d\u79fb\u52a8\u7aef\u5524\u8d77\u952e\u76d8）<\/span>
\n \/\/ \u884c\u4e3a\u4ea4\u4e92<\/span>
\n to?<\/span>:<\/span> string<\/span> |<\/span> MountElement |<\/span> false<\/span> \/\/ \u9762\u677f\u6302\u8f7d\u7684\u5bb9\u5668\u8282\u70b9，\u4e0d\u4f20\u65f6\u5c31\u8fd1\u6302\u8f7d\u5230\u627f\u8f7d\u5c42\u5185\u5bb9\u5bb9\u5668<\/span>
\n placement?<\/span>:<\/span> 'topLeft'<\/span> |<\/span> 'top'<\/span> |<\/span> 'topRight'<\/span> |<\/span> 'bottomLeft'<\/span> |<\/span> 'bottom'<\/span> |<\/span> 'bottomRight'<\/span> \/\/ \u9762\u677f\u5f39\u51fa\u4f4d\u7f6e<\/span>
\n \/\/ \u8303\u56f4\u5f62\u6001\u7684\u9762\u677f\u6307\u793a\u7bad\u5934：\u4e0d\u4f20\u65f6\u8ddf\u968f\u5f39\u51fa\u65b9\u4f4d（\u4ec5\u5de6\u4fa7\u5bf9\u9f50\u7684 bottomLeft \/ topLeft \u5c55\u793a），<\/span>
\n \/\/ \u4f20 true \u59cb\u7ec8\u5c55\u793a\u3001\u4f20 false \u59cb\u7ec8\u9690\u85cf，\u4ec5\u8303\u56f4\u5f62\u6001\u751f\u6548<\/span>
\n showArrow?<\/span>:<\/span> boolean<\/span>
\n showToday?<\/span>:<\/span> boolean<\/span> \/\/ \u662f\u5426\u5c55\u793a\u9762\u677f\u5e95\u90e8\u7684\u300c\u4eca\u5929\u300d\u5feb\u6377，\u9762\u677f\u5207\u5230\u5468 \/ \u6708 \/ \u5b63 \/ \u5e74\u89c6\u56fe\u65f6\u9690\u85cf<\/span>
\n showNow?<\/span>:<\/span> boolean<\/span> \/\/ \u662f\u5426\u5c55\u793a\u9762\u677f\u5e95\u90e8\u7684\u300c\u6b64\u523b\u300d\u5feb\u6377，\u4ec5\u5e26\u65f6\u95f4\u5f62\u6001\u751f\u6548<\/span>
\n \/\/ \u8fdb\u9636\u900f\u4f20<\/span>
\n dateRender?<\/span>:<\/span> (<\/span>params:<\/span> PickerDateRenderParams)<\/span> =><\/span> VNode |<\/span> VNode[<\/span>]<\/span> \/\/ \u81ea\u5b9a\u4e49\u65e5\u671f\u5355\u5143\u683c\u5185\u5bb9（\u66ff\u6362\u65e5\u53f7），\u5165\u53c2 current \u4e3a\u8be5\u683c\u65e5\u671f\u7684\u96f6\u70b9\u65f6\u95f4\u6233<\/span>
\n renderExtraFooter?<\/span>:<\/span> (<\/span>)<\/span> =><\/span> VNode |<\/span> VNode[<\/span>]<\/span> \/\/ \u9762\u677f\u5e95\u90e8\u7684\u989d\u5916\u9875\u811a，\u6e32\u67d3\u5728\u64cd\u4f5c\u884c\u4e4b\u4e0a<\/span>
\n suffixIcon?<\/span>:<\/span> VNode |<\/span> (<\/span>(<\/span>)<\/span> =><\/span> VNode)<\/span> \/\/ \u81ea\u5b9a\u4e49\u9009\u62e9\u6846\u540e\u7f00\u56fe\u6807<\/span>
\n panelClass?<\/span>:<\/span> string<\/span> \/\/ \u9762\u677f\u989d\u5916\u7c7b\u540d<\/span>
\n panelStyle?<\/span>:<\/span> CSSProperties \/\/ \u9762\u677f\u989d\u5916\u6837\u5f0f<\/span>
\n zIndex?<\/span>:<\/span> number<\/span> \/\/ \u9762\u677f\u5c42\u7ea7，\u4f18\u5148\u7ea7\u6700\u9ad8<\/span>
\n}<\/span>
\n\/** \u8303\u56f4\u5f62\u6001\u8349\u7a3f\u53d8\u66f4\u7684\u6765\u6e90\u4fe1\u606f：\u672c\u6b21\u6539\u52a8\u843d\u5728\u54ea\u4e00\u6bb5 *\/<\/span>
\nexport<\/span> interface<\/span> DatePickerRangeInfo<\/span> {<\/span>
\n range:<\/span> PickerRangeSide
\n}<\/span>
\nexport<\/span> interface<\/span> DatePickerSlots<\/span> {<\/span>
\n suffixIcon?<\/span>:<\/span> (<\/span>)<\/span> =><\/span> VNode[<\/span>]<\/span> \/\/ \u81ea\u5b9a\u4e49\u9009\u62e9\u6846\u540e\u7f00\u56fe\u6807，\u4f18\u5148\u4e8e\u540c\u540d prop<\/span>
\n separator?<\/span>:<\/span> (<\/span>)<\/span> =><\/span> VNode[<\/span>]<\/span> \/\/ \u8303\u56f4\u5f62\u6001\u4e24\u6bb5\u4e4b\u95f4\u7684\u5206\u9694\u7b26，\u9ed8\u8ba4\u53f3\u5411\u7bad\u5934<\/span>
\n dateRender?<\/span>:<\/span> (<\/span>params:<\/span> PickerDateRenderParams)<\/span> =><\/span> VNode[<\/span>]<\/span> \/\/ \u81ea\u5b9a\u4e49\u65e5\u671f\u5355\u5143\u683c\u5185\u5bb9（\u66ff\u6362\u65e5\u53f7），\u4f18\u5148\u4e8e\u540c\u540d prop<\/span>
\n renderExtraFooter?<\/span>:<\/span> (<\/span>)<\/span> =><\/span> VNode[<\/span>]<\/span> \/\/ \u9762\u677f\u5e95\u90e8\u7684\u989d\u5916\u9875\u811a，\u4f18\u5148\u4e8e\u540c\u540d prop<\/span>
\n}<\/span>
\n\/**
\n * \u5bf9\u5916\u516c\u5f00\u7684\u503c\u4e0e\u914d\u7f6e\u7c7b\u578b
\n *
\n * \u9009\u62e9\u5668\u5185\u6838（`components\/picker`）\u4e0d\u5bf9\u5916\u5bfc\u51fa，\u8fd9\u91cc\u6309\u672c\u7ec4\u4ef6\u6587\u6863\u6240\u5f15\u7528\u7684\u7c7b\u578b\u540d\u9010\u4e2a\u522b\u540d\u8f6c\u51fa，
\n * \u4f7f\u7528\u65b9 `import type { DatePickerXxx } from 'vue-amazing-ui'` \u5373\u53ef\u83b7\u5f97\u5bf9\u5e94\u63d0\u793a
\n *\/<\/span>
\nexport<\/span> type<\/span> {<\/span>
\n PickerValue as<\/span> DatePickerValue,<\/span>
\n PickerFormattedValue as<\/span> DatePickerFormattedValue,<\/span>
\n PickerType as<\/span> DatePickerType,<\/span>
\n PickerDisabledTime as<\/span> DatePickerDisabledTime,<\/span>
\n PickerRangeDisabledTime as<\/span> DatePickerRangeDisabledTime,<\/span>
\n PickerDisabledTimeUnits as<\/span> DatePickerDisabledTimeUnits,<\/span>
\n PickerTimePanelProps as<\/span> DatePickerTimeProps,<\/span>
\n PickerPreset as<\/span> DatePickerPreset
\n}<\/span> from<\/span> 'components\/picker'<\/span>
\n\/\/ value \/ open \u4e3a\u53d7\u63a7\u5b57\u6bb5：prop \u9ed8\u8ba4\u503c\u5fc5\u987b\u662f undefined（\u5e03\u5c14\u7f3a\u7701\u4f1a\u88ab\u5f3a\u8f6c\u4e3a false，\u5bfc\u81f4\u5224\u636e\u6052\u4e3a\u53d7\u63a7）<\/span>
\n\/\/ \u975e\u53d7\u63a7\u521d\u503c\u7531 useControlledModel \u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u627f\u62c5<\/span>
\nconst<\/span> props =<\/span> withDefaults<\/span>(<\/span>defineProps<\/span><<\/span>Props><\/span><\/span><\/span>(<\/span>)<\/span>,<\/span> {<\/span>
\n value:<\/span> undefined<\/span>,<\/span>
\n defaultValue:<\/span> undefined<\/span>,<\/span>
\n open:<\/span> undefined<\/span>,<\/span>
\n formattedValue:<\/span> undefined<\/span>,<\/span>
\n type:<\/span> 'date'<\/span>,<\/span>
\n format:<\/span> undefined<\/span>,<\/span>
\n valueFormat:<\/span> undefined<\/span>,<\/span>
\n placeholder:<\/span> ''<\/span>,<\/span>
\n defaultPickerValue:<\/span> undefined<\/span>,<\/span>
\n startDayOfWeek:<\/span> 0<\/span>,<\/span>
\n disabledDate:<\/span> undefined<\/span>,<\/span>
\n disabledTime:<\/span> undefined<\/span>,<\/span>
\n defaultTime:<\/span> undefined<\/span>,<\/span>
\n timePickerProps:<\/span> undefined<\/span>,<\/span>
\n presets<\/span>:<\/span> (<\/span>)<\/span> =><\/span> [<\/span>]<\/span>,<\/span>
\n width:<\/span> undefined<\/span>,<\/span>
\n size:<\/span> 'middle'<\/span>,<\/span>
\n status:<\/span> undefined<\/span>,<\/span>
\n bordered:<\/span> true<\/span>,<\/span>
\n disabled:<\/span> false<\/span>,<\/span>
\n allowClear:<\/span> true<\/span>,<\/span>
\n allowEmpty<\/span>:<\/span> (<\/span>)<\/span> =><\/span> [<\/span>false<\/span>,<\/span> false<\/span>]<\/span>,<\/span>
\n inputReadOnly:<\/span> false<\/span>,<\/span>
\n to:<\/span> undefined<\/span>,<\/span>
\n placement:<\/span> 'bottomLeft'<\/span>,<\/span>
\n showArrow:<\/span> undefined<\/span>,<\/span>
\n showToday:<\/span> true<\/span>,<\/span>
\n showNow:<\/span> true<\/span>,<\/span>
\n dateRender:<\/span> undefined<\/span>,<\/span>
\n renderExtraFooter:<\/span> undefined<\/span>,<\/span>
\n suffixIcon:<\/span> undefined<\/span>,<\/span>
\n panelClass:<\/span> ''<\/span>,<\/span>
\n panelStyle:<\/span> undefined<\/span>,<\/span>
\n zIndex:<\/span> undefined<\/span>
\n}<\/span>)<\/span>
\ndefineSlots<\/span><<\/span>DatePickerSlots><\/span><\/span><\/span>(<\/span>)<\/span>
\nconst<\/span> emits =<\/span> defineEmits<\/span><<\/span>{<\/span>
\n change:<\/span> [<\/span>value:<\/span> PickerValue,<\/span> formattedValue:<\/span> PickerFormattedValue]<\/span>
\n calendarChange:<\/span> [<\/span>
\n value:<\/span> PickerRangeValue |<\/span> null<\/span>,<\/span>
\n formattedValue:<\/span> PickerRangeFormattedValue |<\/span> null<\/span>,<\/span>
\n info:<\/span> DatePickerRangeInfo
\n ]<\/span>
\n ok:<\/span> [<\/span>value:<\/span> PickerValue,<\/span> formattedValue:<\/span> PickerFormattedValue]<\/span>
\n 'update:formattedValue'<\/span>:<\/span> [<\/span>value:<\/span> PickerFormattedValue]<\/span>
\n 'update:value'<\/span>:<\/span> [<\/span>value:<\/span> PickerValue]<\/span>
\n 'update:open'<\/span>:<\/span> [<\/span>open:<\/span> boolean<\/span>]<\/span>
\n openChange:<\/span> [<\/span>open:<\/span> boolean<\/span>]<\/span>
\n panelChange:<\/span> [<\/span>value:<\/span> number<\/span>,<\/span> mode:<\/span> PickerPanelMode]<\/span>
\n focus:<\/span> [<\/span>event:<\/span> FocusEvent]<\/span>
\n blur:<\/span> [<\/span>event:<\/span> FocusEvent]<\/span>
\n}<\/span>><\/span><\/span><\/span>(<\/span>)<\/span>
\nconst<\/span> valueModel =<\/span> useControlledModel<\/span><<\/span>PickerValue><\/span><\/span><\/span>(<\/span>'value'<\/span>,<\/span> props.<\/span>defaultValue ??<\/span> null<\/span>)<\/span>
\nconst<\/span> openModel =<\/span> useControlledModel<\/span><<\/span>boolean<\/span>><\/span><\/span><\/span>(<\/span>'open'<\/span>,<\/span> false<\/span>)<\/span>
\nconst<\/span> triggerRef =<\/span> ref<\/span><<\/span>InstanceType<<\/span>typeof<\/span> PickerTrigger><\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> popupRef =<\/span> ref<\/span><<\/span>InstanceType<<\/span>typeof<\/span> Popup><\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> wrapperRef =<\/span> ref<\/span><<\/span>HTMLElement |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u6d6e\u5c42\u4e0e\u89e6\u53d1\u5668\u7684\u4e3b\u8f74\u95f4\u8ddd（\u5355\u6bb5\u5f62\u6001） *\/<\/span>
\nconst<\/span> POPUP_OFFSET<\/span> =<\/span> 4<\/span>
\n\/** \u9762\u677f\u6307\u793a\u7bad\u5934\u7684\u5c3a\u5bf8，\u4e0e `.datepicker-range-arrow` \u7684\u5bbd\u9ad8\u4fdd\u6301\u4e00\u81f4 *\/<\/span>
\nconst<\/span> RANGE_ARROW_SIZE<\/span> =<\/span> 16<\/span>
\n\/**
\n * \u8303\u56f4\u5f62\u6001\u7684\u6d6e\u5c42\u95f4\u8ddd
\n *
\n * \u9700\u989d\u5916\u7559\u51fa\u7bad\u5934\u6240\u5728\u7684\u4e00\u6bb5\u7a7a\u767d（\u7bad\u5934\u5c3a\u5bf8\u7684 2 \/ 3），
\n * \u5426\u5219 16px \u7684\u7bad\u5934\u4f1a\u538b\u4f4f\u89e6\u53d1\u5668\u7684\u5e95\u8fb9\u3001\u76d6\u6389\u8f93\u5165\u533a\u4e0b\u6cbf\u3002
\n *\/<\/span>
\nconst<\/span> RANGE_POPUP_OFFSET<\/span> =<\/span> POPUP_OFFSET<\/span> +<\/span> (<\/span>RANGE_ARROW_SIZE<\/span> *<\/span> 2<\/span>)<\/span> \/<\/span> 3<\/span>
\n\/** \u5e26\u9762\u677f\u6307\u793a\u7bad\u5934\u7684\u5f39\u51fa\u65b9\u4f4d（\u4ec5\u5de6\u4fa7\u5bf9\u9f50\u7684\u4e24\u4e2a\u65b9\u4f4d，\u5176\u4f59\u65b9\u4f4d\u53ea\u5c55\u793a\u9762\u677f） *\/<\/span>
\nconst<\/span> ARROW_PLACEMENTS<\/span>:<\/span> FloatingPlacement[<\/span>]<\/span> =<\/span> [<\/span>'bottomLeft'<\/span>,<\/span> 'topLeft'<\/span>]<\/span>
\n\/\/ \u4e3b\u9898\u53d8\u91cf\u968f\u7ec4\u4ef6\u58f3\u4e0b\u53d1，\u6d6e\u5c42\u7ecf Teleport \u540e\u4e0d\u5728\u58f3\u5185，\u9700\u540c\u6837\u6ce8\u5165\u5230\u9762\u677f\u4e0a<\/span>
\nconst<\/span> themeVars =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>{<\/span>
\n '–picker-primary-color'<\/span>:<\/span> 'var(–va-cp-date-picker-primary-color, var(–va-primary-color))'<\/span>,<\/span>
\n '–picker-primary-color-hover'<\/span>:<\/span> 'var(–va-cp-date-picker-primary-color-hover, var(–va-primary-color-hover))'<\/span>,<\/span>
\n '–picker-primary-shadow-color'<\/span>:<\/span> 'var(–va-cp-date-picker-primary-bg-color, var(–va-primary-bg-color))'<\/span>,<\/span>
\n \/\/ \u533a\u95f4\u5e95\u8272\u53d6\u4e3b\u8272\u6d45\u5e95<\/span>
\n '–picker-primary-color-bg'<\/span>:<\/span> 'var(–va-cp-date-picker-primary-bg-color, var(–va-primary-bg-color))'<\/span>,<\/span>
\n \/\/ \u952e\u76d8\u6d3b\u52a8\u5217\u7684\u5e95\u7eb9：\u4e3b\u8272\u6d45\u5e95，\u6d45\u5230\u4e0d\u62a2\u683c\u5185\u5bb9<\/span>
\n '–picker-time-column-active-bg'<\/span>:<\/span> 'var(–va-cp-date-picker-primary-bg-color, var(–va-primary-bg-color))'<\/span>,<\/span>
\n \/\/ \u60ac\u6d6e\u9884\u89c8\u7684\u5e95\u8272\u4e0e\u865a\u7ebf\u8fb9\u754c<\/span>
\n '–picker-primary-color-bg-hover'<\/span>:<\/span> 'var(–va-cp-date-picker-primary-bg-color, var(–va-primary-bg-color))'<\/span>,<\/span>
\n '–picker-hover-border-color'<\/span>:<\/span> 'var(–va-cp-date-picker-primary-border-color, var(–va-primary-border-color))'<\/span>
\n}<\/span>)<\/span>)<\/span>
\nconst<\/span> wrapperStyle =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> width =<\/span>
\n props.<\/span>width ===<\/span> undefined<\/span> ?<\/span> undefined<\/span> :<\/span> typeof<\/span> props.<\/span>width ===<\/span> 'number'<\/span> ?<\/span> `<\/span>${<\/span>props.<\/span>width}<\/span><\/span>px<\/span>`<\/span><\/span> :<\/span> props.<\/span>width
\n return<\/span> {<\/span> …<\/span>themeVars.<\/span>value,<\/span> '–datepicker-width'<\/span>:<\/span> width ??<\/span> 'auto'<\/span> }<\/span> as<\/span> CSSProperties
\n}<\/span>)<\/span>
\nconst<\/span> mergedPanelClass =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> [<\/span>'datepicker-panel-container'<\/span>,<\/span> props.<\/span>panelClass]<\/span>.<\/span>filter<\/span>(<\/span>Boolean)<\/span>.<\/span>join<\/span>(<\/span>' '<\/span>)<\/span>)<\/span>
\n\/\/ \u663e\u5f0f\u6807\u6ce8\u63d2\u69fd\u7c7b\u578b：`useSlots()` \u7684\u8fd4\u56de\u503c\u53c2\u4e0e `mergedDateRender` \/ `mergedExtraFooter` \u7684\u63a8\u5bfc，\u6784\u6210\u63a8\u65ad\u73af<\/span>
\nconst<\/span> slots:<\/span> DatePickerSlots =<\/span> useSlots<\/span>(<\/span>)<\/span>
\nconst<\/span> slotsExist =<\/span> useSlotsExist<\/span>(<\/span>[<\/span>'dateRender'<\/span>,<\/span> 'renderExtraFooter'<\/span>]<\/span>)<\/span>
\n\/**
\n * \u65e5\u671f\u5355\u5143\u683c\u5185\u5bb9\u5b9a\u5236：\u540c\u540d\u63d2\u69fd\u4f18\u5148\u4e8e prop，\u4e24\u8f68\u7edf\u4e00\u4e3a\u300c\u5165\u53c2 \u2192 VNode[]\u300d\u7684\u51fd\u6570\u4e0b\u53d1\u7ed9\u5185\u6838
\n * （\u5185\u6838\u53ea\u6536\u51fd\u6570：VNode \u9700\u5728\u5176\u6e32\u67d3\u4e0a\u4e0b\u6587\u5185\u521b\u5efa，`computed` \u91cc\u76f4\u63a5\u6c42\u503c\u4f1a\u4ea7\u751f\u300c\u65e0\u4e3b\u7684 hoisted vnode\u300d）
\n *\/<\/span>
\nconst<\/span> mergedDateRender =<\/span> computed<\/span><<\/span>PickerDateRender |<\/span> undefined<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>slotsExist.<\/span>dateRender)<\/span> {<\/span>
\n return<\/span> (<\/span>params)<\/span> =><\/span> slots.<\/span>dateRender?.<\/span>(<\/span>params)<\/span> ??<\/span> [<\/span>]<\/span>
\n }<\/span>
\n const<\/span> render =<\/span> props.<\/span>dateRender
\n if<\/span> (<\/span>!<\/span>render)<\/span> {<\/span>
\n return<\/span> undefined<\/span>
\n }<\/span>
\n return<\/span> (<\/span>params)<\/span> =><\/span> {<\/span>
\n const<\/span> node =<\/span> render<\/span>(<\/span>params)<\/span>
\n return<\/span> Array<\/span>.<\/span>isArray<\/span>(<\/span>node)<\/span> ?<\/span> node :<\/span> [<\/span>node]<\/span>
\n }<\/span>
\n}<\/span>)<\/span>
\n\/** \u9762\u677f\u5e95\u90e8\u7684\u989d\u5916\u9875\u811a：\u540c\u540d\u63d2\u69fd\u4f18\u5148\u4e8e prop，\u540c\u6837\u4ee5\u6e32\u67d3\u51fd\u6570\u4e0b\u53d1 *\/<\/span>
\nconst<\/span> mergedExtraFooter =<\/span> computed<<\/span>(<\/span>(<\/span>)<\/span> =><\/span> VNode[<\/span>]<\/span>)<\/span> |<\/span> undefined<\/span>><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>slotsExist.<\/span>renderExtraFooter)<\/span> {<\/span>
\n return<\/span> (<\/span>)<\/span> =><\/span> slots.<\/span>renderExtraFooter?.<\/span>(<\/span>)<\/span> ??<\/span> [<\/span>]<\/span>
\n }<\/span>
\n const<\/span> render =<\/span> props.<\/span>renderExtraFooter
\n if<\/span> (<\/span>!<\/span>render)<\/span> {<\/span>
\n return<\/span> undefined<\/span>
\n }<\/span>
\n return<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> node =<\/span> render<\/span>(<\/span>)<\/span>
\n return<\/span> Array<\/span>.<\/span>isArray<\/span>(<\/span>node)<\/span> ?<\/span> node :<\/span> [<\/span>node]<\/span>
\n }<\/span>
\n}<\/span>)<\/span>
\n\/** \u662f\u5426\u4e3a\u5e26\u65f6\u95f4\u9762\u677f\u7684\u5f62\u6001：\u65e5\u671f\u4e0e\u65f6\u95f4\u5e76\u6392，\u9009\u62e9\u53ea\u6539\u8349\u7a3f，\u70b9\u300c\u786e\u5b9a\u300d\u624d\u63d0\u4ea4 *\/<\/span>
\nconst<\/span> isDateTime =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> props.<\/span>type ===<\/span> 'datetime'<\/span>)<\/span>
\n\/** \u662f\u5426\u4e3a\u8303\u56f4\u5f62\u6001：\u53cc\u9762\u677f\u3001\u53cc\u6bb5\u8f93\u5165\u3001\u503c\u4e3a\u4e24\u6bb5\u5143\u7ec4 *\/<\/span>
\nconst<\/span> isRange =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> isRangeType<\/span>(<\/span>props.<\/span>type)<\/span>)<\/span>
\n\/**
\n * \u9010\u6bb5\u7981\u7528\u72b6\u6001：\u8303\u56f4\u5f62\u6001\u652f\u6301\u4e24\u6bb5\u5143\u7ec4\u9010\u6bb5\u7981\u7528；\u5355\u9009\u5f62\u6001\u53ea\u63a5\u53d7\u5e03\u5c14\u503c，\u4f20\u6570\u7ec4\u65f6\u4efb\u4e00\u9879\u4e3a\u771f\u5373\u89c6\u4e3a
\n * \u6574\u4f53\u7981\u7528（\u907f\u514d\u300c\u4f20\u4e86\u6570\u7ec4\u5374\u88ab\u9759\u9ed8\u5f53\u6210\u542f\u7528\u300d\u8fd9\u7c7b\u6b67\u4e49）
\n *\/<\/span>
\nconst<\/span> disabledSides =<\/span> computed<\/span><<\/span>[<\/span>boolean<\/span>,<\/span> boolean<\/span>]<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> {<\/span> disabled }<\/span> =<\/span> props
\n if<\/span> (<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>disabled)<\/span>)<\/span> {<\/span>
\n return<\/span> isRange.<\/span>value ?<\/span> [<\/span>disabled[<\/span>0<\/span>]<\/span>,<\/span> disabled[<\/span>1<\/span>]<\/span>]<\/span> :<\/span> [<\/span>disabled[<\/span>0<\/span>]<\/span> ||<\/span> disabled[<\/span>1<\/span>]<\/span>,<\/span> disabled[<\/span>0<\/span>]<\/span> ||<\/span> disabled[<\/span>1<\/span>]<\/span>]<\/span>
\n }<\/span>
\n return<\/span> [<\/span>disabled,<\/span> disabled]<\/span>
\n}<\/span>)<\/span>
\n\/** \u662f\u5426\u6574\u4f53\u7981\u7528：\u8303\u56f4\u5f62\u6001\u4e24\u6bb5\u90fd\u7981\u7528\u3001\u5355\u9009\u5f62\u6001\u540c\u6bb5\u72b6\u6001 *\/<\/span>
\nconst<\/span> fullyDisabled =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> disabledSides.<\/span>value[<\/span>0<\/span>]<\/span> &&<\/span> disabledSides.<\/span>value[<\/span>1<\/span>]<\/span>)<\/span>
\n\/** \u662f\u5426\u4e3a\u65e5\u671f\u65f6\u95f4\u8303\u56f4\u5f62\u6001：\u5355\u4e2a\u65e5\u671f\u65f6\u95f4\u9762\u677f，\u4e24\u6bb5\u9760\u300c\u786e\u5b9a\u300d\u5207\u6362\u7f16\u8f91 *\/<\/span>
\nconst<\/span> isDateTimeRange =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> props.<\/span>type ===<\/span> 'datetimerange'<\/span>)<\/span>
\n\/** \u5f62\u6001\u5bf9\u5e94\u7684\u9762\u677f\u5c42\u7ea7：\u5468 \/ \u6708 \/ \u5b63 \/ \u5e74\u5f62\u6001\u76f4\u63a5\u843d\u5728\u5bf9\u5e94\u5c42\u7ea7，\u65e5\u671f\u4e0e\u5e26\u65f6\u95f4\u5f62\u6001\u843d\u5728\u65e5\u671f\u5c42\u7ea7 *\/<\/span>
\nconst<\/span> panelBaseMode =<\/span> computed<\/span><<\/span>PickerPanelMode><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> getPanelModeOf<\/span>(<\/span>props.<\/span>type)<\/span>)<\/span>
\n\/** \u662f\u5426\u4e3a\u9700\u70b9\u300c\u786e\u5b9a\u300d\u624d\u63d0\u4ea4\u7684\u5f62\u6001（\u542b\u65f6\u95f4\u9762\u677f）：\u9762\u677f\u5185\u7684\u9009\u62e9\u53ea\u843d\u8349\u7a3f，\u5931\u7126\u6309\u53d6\u6d88\u5904\u7406 *\/<\/span>
\nconst<\/span> needConfirm =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> isDateTime.<\/span>value ||<\/span> isDateTimeRange.<\/span>value)<\/span>
\n\/** \u6d6e\u5c42\u4e0e\u89e6\u53d1\u5668\u7684\u95f4\u8ddd：\u8303\u56f4\u5f62\u6001\u989d\u5916\u9884\u7559\u7bad\u5934\u7684\u9ad8\u5ea6 *\/<\/span>
\nconst<\/span> popupOffset =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>isRange.<\/span>value ?<\/span> RANGE_POPUP_OFFSET<\/span> :<\/span> POPUP_OFFSET<\/span>)<\/span>)<\/span>
\n\/** \u5c55\u793a\u683c\u5f0f：\u672a\u6307\u5b9a\u65f6\u968f\u5f62\u6001\u53d6\u9ed8\u8ba4\u503c；\u9762\u677f\u7684\u65f6\u95f4\u5217\u663e\u9690\u4e5f\u6309\u5b83\u63a8\u5bfc *\/<\/span>
\nconst<\/span> mergedFormat =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> props.<\/span>format ??<\/span> getDefaultFormat<\/span>(<\/span>props.<\/span>type)<\/span>)<\/span>
\n\/** \u5c55\u793a\u4e0e\u56de\u5199\u5171\u7528\u7684\u683c\u5f0f：`valueFormat` \u4f18\u5148，\u672a\u6307\u5b9a\u65f6\u8ddf\u968f\u5c55\u793a\u683c\u5f0f *\/<\/span>
\nconst<\/span> mergedValueFormat =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> props.<\/span>valueFormat ??<\/span> mergedFormat.<\/span>value)<\/span>
\n\/** \u8f93\u5165\u6846\u6309\u683c\u5f0f\u957f\u5ea6\u4f30\u5bbd，\u907f\u514d\u6d4f\u89c8\u5668\u6309 20 \u5b57\u7b26\u9ed8\u8ba4\u4f30\u5bbd\u5bfc\u81f4\u89e6\u53d1\u5668\u660e\u663e\u504f\u5bbd *\/<\/span>
\nconst<\/span> inputSize =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> getInputSize<\/span>(<\/span>mergedValueFormat.<\/span>value)<\/span>)<\/span>
\n\/** \u5b57\u7b26\u4e32\u8f68\u9053\u53d7\u63a7：\u7236\u7ec4\u4ef6\u4f20\u5165 `formattedValue` \u65f6\u4ee5\u5b83\u4e3a\u51c6，\u4e0e\u4e3b\u8f68\u9053\u89e3\u8026 *\/<\/span>
\nconst<\/span> formattedControlled =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> props.<\/span>formattedValue !==<\/span> undefined<\/span>)<\/span>
\nconst<\/span> innerValue =<\/span> computed<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>formattedControlled.<\/span>value)<\/span> {<\/span>
\n return<\/span> typeof<\/span> props.<\/span>formattedValue ===<\/span> 'string'<\/span>
\n ?<\/span> parseTimestamp<\/span>(<\/span>props.<\/span>formattedValue,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n :<\/span> null<\/span>
\n }<\/span>
\n return<\/span> typeof<\/span> valueModel.<\/span>value ===<\/span> 'number'<\/span> ?<\/span> valueModel.<\/span>value :<\/span> null<\/span>
\n}<\/span>)<\/span>
\n\/** \u5355\u6bb5\u6587\u672c \u2192 \u65f6\u95f4\u6233（\u7a7a\u6587\u672c\u89c6\u4e3a\u8be5\u6bb5\u672a\u9009） *\/<\/span>
\nfunction<\/span> parseSideTimestamp<\/span>(<\/span>text:<\/span> string<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span>)<\/span>:<\/span> number<\/span> |<\/span> null<\/span> {<\/span>
\n return<\/span> parseTimestamp<\/span>(<\/span>text ??<\/span> ''<\/span>,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n}<\/span>
\n\/** \u5355\u6bb5\u65f6\u95f4\u6233 \u2192 \u5c55\u793a\u6587\u672c（\u8be5\u6bb5\u672a\u9009\u65f6\u4e3a\u7a7a\u5b57\u7b26\u4e32） *\/<\/span>
\nfunction<\/span> formatSideTimestamp<\/span>(<\/span>timestamp:<\/span> number<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span>)<\/span>:<\/span> string<\/span> {<\/span>
\n return<\/span> timestamp ===<\/span> null<\/span> ||<\/span> timestamp ===<\/span> undefined<\/span> ?<\/span> ''<\/span> :<\/span> formatTimestamp<\/span>(<\/span>timestamp,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n}<\/span>
\n\/** \u8303\u56f4\u5f62\u6001\u7684\u5df2\u63d0\u4ea4\u533a\u95f4：\u5b57\u7b26\u4e32\u8f68\u9053\u53d7\u63a7\u65f6\u4ee5\u5176\u4e3a\u51c6，\u7ed3\u6784\u4e0d\u7b26\u6216\u89e3\u6790\u5931\u8d25\u65f6\u8be5\u6bb5\u4e3a\u7a7a *\/<\/span>
\nconst<\/span> rangeValue =<\/span> computed<\/span><<\/span>PickerRangeValue |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>formattedControlled.<\/span>value)<\/span> {<\/span>
\n const<\/span> formatted =<\/span> props.<\/span>formattedValue
\n if<\/span> (<\/span>!<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>formatted)<\/span>)<\/span> {<\/span>
\n return<\/span> null<\/span>
\n }<\/span>
\n return<\/span> [<\/span>parseSideTimestamp<\/span>(<\/span>formatted[<\/span>0<\/span>]<\/span>)<\/span>,<\/span> parseSideTimestamp<\/span>(<\/span>formatted[<\/span>1<\/span>]<\/span>)<\/span>]<\/span>
\n }<\/span>
\n const<\/span> raw =<\/span> valueModel.<\/span>value
\n if<\/span> (<\/span>!<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>raw)<\/span>)<\/span> {<\/span>
\n return<\/span> null<\/span>
\n }<\/span>
\n return<\/span> [<\/span>raw[<\/span>0<\/span>]<\/span>,<\/span> raw[<\/span>1<\/span>]<\/span>]<\/span>
\n}<\/span>)<\/span>
\n\/** \u8349\u7a3f\u503c：\u5e26\u65f6\u95f4\u5f62\u6001\u5728\u9762\u677f\u5c55\u5f00\u671f\u95f4\u53ea\u628a\u9009\u62e9\u843d\u5728\u8349\u7a3f\u4e0a，\u70b9\u300c\u786e\u5b9a\u300d\u624d\u63d0\u4ea4，\u5173\u95ed\u5373\u4e22\u5f03 *\/<\/span>
\nconst<\/span> draftValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u8349\u7a3f\u533a\u95f4：\u8303\u56f4\u5f62\u6001\u7684\u9009\u62e9\u5148\u843d\u8349\u7a3f，\u4e24\u6bb5\u9f50\u5168（\u6216\u8be5\u6bb5\u5141\u8bb8\u4e3a\u7a7a）\u65f6\u624d\u5bf9\u5916\u63d0\u4ea4 *\/<\/span>
\nconst<\/span> draftRange =<\/span> ref<\/span><<\/span>PickerRangeValue |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u8303\u56f4\u5f62\u6001\u5f53\u524d\u6fc0\u6d3b\u7684\u6bb5：\u51b3\u5b9a\u60ac\u6d6e\u9884\u89c8\u4e0e\u4e0b\u4e00\u6b21\u9009\u62e9\u4f5c\u7528\u4e8e\u54ea\u4e00\u7aef *\/<\/span>
\nconst<\/span> activeSide =<\/span> ref<\/span><<\/span>PickerRangeSide><\/span><\/span><\/span>(<\/span>'start'<\/span>)<\/span>
\n\/** \u89e6\u53d1\u5668\u4e0a\u7684\u6fc0\u6d3b\u6bb5\u4e0b\u6807（0 \u4e3a\u8d77\u70b9\u6bb5） *\/<\/span>
\nconst<\/span> activeTriggerIndex =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>activeSide.<\/span>value ===<\/span> 'start'<\/span> ?<\/span> 0<\/span> :<\/span> 1<\/span>)<\/span>)<\/span>
\n\/** \u9762\u677f\u4e0a\u60ac\u6d6e\u7684\u65e5\u671f：\u8303\u56f4\u5f62\u6001\u5728\u5f53\u524d\u6fc0\u6d3b\u6bb5\u3001\u5355\u9009\u5f62\u6001\u5728\u8f93\u5165\u6846\u663e\u793a\u8be5\u65e5\u671f\u7684\u9884\u89c8\u6587\u672c *\/<\/span>
\nconst<\/span> hoverTimestamp =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u9884\u8bbe\u60ac\u6d6e\u4ea7\u751f\u7684\u9884\u89c8\u533a\u95f4：\u8303\u56f4\u5f62\u6001\u636e\u6b64\u5728\u9762\u677f\u4e0a\u9884\u89c8\u8be5\u533a\u95f4（\u4e0d\u6539\u53d8\u5df2\u9009\u503c） *\/<\/span>
\nconst<\/span> presetPreview =<\/span> ref<\/span><<\/span>PickerRangeValue |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u5f53\u524d\u5c55\u793a\u9884\u89c8\u6587\u672c（\u60ac\u6d6e\u9762\u677f\u65e5\u671f\u4ea7\u751f\u7684\u4e34\u65f6\u503c）\u7684\u6bb5：\u8be5\u6bb5\u6587\u5b57\u53d6\u63d0\u793a\u8272 *\/<\/span>
\nconst<\/span> hoverPreviewIndex =<\/span> computed<\/span><<\/span>0<\/span> |<\/span> 1<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n \/\/ \u4f9d\u8d56\u9700\u5148\u8bfb\u53d6：\u6761\u4ef6\u77ed\u8def\u4f1a\u8ba9\u540e\u7eed\u4f9d\u8d56\u5728\u9996\u8f6e\u6c42\u503c\u65f6\u4e0d\u88ab\u6536\u96c6，\u4e4b\u540e\u60ac\u6d6e\u53d8\u5316\u4fbf\u4e0d\u518d\u89e6\u53d1\u91cd\u7b97<\/span>
\n const<\/span> hovered =<\/span> hoverTimestamp.<\/span>value
\n const<\/span> isRangeType =<\/span> isRange.<\/span>value
\n const<\/span> isPanelOpen =<\/span> openModel.<\/span>value
\n if<\/span> (<\/span>!<\/span>isRangeType ||<\/span> !<\/span>isPanelOpen ||<\/span> hovered ===<\/span> null<\/span>)<\/span> {<\/span>
\n return<\/span> null<\/span>
\n }<\/span>
\n return<\/span> activeTriggerIndex.<\/span>value
\n}<\/span>)<\/span>
\n\/** \u5355\u9009\u5f62\u6001\u4e0b\u6b63\u5728\u9884\u89c8\u7684\u65f6\u95f4\u6233（\u9762\u677f\u5c55\u5f00\u4e14\u60ac\u6d6e\u4e86\u65e5\u671f\u683c），\u65e0\u9884\u89c8\u4e3a null *\/<\/span>
\nconst<\/span> singlePreviewTimestamp =<\/span> computed<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n \/\/ \u4f9d\u8d56\u5148\u8bfb\u53d6（\u540c hoverPreviewIndex）：\u6761\u4ef6\u77ed\u8def\u4f1a\u6f0f\u91c7\u4f9d\u8d56，\u60ac\u6d6e\u53d8\u5316\u4fbf\u4e0d\u518d\u89e6\u53d1\u91cd\u7b97<\/span>
\n const<\/span> hovered =<\/span> hoverTimestamp.<\/span>value
\n const<\/span> isRangeType =<\/span> isRange.<\/span>value
\n const<\/span> isPanelOpen =<\/span> openModel.<\/span>value
\n return<\/span> !<\/span>isRangeType &&<\/span> isPanelOpen ?<\/span> hovered :<\/span> null<\/span>
\n}<\/span>)<\/span>
\n\/** \u9762\u677f\u6307\u793a\u7bad\u5934\u76f8\u5bf9\u8f93\u5165\u533a\u5de6\u8fb9\u7f18\u7684\u504f\u79fb：\u4e0e\u6fc0\u6d3b\u6bb5\u4e0b\u5212\u7ebf\u540c\u6e90\u3001\u968f\u6fc0\u6d3b\u6bb5\u5e73\u79fb（\u8303\u56f4\u5f62\u6001\u4e13\u7528） *\/<\/span>
\nconst<\/span> rangeArrowLeft =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>
\n\/** \u672c\u6b21\u5c55\u5f00\u671f\u95f4\u88ab\u6fc0\u6d3b\u8fc7\u7684\u6bb5：\u51b3\u5b9a\u5bf9\u4fa7\u8d8a\u754c\u65e5\u671f\u7684\u7981\u7528（\u6536\u8d77\u5373\u6e05\u7a7a） *\/<\/span>
\nconst<\/span> activatedSides =<\/span> ref<\/span><<\/span>Record<<\/span>PickerRangeSide,<\/span> boolean<\/span>>><\/span><\/span><\/span>(<\/span>{<\/span> start:<\/span> false<\/span>,<\/span> end:<\/span> false<\/span> }<\/span>)<\/span>
\n\/** \u6fc0\u6d3b\u67d0\u6bb5：\u9762\u677f\u5c55\u5f00\u3001\u9009\u5b8c\u4e00\u6bb5\u540e\u5207\u6362\u3001\u805a\u7126\u67d0\u6bb5\u8f93\u5165\u6846\u90fd\u7b97\u4e00\u6b21\u6fc0\u6d3b *\/<\/span>
\nfunction<\/span> activateSide<\/span>(<\/span>side:<\/span> PickerRangeSide)<\/span> {<\/span>
\n activeSide.<\/span>value =<\/span> side
\n activatedSides.<\/span>value[<\/span>side]<\/span> =<\/span> true<\/span>
\n}<\/span>
\n\/** \u6e05\u7a7a\u6bb5\u6fc0\u6d3b\u8bb0\u5f55（\u6536\u8d77\u9762\u677f\u65f6\u8c03\u7528） *\/<\/span>
\nfunction<\/span> resetActivatedSides<\/span>(<\/span>)<\/span> {<\/span>
\n activatedSides.<\/span>value =<\/span> {<\/span> start:<\/span> false<\/span>,<\/span> end:<\/span> false<\/span> }<\/span>
\n}<\/span>
\n\/**
\n * \u9762\u677f\u5c55\u793a\u503c：\u5c55\u5f00\u671f\u95f4\u6709\u8349\u7a3f\u5219\u53d6\u8349\u7a3f，\u5176\u4f59\u60c5\u51b5\u8ddf\u968f\u5df2\u63d0\u4ea4\u503c
\n *
\n * \u8349\u7a3f\u5bf9**\u6240\u6709\u5f62\u6001**\u751f\u6548（\u4e0d\u9650\u4e8e\u5e26\u65f6\u95f4\u5f62\u6001）：\u9f20\u6807\u9009\u62e9\u5728\u5355\u9009\u5f62\u6001\u4e0b\u5373\u65f6\u63d0\u4ea4\u5e76\u6536\u8d77\u3001\u4e0d\u4f1a\u7559\u4e0b\u8349\u7a3f，
\n * \u552f\u4e00\u4f1a\u4ea7\u751f\u8349\u7a3f\u7684\u662f\u952e\u76d8\u5bfc\u822a\u2014\u2014\u5b83\u53ea\u628a\u5149\u6807\u843d\u5728\u8349\u7a3f\u4e0a（\u8fde\u540c\u8f93\u5165\u6846\u6587\u672c），\u7531\u56de\u8f66\u6216\u300c\u786e\u5b9a\u300d\u843d\u503c\u3002
\n *\/<\/span>
\nconst<\/span> panelTimestamp =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> drafting =<\/span> openModel.<\/span>value &&<\/span> draftValue.<\/span>value !==<\/span> null<\/span>
\n return<\/span> drafting ?<\/span> draftValue.<\/span>value :<\/span> innerValue.<\/span>value
\n}<\/span>)<\/span>
\n\/** \u9762\u677f\u5c55\u793a\u533a\u95f4：\u8303\u56f4\u5f62\u6001\u5c55\u5f00\u671f\u95f4\u53d6\u8349\u7a3f，\u5176\u4f59\u60c5\u51b5\u8ddf\u968f\u5df2\u63d0\u4ea4\u503c *\/<\/span>
\nconst<\/span> panelRangeValue =<\/span> computed<\/span><<\/span>PickerRangeValue |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> drafting =<\/span> isRange.<\/span>value &&<\/span> openModel.<\/span>value &&<\/span> draftRange.<\/span>value !==<\/span> null<\/span>
\n return<\/span> drafting ?<\/span> draftRange.<\/span>value :<\/span> rangeValue.<\/span>value
\n}<\/span>)<\/span>
\n\/**
\n * \u8303\u56f4\u5f62\u6001\u7684\u9762\u677f\u7981\u7528\u5224\u5b9a：\u6fc0\u6d3b\u6bb5\u4e3a\u8d77\u70b9\u65f6，\u672c\u6b21\u5c55\u5f00\u4e2d\u7ec8\u70b9\u6bb5\u88ab\u6fc0\u6d3b\u8fc7\u4e14\u6709\u503c \u2192 \u7981\u7528\u300c\u665a\u4e8e\u7ec8\u70b9\u300d\u7684\u65e5\u671f，
\n * \u53cd\u4e4b\u540c\u7406\u3002\u7528\u6237\u4f20\u5165\u7684 `disabledDate` \u59cb\u7ec8\u4f18\u5148
\n *\/<\/span>
\nconst<\/span> mergedRangeDisabledDate =<\/span> computed<<\/span>(<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span> =><\/span> boolean<\/span>)<\/span> |<\/span> undefined<\/span>><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> userDisabledDate =<\/span> props.<\/span>disabledDate
\n if<\/span> (<\/span>!<\/span>isRange.<\/span>value)<\/span> {<\/span>
\n return<\/span> userDisabledDate
\n }<\/span>
\n const<\/span> current =<\/span> panelRangeValue.<\/span>value
\n const<\/span> isStartSide =<\/span> activeSide.<\/span>value ===<\/span> 'start'<\/span>
\n const<\/span> boundary =<\/span> (<\/span>isStartSide ?<\/span> current?.<\/span>[<\/span>1<\/span>]<\/span> :<\/span> current?.<\/span>[<\/span>0<\/span>]<\/span>)<\/span> ??<\/span> null<\/span>
\n const<\/span> otherSideActivated =<\/span> isStartSide ?<\/span> activatedSides.<\/span>value.<\/span>end :<\/span> activatedSides.<\/span>value.<\/span>start
\n \/\/ \u5bf9\u7aef\u6574\u4f53\u7981\u7528\u65f6\u8be5\u6bb5\u88ab\u5bf9\u7aef\u7684\u503c\u9501\u6b7b（\u8d77\u70b9\u4e0d\u5f97\u665a\u4e8e\u5df2\u7981\u7528\u7684\u7ec8\u70b9，\u53cd\u4e4b\u4ea6\u7136）：\u5bf9\u7aef\u4e0d\u4f1a\u518d\u88ab\u6fc0\u6d3b，<\/span>
\n \/\/ \u7ea6\u675f\u56e0\u6b64\u76f4\u63a5\u751f\u6548，\u4e0d\u4ee5\u4e0a\u8ff0\u300c\u5df2\u6fc0\u6d3b\u8fc7\u300d\u4e3a\u524d\u63d0<\/span>
\n const<\/span> otherSideDisabled =<\/span> isStartSide ?<\/span> disabledSides.<\/span>value[<\/span>1<\/span>]<\/span> :<\/span> disabledSides.<\/span>value[<\/span>0<\/span>]<\/span>
\n if<\/span> (<\/span>boundary ===<\/span> null<\/span> ||<\/span> (<\/span>!<\/span>otherSideActivated &&<\/span> !<\/span>otherSideDisabled)<\/span>)<\/span> {<\/span>
\n return<\/span> userDisabledDate
\n }<\/span>
\n return<\/span> (<\/span>timestamp:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>userDisabledDate?.<\/span>(<\/span>timestamp)<\/span>)<\/span> {<\/span>
\n return<\/span> true<\/span>
\n }<\/span>
\n return<\/span> isOutOfRangeBoundary<\/span>(<\/span>timestamp,<\/span> boundary,<\/span> !<\/span>isStartSide)<\/span>
\n }<\/span>
\n}<\/span>)<\/span>
\n\/** \u5355\u9009\u5f62\u6001\u7684\u7981\u7528\u65f6\u95f4：\u5bf9\u5916\u53e3\u5f84\u517c\u5bb9\u4e24\u79cd\u7b7e\u540d，\u6b64\u5904\u53ea\u900f\u4f20\u65f6\u95f4\u6233 *\/<\/span>
\nconst<\/span> singleDisabledTime =<\/span> computed<\/span><<\/span>PickerDisabledTime |<\/span> undefined<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> disabledTime =<\/span> props.<\/span>disabledTime
\n return<\/span> disabledTime ?<\/span> (<\/span>timestamp)<\/span> =><\/span> (<\/span>disabledTime as<\/span> PickerDisabledTime)<\/span>(<\/span>timestamp)<\/span> :<\/span> undefined<\/span>
\n}<\/span>)<\/span>
\n\/** \u65e5\u671f\u65f6\u95f4\u8303\u56f4\u5f62\u6001\u7684\u7981\u7528\u65f6\u95f4：\u6bb5\u6807\u8bc6\u7531\u9762\u677f\u5bb9\u5668\u6309\u5f53\u524d\u6fc0\u6d3b\u6bb5\u6ce8\u5165 *\/<\/span>
\nconst<\/span> rangeDisabledTime =<\/span> computed<\/span><<\/span>PickerRangeDisabledTime |<\/span> undefined<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> disabledTime =<\/span> props.<\/span>disabledTime
\n return<\/span> isDateTimeRange.<\/span>value &&<\/span> disabledTime ?<\/span> (<\/span>disabledTime as<\/span> PickerRangeDisabledTime)<\/span> :<\/span> undefined<\/span>
\n}<\/span>)<\/span>
\n\/** \u5355\u9009\u5f62\u6001\u7684\u9ed8\u8ba4\u65f6\u5206\u79d2：\u6309\u6bb5\u6307\u5b9a\u65f6\u53d6\u9996\u9879（\u5355\u9009\u53ea\u6709\u4e00\u6bb5），\u8303\u56f4\u5f62\u6001\u7531\u8303\u56f4\u9762\u677f\u6309\u6fc0\u6d3b\u6bb5\u53d6 *\/<\/span>
\nconst<\/span> singleDefaultTime =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> getDefaultTime<\/span>(<\/span>props.<\/span>defaultTime)<\/span>)<\/span>
\n\/\/ \u53d7\u63a7\u5b57\u7b26\u4e32\u89e3\u6790\u5931\u8d25\u65f6\u539f\u6837\u5c55\u793a，\u907f\u514d\u7528\u6237\u8f93\u5165\u88ab\u9759\u9ed8\u4e22\u5f03<\/span>
\n\/\/ （\u5b57\u7b26\u4e32\u8f68\u9053\u53d7\u7ba1\u65f6\u5c55\u793a\u4ee5\u53d7\u7ba1\u6587\u672c\u4e3a\u51c6，\u8349\u7a3f\u4e0d\u56de\u5199\u5c55\u793a，\u907f\u514d\u4e0e\u5e94\u7528\u5c42\u6301\u6709\u7684\u6587\u672c\u8131\u8282）<\/span>
\nconst<\/span> displayText =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>formattedControlled.<\/span>value)<\/span> {<\/span>
\n return<\/span> typeof<\/span> props.<\/span>formattedValue ===<\/span> 'string'<\/span> ?<\/span> props.<\/span>formattedValue :<\/span> ''<\/span>
\n }<\/span>
\n \/\/ \u60ac\u6d6e\u9762\u677f\u65e5\u671f\u65f6\u6539\u4e3a\u5c55\u793a\u8be5\u65e5\u671f\u7684\u9884\u89c8\u6587\u672c（\u4e0e\u5c55\u793a\u683c\u5f0f\u540c\u53e3\u5f84，\u4e0d\u5199\u503c）<\/span>
\n const<\/span> preview =<\/span> singlePreviewTimestamp.<\/span>value
\n if<\/span> (<\/span>preview !==<\/span> null<\/span>)<\/span> {<\/span>
\n return<\/span> formatTimestamp<\/span>(<\/span>preview,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n }<\/span>
\n return<\/span> panelTimestamp.<\/span>value ===<\/span> null<\/span> ?<\/span> ''<\/span> :<\/span> formatTimestamp<\/span>(<\/span>panelTimestamp.<\/span>value,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n}<\/span>)<\/span>
\n\/** \u89e6\u53d1\u5668\u4e24\u6bb5\u6587\u672c：\u5b57\u7b26\u4e32\u8f68\u9053\u53d7\u63a7\u65f6\u4ee5\u5176\u4e3a\u51c6，\u5426\u5219\u6309\u5c55\u793a\u683c\u5f0f\u9010\u6bb5\u751f\u6210 *\/<\/span>
\nconst<\/span> displayRangeTexts =<\/span> computed<\/span><<\/span>[<\/span>string<\/span>,<\/span> string<\/span>]<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> formatted =<\/span> props.<\/span>formattedValue
\n let<\/span> texts:<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span>
\n if<\/span> (<\/span>formattedControlled.<\/span>value &&<\/span> Array<\/span>.<\/span>isArray<\/span>(<\/span>formatted)<\/span>)<\/span> {<\/span>
\n texts =<\/span> [<\/span>formatted[<\/span>0<\/span>]<\/span> ??<\/span> ''<\/span>,<\/span> formatted[<\/span>1<\/span>]<\/span> ??<\/span> ''<\/span>]<\/span>
\n }<\/span> else<\/span> {<\/span>
\n const<\/span> current =<\/span> panelRangeValue.<\/span>value
\n texts =<\/span> [<\/span>formatSideTimestamp<\/span>(<\/span>current?.<\/span>[<\/span>0<\/span>]<\/span>)<\/span>,<\/span> formatSideTimestamp<\/span>(<\/span>current?.<\/span>[<\/span>1<\/span>]<\/span>)<\/span>]<\/span>
\n }<\/span>
\n \/\/ \u60ac\u6d6e\u9762\u677f\u65e5\u671f\u65f6，\u5f53\u524d\u6fc0\u6d3b\u6bb5\u663e\u793a\u8be5\u65e5\u671f\u7684\u9884\u89c8\u6587\u672c<\/span>
\n \/\/ \u26a0\ufe0f \u4f9d\u8d56\u5148\u8bfb\u53d6（\u540c hoverPreviewIndex）：\u6761\u4ef6\u77ed\u8def\u4f1a\u6f0f\u91c7 `hoverTimestamp`，\u60ac\u6d6e\u4e0d\u518d\u89e6\u53d1\u91cd\u7b97<\/span>
\n const<\/span> hovered =<\/span> hoverTimestamp.<\/span>value
\n const<\/span> isRangeType =<\/span> isRange.<\/span>value
\n const<\/span> isPanelOpen =<\/span> openModel.<\/span>value
\n if<\/span> (<\/span>isRangeType &&<\/span> isPanelOpen &&<\/span> hovered !==<\/span> null<\/span>)<\/span> {<\/span>
\n texts[<\/span>activeTriggerIndex.<\/span>value]<\/span> =<\/span> formatSideTimestamp<\/span>(<\/span>hovered)<\/span>
\n }<\/span>
\n return<\/span> texts
\n}<\/span>)<\/span>
\n\/** \u4e24\u6bb5\u8f93\u5165\u7684\u63d0\u793a\u6587\u5b57：\u53ea\u7ed9\u5355\u503c\u65f6\u4e24\u6bb5\u5171\u7528\u540c\u4e00\u6587\u6848 *\/<\/span>
\nconst<\/span> mergedPlaceholders =<\/span> computed<\/span><<\/span>[<\/span>string<\/span>,<\/span> string<\/span>]<\/span>><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> placeholder =<\/span> props.<\/span>placeholder
\n if<\/span> (<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>placeholder)<\/span>)<\/span> {<\/span>
\n return<\/span> [<\/span>placeholder[<\/span>0<\/span>]<\/span> ??<\/span> ''<\/span>,<\/span> placeholder[<\/span>1<\/span>]<\/span> ??<\/span> ''<\/span>]<\/span>
\n }<\/span>
\n return<\/span> [<\/span>placeholder,<\/span> placeholder]<\/span>
\n}<\/span>)<\/span>
\n\/** \u5355\u6bb5\u8f93\u5165\u7684\u63d0\u793a\u6587\u5b57（\u8303\u56f4\u5f62\u6001\u7531 `placeholders` \u627f\u62c5，\u6b64\u5904\u4f20\u7a7a） *\/<\/span>
\nconst<\/span> singlePlaceholder =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>props.<\/span>placeholder)<\/span> ?<\/span> ''<\/span> :<\/span> props.<\/span>placeholder)<\/span>)<\/span>
\nconst<\/span> showClear =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>props.<\/span>allowClear ||<\/span> fullyDisabled.<\/span>value)<\/span> {<\/span>
\n return<\/span> false<\/span>
\n }<\/span>
\n if<\/span> (<\/span>isRange.<\/span>value)<\/span> {<\/span>
\n return<\/span> (<\/span>rangeValue.<\/span>value?.<\/span>[<\/span>0<\/span>]<\/span> ??<\/span> null<\/span>)<\/span> !==<\/span> null<\/span> ||<\/span> (<\/span>rangeValue.<\/span>value?.<\/span>[<\/span>1<\/span>]<\/span> ??<\/span> null<\/span>)<\/span> !==<\/span> null<\/span>
\n }<\/span>
\n return<\/span> innerValue.<\/span>value !==<\/span> null<\/span>
\n}<\/span>)<\/span>
\n\/\/ \u5b9e\u9645\u65b9\u5411：\u5b9a\u4f4d\u5185\u6838\u7ffb\u8f6c \/ \u6b21\u8f74\u81ea\u9002\u5e94\u540e\u7684\u7ed3\u679c（\u5bbf\u4e3b\u672a\u6302\u8f7d\u65f6\u9000\u56de\u671f\u671b\u65b9\u5411）<\/span>
\nconst<\/span> actualPlacement =<\/span> computed<\/span><<\/span>FloatingPlacement><\/span><\/span><\/span>(<\/span>(<\/span>)<\/span> =><\/span> popupRef.<\/span>value?.<\/span>actualPlacement ??<\/span> props.<\/span>placement)<\/span>
\n\/**
\n * \u662f\u5426\u5c55\u793a\u9762\u677f\u6307\u793a\u7bad\u5934
\n *
\n * \u4e0d\u4f20 `showArrow` \u65f6\u6309\u300c\u5b9e\u9645\u65b9\u4f4d\u300d\u5224\u5b9a，\u4f20\u503c\u5219\u4ee5\u663e\u5f0f\u5f00\u5173\u4e3a\u51c6\u3002
\n *\/<\/span>
\nconst<\/span> showRangeArrow =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>isRange.<\/span>value ||<\/span> props.<\/span>showArrow ===<\/span> false<\/span>)<\/span> return<\/span> false<\/span>
\n return<\/span> props.<\/span>showArrow ===<\/span> true<\/span> ||<\/span> ARROW_PLACEMENTS<\/span>.<\/span>includes<\/span>(<\/span>actualPlacement.<\/span>value)<\/span>
\n}<\/span>)<\/span>
\n\/** \u9762\u677f\u8fc7\u6e21：\u4ec5\u7ed9 name，\u7c7b\u540d\u8d70 Vue \u9ed8\u8ba4\u6d3e\u751f（-enter-from\/-enter-active\/\u2026）\u3002\u5c55\u5f00 \/ \u6536\u8d77\u7684\u7f29\u653e\u539f\u70b9
\n \u968f**\u5b9e\u9645\u65b9\u4f4d**\u53d6（\u89c1 `datepicker-zoom` \u4e00\u8282），\u8fc7\u6e21\u540d\u56e0\u6b64\u4e0e\u65b9\u4f4d\u65e0\u5173 \u2014\u2014 \u9996\u5e27\u65b9\u4f4d\u672a\u56de\u586b\u4e5f\u4e0d\u4f1a\u53d6\u53cd\u5411\u52a8\u6548 *\/<\/span>
\nconst<\/span> panelTransitionProps:<\/span> TransitionProps =<\/span> {<\/span> name:<\/span> 'datepicker-zoom'<\/span> }<\/span>
\nwatch<\/span>(<\/span>
\n (<\/span>)<\/span> =><\/span> openModel.<\/span>value,<\/span>
\n (<\/span>next)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>next)<\/span> {<\/span>
\n draftRange.<\/span>value =<\/span> rangeValue.<\/span>value \/\/ \u5c55\u5f00\u65f6\u4ee5\u5df2\u63d0\u4ea4\u533a\u95f4\u4e3a\u8349\u7a3f\u8d77\u70b9<\/span>
\n \/\/ \u5c55\u5f00\u5373\u89c6\u4e3a\u6fc0\u6d3b\u5f53\u524d\u6bb5：\u6bb5\u7531\u70b9\u51fb\u7684\u8f93\u5165\u6846\u51b3\u5b9a，\u4e0d\u5f3a\u5236\u56de\u5230\u8d77\u70b9\u6bb5，<\/span>
\n \/\/ \u4ee5\u514d\u300c\u70b9\u7b2c\u4e8c\u6bb5\u5374\u88ab\u62c9\u56de\u7b2c\u4e00\u6bb5\u300d<\/span>
\n activateSide<\/span>(<\/span>activeSide.<\/span>value)<\/span>
\n return<\/span>
\n }<\/span>
\n draftValue.<\/span>value =<\/span> null<\/span> \/\/ \u6536\u8d77\u5373\u4e22\u5f03\u8349\u7a3f，\u672a\u70b9\u300c\u786e\u5b9a\u300d\u7684\u9009\u62e9\u4e0d\u751f\u6548<\/span>
\n draftRange.<\/span>value =<\/span> null<\/span>
\n resetActivatedSides<\/span>(<\/span>)<\/span> \/\/ \u6bb5\u6fc0\u6d3b\u8bb0\u5f55\u53ea\u5728\u672c\u6b21\u5c55\u5f00\u671f\u95f4\u6709\u6548<\/span>
\n hoverTimestamp.<\/span>value =<\/span> null<\/span> \/\/ \u6536\u8d77\u4e0d\u91cd\u7f6e\u6fc0\u6d3b\u6bb5：\u4e0b\u5212\u7ebf\u56e0\u800c\u505c\u5728\u539f\u6bb5<\/span>
\n presetPreview.<\/span>value =<\/span> null<\/span> \/\/ \u9884\u8bbe\u60ac\u6d6e\u9884\u89c8\u540c\u6837\u53ea\u5728\u672c\u6b21\u5c55\u5f00\u671f\u95f4\u6709\u6548<\/span>
\n }<\/span>,<\/span>
\n {<\/span> immediate:<\/span> true<\/span> }<\/span>
\n)<\/span>
\n\/\/ \u627f\u8f7d\u5c42（Modal \/ Drawer \/ Dialog \/ \u5916\u5c42\u6d6e\u5c42\u9762\u677f）\u5173\u95ed\u65f6\u6536\u8d77：\u5bb9\u5668\u5173\u95ed\u53ea\u662f v-show \u9690\u85cf\u3001\u4e0d\u6d3e\u53d1\u4efb\u4f55<\/span>
\n\/\/ \u6307\u9488\u6216\u7126\u70b9\u4e8b\u4ef6，\u9762\u677f\u4f1a\u505c\u5728\u6253\u5f00\u6001\u5e76\u5360\u7740\u5c42\u7ea7\u69fd\u4f4d，\u5bb9\u5668\u91cd\u5f00\u65f6\u4ee5\u300c\u4ecd\u6253\u5f00\u300d\u7684\u6837\u5b50\u51fa\u73b0\u3002<\/span>
\n\/\/ \u6536\u8d77\u8d70\u540c\u4e00\u4e2a\u5165\u53e3，\u8349\u7a3f\u590d\u4f4d\u7531\u4e0a\u9762\u7684 open watcher \u627f\u62c5<\/span>
\nuseContainerClose<\/span>(<\/span>(<\/span>)<\/span> =><\/span> requestOpen<\/span>(<\/span>false<\/span>)<\/span>)<\/span>
\nfunction<\/span> requestOpen<\/span>(<\/span>next:<\/span> boolean<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>fullyDisabled.<\/span>value ||<\/span> openModel.<\/span>value ===<\/span> next)<\/span> return<\/span>
\n openModel.<\/span>value =<\/span> next
\n emits<\/span>(<\/span>'openChange'<\/span>,<\/span> next)<\/span>
\n}<\/span>
\n\/**
\n * \u70b9\u51fb\u89e6\u53d1\u5668\u53ea\u8d1f\u8d23\u5c55\u5f00（\u5c55\u5f00\u6001\u70b9\u51fb\u4e0d\u6536\u8d77，\u6536\u8d77\u7531\u5916\u90e8\u70b9\u51fb \/ Esc \/ \u9009\u4e2d\u503c\u89e6\u53d1）：\u6309\u843d\u70b9\u786e\u5b9a\u672c\u6b21\u4f1a\u8bdd\u7684
\n * \u6fc0\u6d3b\u6bb5（\u70b9\u7ec8\u70b9\u6bb5\u5373\u6fc0\u6d3b\u7ec8\u70b9\u6bb5，\u70b9\u7a7a\u767d\u533a\u843d\u5230\u8d77\u70b9\u6bb5）\u5e76\u628a\u7126\u70b9\u79fb\u5230\u8be5\u6bb5\u8f93\u5165\u6846 \u2014\u2014 \u805a\u7126\u6001\u7531 focus \u9a71\u52a8，
\n * \u9762\u677f\u6536\u8d77\u540e\u4e0b\u5212\u7ebf\u4e0d\u4f1a\u968f\u4e4b\u6de1\u51fa
\n *\/<\/span>
\nfunction<\/span> onTriggerClick<\/span>(<\/span>index:<\/span> 0<\/span> |<\/span> 1<\/span> =<\/span> 0<\/span>)<\/span> {<\/span>
\n \/\/ \u9762\u677f\u64cd\u4f5c\u6001\u4e0b\u8f93\u5165\u6846\u662f\u53ea\u8bfb\u7684，\u70b9\u51fb\u8f93\u5165\u533a\u5373\u628a\u952e\u76d8\u6536\u56de\u6587\u672c\u8f93\u5165\u6001，\u6062\u590d\u624b\u8f93<\/span>
\n if<\/span> (<\/span>keyboardPanelMode.<\/span>value)<\/span> {<\/span>
\n keyboardPanelMode.<\/span>value =<\/span> false<\/span>
\n activeSection.<\/span>value =<\/span> null<\/span>
\n }<\/span>
\n if<\/span> (<\/span>openModel.<\/span>value)<\/span> return<\/span>
\n \/\/ \u8be5\u6bb5\u88ab\u7981\u7528\u65f6\u4e0d\u5c55\u5f00：\u7981\u7528\u6bb5\u4e0d\u53ef\u7f16\u8f91，\u5c55\u5f00\u540e\u4e5f\u6ca1\u6709\u53ef\u9009\u7684\u6bb5<\/span>
\n if<\/span> (<\/span>disabledSides.<\/span>value[<\/span>index]<\/span>)<\/span> return<\/span>
\n activateSide<\/span>(<\/span>index ===<\/span> 0<\/span> ?<\/span> 'start'<\/span> :<\/span> 'end'<\/span>)<\/span>
\n requestOpen<\/span>(<\/span>true<\/span>)<\/span>
\n nextTick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n triggerRef.<\/span>value?.<\/span>focus<\/span>(<\/span>index)<\/span>
\n }<\/span>)<\/span>
\n}<\/span>
\n\/** \u56de\u5199\u4e24\u6761\u8f68\u9053：\u4e3b\u8f68\u9053\u59cb\u7ec8\u540c\u6b65，\u5b57\u7b26\u4e32\u8f68\u9053\u6309\u540c\u4e00\u683c\u5f0f\u751f\u6210；\u8fd4\u56de\u56de\u5199\u7684\u5b57\u7b26\u4e32，\u4f9b\u300c\u786e\u5b9a\u300d\u4e8b\u4ef6\u590d\u7528 *\/<\/span>
\nfunction<\/span> commit<\/span>(<\/span>timestamp:<\/span> number<\/span> |<\/span> null<\/span>)<\/span>:<\/span> PickerFormattedValue {<\/span>
\n const<\/span> nextFormatted =<\/span> timestamp ===<\/span> null<\/span> ?<\/span> null<\/span> :<\/span> formatTimestamp<\/span>(<\/span>timestamp,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n valueModel.<\/span>value =<\/span> timestamp
\n emits<\/span>(<\/span>'update:formattedValue'<\/span>,<\/span> nextFormatted)<\/span>
\n emits<\/span>(<\/span>'change'<\/span>,<\/span> timestamp,<\/span> nextFormatted)<\/span>
\n return<\/span> nextFormatted
\n}<\/span>
\n\/**
\n * \u9762\u677f\u9009\u62e9：\u9f20\u6807\u70b9\u51fb\u5373\u843d\u503c\u5e76\u6536\u8d77，\u952e\u76d8\u5bfc\u822a\u53ea\u628a\u5149\u6807\u843d\u5728\u8349\u7a3f\u4e0a \u2014\u2014 \u952e\u76d8\u82e5\u4e5f\u5373\u65f6\u843d\u503c，
\n * \u5355\u9009\u5f62\u6001\u4f1a\u300c\u6309\u4e00\u4e0b\u65b9\u5411\u952e\u5c31\u9009\u5b8c\u5e76\u6536\u8d77\u300d，\u7528\u6237\u65e0\u6cd5\u8fde\u7eed\u79fb\u52a8\u5149\u6807
\n *\/<\/span>
\nfunction<\/span> onSelect<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> source:<\/span> PickerSelectSource =<\/span> 'mouse'<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>source ===<\/span> 'key'<\/span>)<\/span> {<\/span>
\n draftValue.<\/span>value =<\/span> timestamp
\n return<\/span>
\n }<\/span>
\n commit<\/span>(<\/span>timestamp)<\/span>
\n requestOpen<\/span>(<\/span>false<\/span>)<\/span>
\n}<\/span>
\n\/** \u8303\u56f4\u5f62\u6001\u7684\u4e24\u6bb5\u6587\u672c（\u8be5\u6bb5\u672a\u9009\u65f6\u4e3a\u7a7a\u5b57\u7b26\u4e32） *\/<\/span>
\nfunction<\/span> formatRangeValue<\/span>(<\/span>range:<\/span> PickerRangeValue |<\/span> null<\/span>)<\/span>:<\/span> PickerRangeFormattedValue |<\/span> null<\/span> {<\/span>
\n if<\/span> (<\/span>range ===<\/span> null<\/span>)<\/span> {<\/span>
\n return<\/span> null<\/span>
\n }<\/span>
\n return<\/span> [<\/span>formatSideTimestamp<\/span>(<\/span>range[<\/span>0<\/span>]<\/span>)<\/span>,<\/span> formatSideTimestamp<\/span>(<\/span>range[<\/span>1<\/span>]<\/span>)<\/span>]<\/span>
\n}<\/span>
\n\/** \u56de\u5199\u8303\u56f4\u5f62\u6001\u7684\u4e24\u6761\u8f68\u9053，\u8fd4\u56de\u56de\u5199\u7684\u6587\u672c\u4f9b\u4e8b\u4ef6\u590d\u7528 *\/<\/span>
\nfunction<\/span> commitRange<\/span>(<\/span>range:<\/span> PickerRangeValue |<\/span> null<\/span>)<\/span>:<\/span> PickerRangeFormattedValue |<\/span> null<\/span> {<\/span>
\n const<\/span> nextFormatted =<\/span> formatRangeValue<\/span>(<\/span>range)<\/span>
\n valueModel.<\/span>value =<\/span> range
\n emits<\/span>(<\/span>'update:formattedValue'<\/span>,<\/span> nextFormatted)<\/span>
\n emits<\/span>(<\/span>'change'<\/span>,<\/span> range,<\/span> nextFormatted)<\/span>
\n return<\/span> nextFormatted
\n}<\/span>
\n\/** \u8be5\u6bb5\u7684\u503c\u662f\u5426\u53ef\u5bf9\u5916\u63d0\u4ea4：\u6709\u503c\u5373\u53ef，\u4e3a\u7a7a\u65f6\u9700\u8be5\u6bb5\u58f0\u660e\u300c\u5141\u8bb8\u4e3a\u7a7a\u300d *\/<\/span>
\nfunction<\/span> canTriggerSide<\/span>(<\/span>timestamp:<\/span> number<\/span> |<\/span> null<\/span>,<\/span> index:<\/span> 0<\/span> |<\/span> 1<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n return<\/span> timestamp !==<\/span> null<\/span> ||<\/span> (<\/span>props.<\/span>allowEmpty[<\/span>index]<\/span> ??<\/span> false<\/span>)<\/span>
\n}<\/span>
\n\/**
\n * \u5199\u5165\u8303\u56f4\u5f62\u6001\u7684\u67d0\u4e00\u6bb5（\u9762\u677f\u9009\u62e9\u4e0e\u624b\u8f93\u63d0\u4ea4\u5171\u7528）：\u8d77\u70b9\u665a\u4e8e\u7ec8\u70b9\u65f6\u4e22\u5f03\u53e6\u4e00\u7aef\u3001\u53ea\u4fdd\u7559\u672c\u6b21\u5199\u5165，
\n * \u4e24\u6bb5\u9f50\u5168（\u6216\u672a\u9009\u6bb5\u58f0\u660e\u53ef\u4e3a\u7a7a）\u624d\u5bf9\u5916\u63d0\u4ea4；\u53ea\u5199\u5230\u4e00\u6bb5\u65f6\u4fdd\u6301\u5c55\u5f00，\u7531\u8c03\u7528\u573a\u666f\u51b3\u5b9a\u662f\u5426\u5207\u5230\u53e6\u4e00\u7aef\u3002
\n * \u8fd4\u56de\u5199\u5165\u540e\u7684\u533a\u95f4\u4e0e\u5176\u6587\u672c（\u672a\u63d0\u4ea4\u65f6\u5373\u4e3a\u8349\u7a3f），\u4f9b `ok` \u4e8b\u4ef6\u590d\u7528
\n *\/<\/span>
\nfunction<\/span> applyRangeSide<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> side:<\/span> PickerRangeSide,<\/span> switchSide:<\/span> boolean<\/span>)<\/span> {<\/span>
\n const<\/span> current =<\/span> draftRange.<\/span>value ??<\/span> rangeValue.<\/span>value ??<\/span> [<\/span>null<\/span>,<\/span> null<\/span>]<\/span>
\n let<\/span> next:<\/span> PickerRangeValue =<\/span> side ===<\/span> 'start'<\/span> ?<\/span> [<\/span>timestamp,<\/span> current[<\/span>1<\/span>]<\/span>]<\/span> :<\/span> [<\/span>current[<\/span>0<\/span>]<\/span>,<\/span> timestamp]<\/span>
\n if<\/span> (<\/span>next[<\/span>0<\/span>]<\/span> !==<\/span> null<\/span> &&<\/span> next[<\/span>1<\/span>]<\/span> !==<\/span> null<\/span> &&<\/span> next[<\/span>0<\/span>]<\/span> ><\/span> next[<\/span>1<\/span>]<\/span>)<\/span> {<\/span>
\n next =<\/span> side ===<\/span> 'start'<\/span> ?<\/span> [<\/span>timestamp,<\/span> null<\/span>]<\/span> :<\/span> [<\/span>null<\/span>,<\/span> timestamp]<\/span>
\n }<\/span>
\n const<\/span> nextFormatted =<\/span> formatRangeValue<\/span>(<\/span>next)<\/span>
\n const<\/span> canCommit =<\/span> canTriggerSide<\/span>(<\/span>next[<\/span>0<\/span>]<\/span>,<\/span> 0<\/span>)<\/span> &&<\/span> canTriggerSide<\/span>(<\/span>next[<\/span>1<\/span>]<\/span>,<\/span> 1<\/span>)<\/span>
\n draftRange.<\/span>value =<\/span> next
\n emits<\/span>(<\/span>'calendarChange'<\/span>,<\/span> next,<\/span> nextFormatted,<\/span> {<\/span> range:<\/span> side }<\/span>)<\/span>
\n if<\/span> (<\/span>canCommit)<\/span> {<\/span>
\n commitRange<\/span>(<\/span>next)<\/span>
\n }<\/span>
\n \/\/ \u53e6\u4e00\u7aef\u300c\u672c\u6b21\u5c55\u5f00\u4e2d\u5c1a\u672a\u6fc0\u6d3b\u300d\u6216\u300c\u5c1a\u65e0\u503c\u300d\u4e14\u672a\u88ab\u7981\u7528\u65f6，\u5207\u5230\u8be5\u7aef\u7ee7\u7eed\u9009\u5e76\u4fdd\u6301\u5c55\u5f00；<\/span>
\n \/\/ \u5426\u5219\u89c6\u4e3a\u672c\u6b21\u533a\u95f4\u5df2\u9009\u5b8c \u2192 \u6536\u8d77（\u5bf9\u7aef\u88ab\u7981\u7528\u5373\u5c5e\u6b64\u7c7b：\u5b83\u6ca1\u6709\u53ef\u7ee7\u7eed\u9009\u7684\u6bb5）<\/span>
\n const<\/span> otherSide:<\/span> PickerRangeSide =<\/span> side ===<\/span> 'start'<\/span> ?<\/span> 'end'<\/span> :<\/span> 'start'<\/span>
\n const<\/span> currentIndex =<\/span> side ===<\/span> 'start'<\/span> ?<\/span> 0<\/span> :<\/span> 1<\/span>
\n const<\/span> otherIndex =<\/span> side ===<\/span> 'start'<\/span> ?<\/span> 1<\/span> :<\/span> 0<\/span>
\n const<\/span> otherSideDisabled =<\/span> disabledSides.<\/span>value[<\/span>otherIndex]<\/span>
\n const<\/span> keepOpen =<\/span>
\n switchSide &&<\/span>
\n !<\/span>otherSideDisabled &&<\/span>
\n next[<\/span>currentIndex]<\/span> !==<\/span> null<\/span> &&<\/span>
\n (<\/span>!<\/span>activatedSides.<\/span>value[<\/span>otherSide]<\/span> ||<\/span> next[<\/span>otherIndex]<\/span> ===<\/span> null<\/span>)<\/span>
\n if<\/span> (<\/span>keepOpen)<\/span> {<\/span>
\n activateSide<\/span>(<\/span>otherSide)<\/span>
\n \/\/ \u5207\u5230\u53e6\u4e00\u7aef\u65f6\u628a\u7126\u70b9\u4e00\u5e76\u632a\u8fc7\u53bb（\u7b49 DOM \u66f4\u65b0\u540e\u518d\u805a\u7126），<\/span>
\n \/\/ \u5426\u5219\u4e0b\u5212\u7ebf\u5df2\u843d\u5230\u53e6\u4e00\u7aef\u3001\u8f93\u5165\u5149\u6807\u8fd8\u7559\u5728\u539f\u6bb5，\u63a5\u7740\u8f93\u5165\u4f1a\u5199\u8fdb\u9519\u8bef\u7684\u4e00\u6bb5<\/span>
\n nextTick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> triggerRef.<\/span>value?.<\/span>focus<\/span>(<\/span>otherIndex)<\/span>)<\/span>
\n return<\/span> {<\/span> value:<\/span> next,<\/span> formatted:<\/span> nextFormatted }<\/span>
\n }<\/span>
\n requestOpen<\/span>(<\/span>false<\/span>)<\/span>
\n return<\/span> {<\/span> value:<\/span> next,<\/span> formatted:<\/span> nextFormatted }<\/span>
\n}<\/span>
\n\/**
\n * \u9762\u677f\u9009\u62e9\u65e5\u671f：\u5199\u5165\u5f53\u524d\u6fc0\u6d3b\u6bb5，\u5e76\u628a\u6fc0\u6d3b\u6bb5\u5207\u5230\u53e6\u4e00\u7aef\u4ee5\u63a5\u7740\u9009\u7b2c\u4e8c\u6bb5；
\n * \u952e\u76d8\u5bfc\u822a\u540c {@link onSelect}（\u53ea\u628a\u8be5\u6bb5\u7684\u8349\u7a3f\u8bbe\u4e3a\u5149\u6807\u6240\u5728\u65e5\u671f，\u4e0d\u843d\u503c\u3001\u4e0d\u5207\u6bb5）
\n *\/<\/span>
\nfunction<\/span> onRangeSelect<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> side:<\/span> PickerRangeSide,<\/span> source:<\/span> PickerSelectSource =<\/span> 'mouse'<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>source ===<\/span> 'key'<\/span>)<\/span> {<\/span>
\n const<\/span> current =<\/span> draftRange.<\/span>value ??<\/span> rangeValue.<\/span>value ??<\/span> [<\/span>null<\/span>,<\/span> null<\/span>]<\/span>
\n draftRange.<\/span>value =<\/span> side ===<\/span> 'start'<\/span> ?<\/span> [<\/span>timestamp,<\/span> current[<\/span>1<\/span>]<\/span>]<\/span> :<\/span> [<\/span>current[<\/span>0<\/span>]<\/span>,<\/span> timestamp]<\/span>
\n return<\/span>
\n }<\/span>
\n applyRangeSide<\/span>(<\/span>timestamp,<\/span> side,<\/span> true<\/span>)<\/span>
\n}<\/span>
\n\/**
\n * \u65e5\u671f\u65f6\u95f4\u8303\u56f4\u7684\u9762\u677f\u8349\u7a3f\u53d8\u66f4：\u4e0e\u5355\u9009\u65e5\u671f\u65f6\u95f4\u5f62\u6001\u540c\u53e3\u5f84，\u9762\u677f\u5185\u7684\u9009\u62e9（\u65e5\u671f\u6216\u65f6\u95f4）\u53ea\u843d\u5728\u8349\u7a3f\u4e0a\u3001
\n * \u70b9\u300c\u786e\u5b9a\u300d\u624d\u63d0\u4ea4；\u6b64\u5904\u4e0d\u505a\u300c\u8d77\u70b9\u665a\u4e8e\u7ec8\u70b9\u4e22\u5f03\u53e6\u4e00\u7aef\u300d\u7684\u7ea0\u6b63，\u7ea0\u6b63\u53d1\u751f\u5728\u63d0\u4ea4\u65f6（\u4e0e `applyRangeSide` \u540c\u5f84）
\n *\/<\/span>
\nfunction<\/span> onRangeDraftChange<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> side:<\/span> PickerRangeSide)<\/span> {<\/span>
\n const<\/span> current =<\/span> draftRange.<\/span>value ??<\/span> rangeValue.<\/span>value ??<\/span> [<\/span>null<\/span>,<\/span> null<\/span>]<\/span>
\n draftRange.<\/span>value =<\/span> side ===<\/span> 'start'<\/span> ?<\/span> [<\/span>timestamp,<\/span> current[<\/span>1<\/span>]<\/span>]<\/span> :<\/span> [<\/span>current[<\/span>0<\/span>]<\/span>,<\/span> timestamp]<\/span>
\n}<\/span>
\n\/** \u65e5\u671f\u65f6\u95f4\u8303\u56f4\u7684\u300c\u786e\u5b9a\u300d：\u5e76\u5165\u5f53\u524d\u6fc0\u6d3b\u6bb5\u5e76\u6309\u9762\u677f\u9009\u62e9\u540c\u5f84\u63d0\u4ea4，\u6d3e\u53d1 `ok` *\/<\/span>
\nfunction<\/span> onRangeConfirm<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> side:<\/span> PickerRangeSide)<\/span> {<\/span>
\n const<\/span> {<\/span> value:<\/span> range,<\/span> formatted }<\/span> =<\/span> applyRangeSide<\/span>(<\/span>timestamp,<\/span> side,<\/span> true<\/span>)<\/span>
\n emits<\/span>(<\/span>'ok'<\/span>,<\/span> range,<\/span> formatted)<\/span>
\n}<\/span>
\n\/** \u60ac\u6d6e\u65e5\u671f\u53d8\u66f4：\u4ec5\u5728\u6fc0\u6d3b\u6bb5\u8f93\u5165\u6846\u505a\u9884\u89c8\u5c55\u793a，\u4e0d\u6539\u53d8\u5df2\u9009\u503c *\/<\/span>
\nfunction<\/span> onRangeHover<\/span>(<\/span>timestamp:<\/span> number<\/span> |<\/span> null<\/span>)<\/span> {<\/span>
\n hoverTimestamp.<\/span>value =<\/span> timestamp
\n}<\/span>
\n\/** \u5355\u9009\u5f62\u6001\u7684\u60ac\u6d6e\u65e5\u671f\u53d8\u66f4：\u5728\u8f93\u5165\u6846\u505a\u9884\u89c8\u5c55\u793a，\u4e0d\u6539\u53d8\u5df2\u9009\u503c *\/<\/span>
\nfunction<\/span> onSingleHover<\/span>(<\/span>timestamp:<\/span> number<\/span> |<\/span> null<\/span>)<\/span> {<\/span>
\n hoverTimestamp.<\/span>value =<\/span> timestamp
\n}<\/span>
\n\/** \u805a\u7126\u67d0\u4e00\u6bb5\u8f93\u5165\u6846\u5373\u628a\u6fc0\u6d3b\u6bb5\u5207\u8fc7\u53bb（\u540e\u7eed\u9762\u677f\u9009\u62e9\u4e0e\u60ac\u6d6e\u9884\u89c8\u90fd\u4f5c\u7528\u4e8e\u8be5\u6bb5） *\/<\/span>
\nfunction<\/span> onSideFocus<\/span>(<\/span>index:<\/span> 0<\/span> |<\/span> 1<\/span>)<\/span> {<\/span>
\n activateSide<\/span>(<\/span>index ===<\/span> 0<\/span> ?<\/span> 'start'<\/span> :<\/span> 'end'<\/span>)<\/span>
\n}<\/span>
\n\/** \u8349\u7a3f\u53d8\u66f4：\u53ea\u66f4\u65b0\u9762\u677f\u8349\u7a3f，\u4e0d\u63d0\u4ea4（\u5e26\u65f6\u95f4\u5f62\u6001\u7684\u9009\u62e9\u7531\u300c\u786e\u5b9a\u300d\u7edf\u4e00\u63d0\u4ea4） *\/<\/span>
\nfunction<\/span> onDraftChange<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span> {<\/span>
\n draftValue.<\/span>value =<\/span> timestamp
\n}<\/span>
\n\/**
\n * \u300c\u786e\u5b9a\u300d\/\u300c\u6b64\u523b\u300d\u7684\u63d0\u4ea4：\u90fd\u56de\u5199\u53cc\u8f68\u3001\u6d3e\u53d1 `change` \u5e76\u6536\u8d77\u9762\u677f（\u6536\u8d77\u65f6\u8349\u7a3f\u7531 `open` \u7684\u76d1\u542c\u7edf\u4e00\u4e22\u5f03）；
\n * \u5dee\u5f02\u4ec5\u5728\u4e8b\u4ef6 \u2014\u2014 `ok` \u53ea\u7531\u300c\u786e\u5b9a\u300d\u6d3e\u53d1，\u300c\u6b64\u523b\u300d\u662f\u300c\u8df3\u5230\u5f53\u524d\u65f6\u523b\u300d\u7684\u5feb\u6377\u5165\u53e3\u3001\u4e0d\u6d3e\u53d1 `ok`
\n *\/<\/span>
\nfunction<\/span> onConfirm<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> source:<\/span> 'ok'<\/span> |<\/span> 'now'<\/span>)<\/span> {<\/span>
\n const<\/span> nextFormatted =<\/span> commit<\/span>(<\/span>timestamp)<\/span>
\n requestOpen<\/span>(<\/span>false<\/span>)<\/span>
\n if<\/span> (<\/span>source ===<\/span> 'ok'<\/span>)<\/span> {<\/span>
\n emits<\/span>(<\/span>'ok'<\/span>,<\/span> timestamp,<\/span> nextFormatted)<\/span>
\n }<\/span>
\n}<\/span>
\nfunction<\/span> onClear<\/span>(<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>isRange.<\/span>value)<\/span> {<\/span>
\n commitRange<\/span>(<\/span>null<\/span>)<\/span>
\n }<\/span> else<\/span> {<\/span>
\n commit<\/span>(<\/span>null<\/span>)<\/span>
\n }<\/span>
\n requestOpen<\/span>(<\/span>false<\/span>)<\/span>
\n}<\/span>
\n\/**
\n * \u70b9\u51fb\u9884\u8bbe：\u7acb\u5373\u63d0\u4ea4\u5e76\u6536\u8d77 \u2014\u2014 \u8303\u56f4\u5f62\u6001\u63d0\u4ea4\u6574\u4e2a\u533a\u95f4\u3001\u5355\u9009\u5f62\u6001\u63d0\u4ea4\u5355\u4e2a\u65f6\u95f4\u6233；
\n * \u503c\u4e0e\u5f62\u6001\u4e0d\u5339\u914d\u7684\u9884\u8bbe\u9879\u5ffd\u7565，\u907f\u514d\u628a\u5355\u4e2a\u65f6\u95f4\u6233\u5199\u8fdb\u4e24\u6bb5\u5143\u7ec4（\u53cd\u4e4b\u4ea6\u7136）
\n *\/<\/span>
\nfunction<\/span> onPresetSelect<\/span>(<\/span>presetValue:<\/span> PickerPresetValue)<\/span> {<\/span>
\n if<\/span> (<\/span>isRange.<\/span>value)<\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>presetValue)<\/span>)<\/span> return<\/span>
\n commitRange<\/span>(<\/span>[<\/span>presetValue[<\/span>0<\/span>]<\/span>,<\/span> presetValue[<\/span>1<\/span>]<\/span>]<\/span>)<\/span>
\n }<\/span> else<\/span> {<\/span>
\n if<\/span> (<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>presetValue)<\/span>)<\/span> return<\/span>
\n commit<\/span>(<\/span>presetValue)<\/span>
\n }<\/span>
\n requestOpen<\/span>(<\/span>false<\/span>)<\/span>
\n}<\/span>
\n\/** \u60ac\u6d6e\u9884\u8bbe：\u8303\u56f4\u5f62\u6001\u5728\u9762\u677f\u4e0a\u9884\u89c8\u8be5\u533a\u95f4（\u5355\u9009\u5f62\u6001\u65e0\u9884\u89c8\u53e3\u5f84） *\/<\/span>
\nfunction<\/span> onPresetHover<\/span>(<\/span>presetValue:<\/span> PickerPresetValue |<\/span> null<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>presetValue ===<\/span> null<\/span> ||<\/span> !<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>presetValue)<\/span>)<\/span> {<\/span>
\n presetPreview.<\/span>value =<\/span> null<\/span>
\n return<\/span>
\n }<\/span>
\n presetPreview.<\/span>value =<\/span> [<\/span>presetValue[<\/span>0<\/span>]<\/span>,<\/span> presetValue[<\/span>1<\/span>]<\/span>]<\/span>
\n}<\/span>
\n\/**
\n * \u624b\u8f93\u6587\u672c：\u89e3\u6790\u6210\u529f\u624d\u63d0\u4ea4，\u5931\u8d25\u65f6\u7531\u89e6\u53d1\u5668\u56de\u6eda\u4e3a\u5f53\u524d\u5408\u6cd5\u6587\u672c\u3002\u9762\u677f\u5c55\u5f00\u671f\u95f4\u8f93\u5165\u6846\u5c55\u793a\u7684\u53ef\u80fd\u4e0d\u662f
\n * \u7528\u6237\u952e\u5165\u7684\u5185\u5bb9（\u9700\u70b9\u300c\u786e\u5b9a\u300d\u7684\u5f62\u6001\u5c55\u793a\u9762\u677f\u8349\u7a3f\u3001\u952e\u76d8\u64cd\u4f5c\u6001\u5c55\u793a\u65b9\u5411\u952e\u7684\u5149\u6807\u65e5\u671f），\u8fd9\u4e24\u7c7b\u5931\u7126
\n * \u90fd\u89c6\u540c\u53d6\u6d88（\u4e22\u5f03\u8349\u7a3f\u3001\u4e0d\u843d\u503c），\u5426\u5219\u672a\u786e\u8ba4\u7684\u9009\u62e9\u4f1a\u88ab\u5f53\u6210\u7528\u6237\u8f93\u5165\u843d\u503c；\u56de\u8f66\u4e0e\u300c\u786e\u5b9a\u300d\u540c\u5f84
\n *\/<\/span>
\nfunction<\/span> onTextConfirm<\/span>(<\/span>text:<\/span> string<\/span>,<\/span> source:<\/span> 'enter'<\/span> |<\/span> 'blur'<\/span>,<\/span> index:<\/span> 0<\/span> |<\/span> 1<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>source ===<\/span> 'blur'<\/span> &&<\/span> (<\/span>needConfirm.<\/span>value ||<\/span> keyboardPanelMode.<\/span>value)<\/span>)<\/span> {<\/span>
\n draftValue.<\/span>value =<\/span> null<\/span>
\n draftRange.<\/span>value =<\/span> null<\/span>
\n return<\/span>
\n }<\/span>
\n if<\/span> (<\/span>isRange.<\/span>value)<\/span> {<\/span>
\n const<\/span> rangeTimestamp =<\/span> parseTimestamp<\/span>(<\/span>text,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n if<\/span> (<\/span>rangeTimestamp !==<\/span> null<\/span>)<\/span> {<\/span>
\n \/\/ \u56de\u8f66\u7684\u63d0\u4ea4\u8bed\u4e49\u4e0e\u9762\u677f\u9009\u62e9\u540c\u5f84（\u5199\u5165\u6fc0\u6d3b\u6bb5\u5e76\u5207\u5230\u53e6\u4e00\u7aef），\u5931\u7126\u53ea\u843d\u503c\u4e0d\u5207\u6bb5<\/span>
\n applyRangeSide<\/span>(<\/span>rangeTimestamp,<\/span> index ===<\/span> 0<\/span> ?<\/span> 'start'<\/span> :<\/span> 'end'<\/span>,<\/span> source ===<\/span> 'enter'<\/span>)<\/span>
\n }<\/span>
\n return<\/span>
\n }<\/span>
\n const<\/span> timestamp =<\/span> parseTimestamp<\/span>(<\/span>text,<\/span> mergedValueFormat.<\/span>value)<\/span>
\n if<\/span> (<\/span>timestamp ===<\/span> null<\/span>)<\/span> return<\/span>
\n commit<\/span>(<\/span>timestamp)<\/span>
\n \/\/ \u56de\u8f66\u5373\u63d0\u4ea4\u5e76\u6536\u8d77（\u4e0e\u9762\u677f\u9009\u62e9\u540c\u5f84）：\u5e26\u65f6\u95f4\u5f62\u6001\u7684\u8349\u7a3f\u7531\u6536\u8d77\u65f6\u7684\u76d1\u542c\u7edf\u4e00\u4e22\u5f03<\/span>
\n requestOpen<\/span>(<\/span>false<\/span>)<\/span>
\n}<\/span>
\nfunction<\/span> onEscKeydown<\/span>(<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>openModel.<\/span>value)<\/span> {<\/span>
\n requestOpen<\/span>(<\/span>false<\/span>)<\/span>
\n }<\/span>
\n}<\/span>
\nfunction<\/span> onPanelChange<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> mode:<\/span> PickerPanelMode)<\/span> {<\/span>
\n \/\/ \u7ffb\u9875 \/ \u94bb\u53d6\u540e\u9762\u677f\u5185\u5bb9\u6574\u4f53\u66f4\u6362，\u9f20\u6807\u5df2\u4e0d\u518d\u5bf9\u5e94\u539f\u6765\u90a3\u4e00\u683c，\u5148\u64a4\u6389\u8f93\u5165\u6846\u7684\u60ac\u6d6e\u9884\u89c8<\/span>
\n hoverTimestamp.<\/span>value =<\/span> null<\/span>
\n emits<\/span>(<\/span>'panelChange'<\/span>,<\/span> timestamp,<\/span> mode)<\/span>
\n}<\/span>
\n\/* \u952e\u76d8\u5bfc\u822a *\/<\/span>
\n\/** \u9762\u677f\u7684\u952e\u76d8\u5165\u53e3：\u5404\u9762\u677f\u7ecf `defineExpose` \u66b4\u9732，\u7ec4\u4ef6\u58f3\u5c42\u6309\u5f53\u524d\u5f62\u6001\u628a\u6309\u952e\u8f6c\u7ed9\u5bf9\u5e94\u7684\u9762\u677f *\/<\/span>
\ninterface<\/span> PanelKeydownTarget<\/span> {<\/span>
\n handleKeydown<\/span>:<\/span> (<\/span>event:<\/span> KeyboardEvent)<\/span> =><\/span> boolean<\/span>
\n}<\/span>
\n\/**
\n * \u952e\u76d8\u5f52\u5c5e：`false` \u4e3a\u6587\u672c\u8f93\u5165\u6001（\u65b9\u5411\u952e\u79fb\u52a8\u8f93\u5165\u5149\u6807），`true` \u4e3a\u9762\u677f\u64cd\u4f5c\u6001（\u65b9\u5411\u952e\u64cd\u4f5c\u9762\u677f\u5149\u6807）\u3002
\n * \u4e24\u6001\u7531 Tab \u5207\u6362：\u8f93\u5165\u6001\u4e0b Tab \u53ea\u628a\u952e\u76d8\u4ea4\u7ed9\u9762\u677f\u3001\u7126\u70b9\u4e0d\u52a8（\u5426\u5219\u7b2c\u4e00\u4e0b Tab \u5c31\u79fb\u51fa\u7ec4\u4ef6）；\u9762\u677f\u64cd\u4f5c\u6001
\n * \u4e0b Tab \u5728\u4e24\u4e2a\u533a\u4e4b\u95f4\u5faa\u73af，\u5faa\u73af\u5230\u5934\u4ea4\u8fd8\u6d4f\u89c8\u5668\u79fb\u51fa\u7126\u70b9\u3002\u8f93\u5165\u5b57\u7b26\u3001\u70b9\u51fb\u8f93\u5165\u533a\u6216\u91cd\u65b0\u805a\u7126\u5373\u56de\u5230\u8f93\u5165\u6001\u3002
\n *
\n * \u9762\u677f\u64cd\u4f5c\u6001\u540c\u65f6\u628a\u8f93\u5165\u6846\u7f6e\u4e3a\u53ea\u8bfb（\u63d2\u5165\u5149\u6807\u4e0d\u5e94\u518d\u63d0\u793a\u300c\u53ef\u76f4\u63a5\u8f93\u5165\u300d，\u6b64\u523b\u952e\u76d8\u5f52\u9762\u677f\u6240\u6709）\u3002
\n *\/<\/span>
\nconst<\/span> keyboardPanelMode =<\/span> ref<\/span>(<\/span>false<\/span>)<\/span>
\n\/** \u952e\u76d8\u64cd\u4f5c\u5f53\u524d\u6240\u5728\u7684\u533a：\u4ec5\u5e26\u65f6\u95f4\u5f62\u6001\u6709\u4e24\u4e2a\u533a\u53ef\u53d6，\u5176\u4f59\u5f62\u6001\u6052\u4e3a\u65e5\u671f\u533a（\u9762\u677f\u5185\u90e8\u6309\u8be5\u72b6\u6001\u8f6c\u53d1） *\/<\/span>
\nconst<\/span> activeSection =<\/span> ref<\/span><<\/span>PickerActiveSection><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u662f\u5426\u5177\u5907\u300c\u65e5\u671f \/ \u65f6\u95f4\u300d\u4e24\u4e2a\u53ef\u5207\u6362\u7684\u533a *\/<\/span>
\nconst<\/span> hasTimeSection =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> isDateTime.<\/span>value ||<\/span> isDateTimeRange.<\/span>value)<\/span>
\n\/** \u5524\u8d77\u9762\u677f\u7684\u6309\u952e\u4e2d\u4e0d\u4f5c\u6570\u7684\u4e00\u7c7b：\u4fee\u9970\u952e\u4e0d\u662f\u8f93\u5165\u610f\u56fe，Esc \/ \u56de\u8f66\u53e6\u6709\u65e2\u6709\u8bed\u4e49 *\/<\/span>
\nconst<\/span> PANEL_OPEN_IGNORED_KEYS<\/span> =<\/span> [<\/span>'Shift'<\/span>,<\/span> 'Control'<\/span>,<\/span> 'Alt'<\/span>,<\/span> 'Meta'<\/span>,<\/span> 'Escape'<\/span>,<\/span> 'Enter'<\/span>]<\/span>
\nconst<\/span> rangePanelRef =<\/span> ref<\/span><<\/span>PanelKeydownTarget |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> datetimePanelRef =<\/span> ref<\/span><<\/span>PanelKeydownTarget |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> datePanelRef =<\/span> ref<\/span><<\/span>PanelKeydownTarget |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u9762\u677f\u5c55\u5f00\u72b6\u6001\u53d8\u5316\u5373\u91cd\u7f6e\u952e\u76d8\u72b6\u6001：\u6536\u8d77\u540e\u4e0d\u518d\u4fdd\u7559\u4e0a\u4e00\u6b21\u7684\u952e\u76d8\u5f52\u5c5e\u4e0e\u6d3b\u52a8\u533a<\/span>
\nwatch<\/span>(<\/span>openModel,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n keyboardPanelMode.<\/span>value =<\/span> false<\/span>
\n activeSection.<\/span>value =<\/span> null<\/span>
\n}<\/span>)<\/span>
\n\/\/ \u5207\u6362\u6fc0\u6d3b\u6bb5\u5373\u91cd\u7f6e\u6d3b\u52a8\u533a：Tab \u7684\u5faa\u73af\u4ece\u300c\u672a\u6307\u5b9a\u300d\u91cd\u65b0\u5f00\u59cb，\u4e0e\u6362\u624b\u540e\u7684\u9f20\u6807\u64cd\u4f5c\u8d77\u70b9\u4e00\u81f4<\/span>
\nwatch<\/span>(<\/span>activeSide,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n activeSection.<\/span>value =<\/span> null<\/span>
\n}<\/span>)<\/span>
\n\/** \u5f53\u524d\u6e32\u67d3\u7684\u9762\u677f（\u4e09\u79cd\u5f62\u6001\u4e09\u9009\u4e00） *\/<\/span>
\nfunction<\/span> getRenderedPanel<\/span>(<\/span>)<\/span>:<\/span> PanelKeydownTarget |<\/span> null<\/span> {<\/span>
\n if<\/span> (<\/span>isRange.<\/span>value)<\/span> {<\/span>
\n return<\/span> rangePanelRef.<\/span>value
\n }<\/span>
\n return<\/span> isDateTime.<\/span>value ?<\/span> datetimePanelRef.<\/span>value :<\/span> datePanelRef.<\/span>value
\n}<\/span>
\n\/** \u8f93\u5165\u6846\u5185\u5bb9\u88ab\u6539\u52a8：\u952e\u76d8\u5f52\u5c5e\u6536\u56de\u6587\u672c\u8f93\u5165\u6001，\u65b9\u5411\u952e\u968f\u4e4b\u56de\u5230\u8f93\u5165\u5149\u6807 *\/<\/span>
\nfunction<\/span> onTriggerInput<\/span>(<\/span>)<\/span>:<\/span> void<\/span> {<\/span>
\n keyboardPanelMode.<\/span>value =<\/span> false<\/span>
\n activeSection.<\/span>value =<\/span> null<\/span>
\n}<\/span>
\nfunction<\/span> onTriggerFocus<\/span>(<\/span>event:<\/span> FocusEvent)<\/span>:<\/span> void<\/span> {<\/span>
\n onTriggerInput<\/span>(<\/span>)<\/span>
\n emits<\/span>(<\/span>'focus'<\/span>,<\/span> event)<\/span>
\n}<\/span>
\n\/**
\n * \u628a\u4e00\u6b21\u6309\u952e\u8f6c\u7ed9\u9762\u677f：\u672a\u6307\u5b9a\u6d3b\u52a8\u533a\u65f6\u9996\u4e2a\u5bfc\u822a\u952e\u53ea\u628a\u65e5\u671f\u533a\u8bbe\u4e3a\u6d3b\u52a8\u533a（\u4e0d\u79fb\u52a8\u5149\u6807）\u2014\u2014
\n * \u5148\u8ba9\u7528\u6237\u770b\u6e05\u952e\u76d8\u843d\u5728\u54ea\u4e00\u5217，\u4e0b\u4e00\u952e\u624d\u771f\u6b63\u79fb\u52a8
\n *\/<\/span>
\nfunction<\/span> forwardKeydown<\/span>(<\/span>event:<\/span> KeyboardEvent)<\/span>:<\/span> boolean<\/span> {<\/span>
\n if<\/span> (<\/span>hasTimeSection.<\/span>value &&<\/span> activeSection.<\/span>value ===<\/span> null<\/span>)<\/span> {<\/span>
\n activeSection.<\/span>value =<\/span> 'date'<\/span>
\n event.<\/span>preventDefault<\/span>(<\/span>)<\/span>
\n return<\/span> true<\/span>
\n }<\/span>
\n return<\/span> getRenderedPanel<\/span>(<\/span>)<\/span>?.<\/span>handleKeydown<\/span>(<\/span>event)<\/span> ??<\/span> false<\/span>
\n}<\/span>
\nconst<\/span> SECTION_CYCLE<\/span>:<\/span> PickerActiveSection[<\/span>]<\/span> =<\/span> [<\/span>null<\/span>,<\/span> 'date'<\/span>,<\/span> 'time'<\/span>]<\/span>
\n\/** \u53d6\u5faa\u73af\u4e2d\u7684\u4e0b\u4e00\u4e2a\u533a（\u8d8a\u754c\u5373\u56de\u5230\u300c\u672a\u6307\u5b9a\u300d） *\/<\/span>
\nfunction<\/span> getNextSection<\/span>(<\/span>current:<\/span> PickerActiveSection,<\/span> backward:<\/span> boolean<\/span>)<\/span>:<\/span> PickerActiveSection {<\/span>
\n const<\/span> index =<\/span> SECTION_CYCLE<\/span>.<\/span>indexOf<\/span>(<\/span>current)<\/span>
\n return<\/span> SECTION_CYCLE<\/span>[<\/span>backward ?<\/span> index –<\/span> 1<\/span> :<\/span> index +<\/span> 1<\/span>]<\/span> ??<\/span> null<\/span>
\n}<\/span>
\n\/**
\n * Tab：\u5207\u6362\u952e\u76d8\u5f52\u5c5e，\u5e76\u5728\u9762\u677f\u5185\u7684\u4e24\u4e2a\u533a\u4e4b\u95f4\u5faa\u73af；\u5faa\u73af\u5230\u5934（\u56de\u5230\u300c\u65e0\u6d3b\u52a8\u533a\u300d）\u65f6\u4e0d\u963b\u6b62
\n * \u9ed8\u8ba4\u884c\u4e3a，\u4ea4\u8fd8\u6d4f\u89c8\u5668\u628a\u7126\u70b9\u79fb\u51fa\u7ec4\u4ef6
\n *\/<\/span>
\nfunction<\/span> onTabKeydown<\/span>(<\/span>event:<\/span> KeyboardEvent)<\/span>:<\/span> void<\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>keyboardPanelMode.<\/span>value)<\/span> {<\/span>
\n keyboardPanelMode.<\/span>value =<\/span> true<\/span>
\n event.<\/span>preventDefault<\/span>(<\/span>)<\/span>
\n return<\/span>
\n }<\/span>
\n if<\/span> (<\/span>!<\/span>hasTimeSection.<\/span>value)<\/span> {<\/span>
\n return<\/span>
\n }<\/span>
\n const<\/span> nextSection =<\/span> getNextSection<\/span>(<\/span>activeSection.<\/span>value,<\/span> event.<\/span>shiftKey)<\/span>
\n activeSection.<\/span>value =<\/span> nextSection
\n if<\/span> (<\/span>nextSection !==<\/span> null<\/span>)<\/span> {<\/span>
\n event.<\/span>preventDefault<\/span>(<\/span>)<\/span>
\n }<\/span>
\n}<\/span>
\n\/** \u89e6\u53d1\u5668\u7684\u6309\u952e\u5165\u53e3：\u9762\u677f\u672a\u5c55\u5f00\u65f6\u4efb\u610f\u8f93\u5165\u952e\u5524\u8d77\u9762\u677f，\u5c55\u5f00\u540e\u6309\u952e\u76d8\u5f52\u5c5e\u51b3\u5b9a\u662f\u5426\u64cd\u4f5c\u9762\u677f *\/<\/span>
\nfunction<\/span> onWrapperKeydown<\/span>(<\/span>event:<\/span> KeyboardEvent)<\/span>:<\/span> void<\/span> {<\/span>
\n if<\/span> (<\/span>event.<\/span>key ===<\/span> 'Tab'<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>openModel.<\/span>value &&<\/span> !<\/span>fullyDisabled.<\/span>value)<\/span> {<\/span>
\n onTabKeydown<\/span>(<\/span>event)<\/span>
\n }<\/span>
\n return<\/span>
\n }<\/span>
\n if<\/span> (<\/span>!<\/span>openModel.<\/span>value)<\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>PANEL_OPEN_IGNORED_KEYS<\/span>.<\/span>includes<\/span>(<\/span>event.<\/span>key)<\/span>)<\/span> {<\/span>
\n requestOpen<\/span>(<\/span>true<\/span>)<\/span>
\n }<\/span>
\n return<\/span>
\n }<\/span>
\n if<\/span> (<\/span>!<\/span>keyboardPanelMode.<\/span>value ||<\/span> !<\/span>PANEL_NAV_KEYS<\/span>.<\/span>includes<\/span>(<\/span>event.<\/span>key)<\/span>)<\/span> {<\/span>
\n return<\/span>
\n }<\/span>
\n forwardKeydown<\/span>(<\/span>event)<\/span>
\n}<\/span>
\nfunction<\/span> focus<\/span>(<\/span>)<\/span> {<\/span>
\n triggerRef.<\/span>value?.<\/span>focus<\/span>(<\/span>)<\/span>
\n}<\/span>
\nfunction<\/span> blur<\/span>(<\/span>)<\/span> {<\/span>
\n triggerRef.<\/span>value?.<\/span>blur<\/span>(<\/span>)<\/span>
\n}<\/span>
\ndefineExpose<\/span>(<\/span>{<\/span> focus,<\/span> blur }<\/span>)<\/span>
\n<<\/span>\/<\/span>script><\/span>
\n<<\/span>template><\/span>
\n <<\/span>div
\n ref=<\/span>"wrapperRef"<\/span>
\n class<\/span>=<\/span>"datepicker-wrap"<\/span>
\n :<\/span>style=<\/span>"wrapperStyle"<\/span>
\n @<\/span>keydown<\/span><\/span>=<\/span>"onWrapperKeydown"<\/span>
\n @<\/span>keydown<\/span><\/span>.<\/span>esc=<\/span>"onEscKeydown"<\/span>
\n @<\/span>keydown<\/span><\/span>.<\/span>enter.<\/span>stop
\n @<\/span>input<\/span><\/span>=<\/span>"onTriggerInput"<\/span>
\n ><\/span>
\n <<\/span>PickerTrigger
\n ref=<\/span>"triggerRef"<\/span>
\n :<\/span>text=<\/span>"displayText"<\/span>
\n :<\/span>texts=<\/span>"displayRangeTexts"<\/span>
\n :<\/span>range=<\/span>"isRange"<\/span>
\n :<\/span>active–<\/span>index=<\/span>"activeTriggerIndex"<\/span>
\n :<\/span>preview–<\/span>index=<\/span>"hoverPreviewIndex"<\/span>
\n :<\/span>preview=<\/span>"singlePreviewTimestamp !== null"<\/span>
\n :<\/span>placeholder=<\/span>"singlePlaceholder"<\/span>
\n :<\/span>placeholders=<\/span>"mergedPlaceholders"<\/span>
\n :<\/span>size=<\/span>"size"<\/span>
\n :<\/span>status=<\/span>"status"<\/span>
\n :<\/span>bordered=<\/span>"bordered"<\/span>
\n :<\/span>disabled=<\/span>"fullyDisabled"<\/span>
\n :<\/span>disabled–<\/span>sides=<\/span>"disabledSides"<\/span>
\n :<\/span>input–<\/span>read–<\/span>only=<\/span>"inputReadOnly || keyboardPanelMode"<\/span>
\n :<\/span>allow–<\/span>clear=<\/span>"allowClear && showClear"<\/span>
\n :<\/span>open=<\/span>"openModel"<\/span>
\n :<\/span>input–<\/span>size=<\/span>"inputSize"<\/span>
\n :<\/span>suffix–<\/span>icon=<\/span>"suffixIcon"<\/span>
\n @<\/span>click<\/span><\/span>=<\/span>"onTriggerClick"<\/span>
\n @<\/span>clear<\/span><\/span>=<\/span>"onClear"<\/span>
\n @<\/span>arrow<\/span><\/span>–<\/span>change=<\/span>"rangeArrowLeft = $event"<\/span>
\n @<\/span>side<\/span><\/span>–<\/span>focus=<\/span>"onSideFocus"<\/span>
\n @<\/span>text<\/span><\/span>–<\/span>confirm=<\/span>"onTextConfirm"<\/span>
\n @<\/span>focus<\/span><\/span>=<\/span>"onTriggerFocus"<\/span>
\n @<\/span>blur<\/span><\/span>=<\/span>"emits('blur', $event)"<\/span>
\n ><\/span>
\n <<\/span>template #suffix><\/span>
\n <<\/span>slot name=<\/span>"suffixIcon"<\/span>><\/span>
\n <<\/span>component :<\/span>is<\/span>=<\/span>"suffixIcon"<\/span> v–<\/span>if<\/span>=<\/span>"suffixIcon"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>slot><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>template #separator><\/span>
\n <<\/span>slot name=<\/span>"separator"<\/span>><\/span>
\n <<\/span>PickerIcon name=<\/span>"swap-right"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>slot><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>PickerTrigger><\/span>
\n <<\/span>Popup
\n ref=<\/span>"popupRef"<\/span>
\n :<\/span>show=<\/span>"openModel && !fullyDisabled"<\/span>
\n :<\/span>to=<\/span>"to"<\/span>
\n :<\/span>anchor=<\/span>"wrapperRef"<\/span>
\n :<\/span>placement=<\/span>"placement"<\/span>
\n :<\/span>offset=<\/span>"popupOffset"<\/span>
\n :<\/span>panel–<\/span>class<\/span>=<\/span>"mergedPanelClass"<\/span>
\n :<\/span>panel–<\/span>style=<\/span>"{ …panelStyle, …themeVars }"<\/span>
\n :<\/span>z–<\/span>index=<\/span>"zIndex"<\/span>
\n :<\/span>default<\/span>–<\/span>z–<\/span>index=<\/span>"FLOATING_LAYER_Z_INDEX.select"<\/span>
\n :<\/span>transition–<\/span>props=<\/span>"panelTransitionProps"<\/span>
\n close–<\/span>on–<\/span>outside–<\/span>click
\n @<\/span>keydown<\/span><\/span>.<\/span>esc=<\/span>"onEscKeydown"<\/span>
\n @<\/span>outside<\/span><\/span>–<\/span>click=<\/span>"requestOpen(false)"<\/span>
\n ><\/span>
\n <<\/span>RangePanel
\n v–<\/span>if<\/span>=<\/span>"isRange"<\/span>
\n ref=<\/span>"rangePanelRef"<\/span>
\n :<\/span>value=<\/span>"panelRangeValue"<\/span>
\n :<\/span>base–<\/span>mode=<\/span>"panelBaseMode"<\/span>
\n :<\/span>active=<\/span>"openModel"<\/span>
\n :<\/span>active–<\/span>section=<\/span>"activeSection"<\/span>
\n :<\/span>active–<\/span>side=<\/span>"activeSide"<\/span>
\n :<\/span>start–<\/span>day–<\/span>of<\/span>–<\/span>week=<\/span>"startDayOfWeek"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"mergedRangeDisabledDate"<\/span>
\n :<\/span>date–<\/span>render=<\/span>"mergedDateRender"<\/span>
\n :<\/span>default<\/span>–<\/span>picker–<\/span>value=<\/span>"defaultPickerValue"<\/span>
\n :<\/span>extra–<\/span>footer=<\/span>"mergedExtraFooter"<\/span>
\n :<\/span>datetime=<\/span>"isDateTimeRange"<\/span>
\n :<\/span>format=<\/span>"mergedFormat"<\/span>
\n :<\/span>header–<\/span>format=<\/span>"format"<\/span>
\n :<\/span>time–<\/span>props=<\/span>"timePickerProps"<\/span>
\n :<\/span>disabled–<\/span>time=<\/span>"rangeDisabledTime"<\/span>
\n :<\/span>default<\/span>–<\/span>time=<\/span>"defaultTime"<\/span>
\n :<\/span>preview–<\/span>value=<\/span>"presetPreview"<\/span>
\n @<\/span>select<\/span><\/span>=<\/span>"onRangeSelect"<\/span>
\n @<\/span>draft<\/span><\/span>–<\/span>change=<\/span>"onRangeDraftChange"<\/span>
\n @<\/span>confirm<\/span><\/span>=<\/span>"onRangeConfirm"<\/span>
\n @<\/span>panel<\/span><\/span>–<\/span>change=<\/span>"onPanelChange"<\/span>
\n @<\/span>hover<\/span><\/span>–<\/span>change=<\/span>"onRangeHover"<\/span>
\n ><\/span>
\n <<\/span>template #presets><\/span>
\n <<\/span>PresetPanel v–<\/span>if<\/span>=<\/span>"presets.length"<\/span> :<\/span>presets=<\/span>"presets"<\/span> @<\/span>select<\/span><\/span>=<\/span>"onPresetSelect"<\/span> @<\/span>hover<\/span><\/span>=<\/span>"onPresetHover"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>RangePanel><\/span>
\n <<\/span>!<\/span>—<\/span> \u8303\u56f4\u5f62\u6001\u7684\u9762\u677f\u6307\u793a\u7bad\u5934：\u4e0e\u6fc0\u6d3b\u6bb5\u4e0b\u5212\u7ebf\u540c\u6e90\u5e73\u79fb\u3001\u968f\u5f39\u51fa\u65b9\u4f4d\u4e0a\u4e0b\u7ffb\u8f6c，\u5c55\u793a\u65f6\u673a\u7531 showArrow \u4e0e\u65b9\u4f4d\u5171\u540c\u51b3\u5b9a —<\/span>><\/span>
\n <<\/span>div v–<\/span>if<\/span>=<\/span>"showRangeArrow"<\/span> class<\/span>=<\/span>"datepicker-range-arrow"<\/span> :<\/span>style=<\/span>"{ left: `${rangeArrowLeft}px` }"<\/span> \/<\/span>><\/span>
\n <<\/span>DatetimePanel
\n v–<\/span>else<\/span>–<\/span>if<\/span>=<\/span>"isDateTime"<\/span>
\n ref=<\/span>"datetimePanelRef"<\/span>
\n :<\/span>value=<\/span>"panelTimestamp"<\/span>
\n :<\/span>active–<\/span>section=<\/span>"activeSection"<\/span>
\n :<\/span>format=<\/span>"mergedFormat"<\/span>
\n :<\/span>header–<\/span>format=<\/span>"format"<\/span>
\n :<\/span>time–<\/span>props=<\/span>"timePickerProps"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledDate"<\/span>
\n :<\/span>disabled–<\/span>time=<\/span>"singleDisabledTime"<\/span>
\n :<\/span>date–<\/span>render=<\/span>"mergedDateRender"<\/span>
\n :<\/span>default<\/span>–<\/span>time=<\/span>"singleDefaultTime"<\/span>
\n :<\/span>default<\/span>–<\/span>picker–<\/span>value=<\/span>"defaultPickerValue"<\/span>
\n :<\/span>extra–<\/span>footer=<\/span>"mergedExtraFooter"<\/span>
\n :<\/span>start–<\/span>day–<\/span>of<\/span>–<\/span>week=<\/span>"startDayOfWeek"<\/span>
\n :<\/span>show–<\/span>now=<\/span>"showNow"<\/span>
\n :<\/span>active=<\/span>"openModel"<\/span>
\n @<\/span>change<\/span><\/span>=<\/span>"onDraftChange"<\/span>
\n @<\/span>confirm<\/span><\/span>=<\/span>"onConfirm"<\/span>
\n @<\/span>panel<\/span><\/span>–<\/span>change=<\/span>"onPanelChange"<\/span>
\n @<\/span>cell<\/span><\/span>–<\/span>hover=<\/span>"onSingleHover($event)"<\/span>
\n @<\/span>cell<\/span><\/span>–<\/span>leave=<\/span>"onSingleHover(null)"<\/span>
\n ><\/span>
\n <<\/span>template #presets><\/span>
\n <<\/span>PresetPanel v–<\/span>if<\/span>=<\/span>"presets.length"<\/span> :<\/span>presets=<\/span>"presets"<\/span> @<\/span>select<\/span><\/span>=<\/span>"onPresetSelect"<\/span> @<\/span>hover<\/span><\/span>=<\/span>"onPresetHover"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatetimePanel><\/span>
\n <<\/span>DatePanel
\n v–<\/span>else<\/span>
\n ref=<\/span>"datePanelRef"<\/span>
\n :<\/span>value=<\/span>"panelTimestamp"<\/span>
\n :<\/span>base–<\/span>mode=<\/span>"panelBaseMode"<\/span>
\n :<\/span>active=<\/span>"openModel"<\/span>
\n :<\/span>start–<\/span>day–<\/span>of<\/span>–<\/span>week=<\/span>"startDayOfWeek"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledDate"<\/span>
\n :<\/span>date–<\/span>render=<\/span>"mergedDateRender"<\/span>
\n :<\/span>default<\/span>–<\/span>picker–<\/span>value=<\/span>"defaultPickerValue"<\/span>
\n :<\/span>extra–<\/span>footer=<\/span>"mergedExtraFooter"<\/span>
\n :<\/span>show–<\/span>today=<\/span>"showToday"<\/span>
\n @<\/span>select<\/span><\/span>=<\/span>"onSelect"<\/span>
\n @<\/span>panel<\/span><\/span>–<\/span>change=<\/span>"onPanelChange"<\/span>
\n @<\/span>cell<\/span><\/span>–<\/span>hover=<\/span>"onSingleHover($event)"<\/span>
\n @<\/span>cell<\/span><\/span>–<\/span>leave=<\/span>"onSingleHover(null)"<\/span>
\n ><\/span>
\n <<\/span>template #presets><\/span>
\n <<\/span>PresetPanel v–<\/span>if<\/span>=<\/span>"presets.length"<\/span> :<\/span>presets=<\/span>"presets"<\/span> @<\/span>select<\/span><\/span>=<\/span>"onPresetSelect"<\/span> @<\/span>hover<\/span><\/span>=<\/span>"onPresetHover"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePanel><\/span>
\n <<\/span>\/<\/span>Popup><\/span>
\n <<\/span>\/<\/span>div><\/span>
\n<<\/span>\/<\/span>template><\/span>
\n<<\/span>style lang=<\/span>"less"<\/span> scoped><\/span>
\n.<\/span>datepicker–<\/span>wrap {<\/span>
\n display:<\/span> inline–<\/span>flex;<\/span>
\n width:<\/span> var<\/span>(<\/span>—<\/span>datepicker–<\/span>width,<\/span> auto)<\/span>;<\/span>
\n :<\/span>deep<\/span>(<\/span>.<\/span>picker–<\/span>trigger)<\/span> {<\/span>
\n flex:<\/span> auto;<\/span>
\n min–<\/span>width:<\/span> 0<\/span>;<\/span>
\n }<\/span>
\n}<\/span>
\n.<\/span>datepicker–<\/span>range–<\/span>arrow {<\/span>
\n position:<\/span> absolute;<\/span>
\n top:<\/span> 0<\/span>;<\/span>
\n z–<\/span>index:<\/span> 1<\/span>;<\/span>
\n width:<\/span> 16px;<\/span>
\n height:<\/span> 16px;<\/span>
\n margin–<\/span>left:<\/span> 16<\/span>.<\/span>5px;<\/span>
\n overflow:<\/span> hidden;<\/span>
\n pointer–<\/span>events:<\/span> none;<\/span>
\n transform:<\/span> translateY<\/span>(<\/span>–<\/span>100<\/span>%<\/span>)<\/span>;<\/span>
\n transition:<\/span> left 0<\/span>.<\/span>3s ease–<\/span>out;<\/span>
\n &<\/span>:<\/span>:<\/span>before {<\/span>
\n position:<\/span> absolute;<\/span>
\n bottom:<\/span> 0<\/span>;<\/span>
\n left:<\/span> 0<\/span>;<\/span>
\n width:<\/span> 16px;<\/span>
\n height:<\/span> 8px;<\/span>
\n background–<\/span>color:<\/span> var<\/span>(<\/span>—<\/span>picker–<\/span>panel–<\/span>bg–<\/span>color,<\/span> var<\/span>(<\/span>—<\/span>va–<\/span>bg–<\/span>elevated–<\/span>color)<\/span>)<\/span>;<\/span>
\n clip–<\/span>path:<\/span> polygon<\/span>(<\/span>
\n 1<\/span>.<\/span>6568542494923806px 100<\/span>%<\/span>,<\/span>
\n 50<\/span>%<\/span> 1<\/span>.<\/span>6568542494923806px,<\/span>
\n 14<\/span>.<\/span>34314575050762px 100<\/span>%<\/span>,<\/span>
\n 1<\/span>.<\/span>6568542494923806px 100<\/span>%<\/span>
\n )<\/span>;<\/span>
\n clip–<\/span>path:<\/span> path<\/span>(<\/span>
\n 'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z'<\/span>
\n )<\/span>;<\/span>
\n content:<\/span> ''<\/span>;<\/span>
\n }<\/span>
\n &<\/span>:<\/span>:<\/span>after {<\/span>
\n position:<\/span> absolute;<\/span>
\n right:<\/span> 0<\/span>;<\/span>
\n bottom:<\/span> 0<\/span>;<\/span>
\n left:<\/span> 0<\/span>;<\/span>
\n width:<\/span> 8<\/span>.<\/span>970562748477143px;<\/span>
\n height:<\/span> 8<\/span>.<\/span>970562748477143px;<\/span>
\n margin:<\/span> auto;<\/span>
\n z–<\/span>index:<\/span> –<\/span>1<\/span>;<\/span>
\n background:<\/span> transparent;<\/span>
\n border–<\/span>radius:<\/span> 0<\/span> 0<\/span> 2px 0<\/span>;<\/span>
\n box–<\/span>shadow:<\/span> 3px 3px 7px rgba<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 0.1<\/span>)<\/span>;<\/span>
\n transform:<\/span> translateY<\/span>(<\/span>50<\/span>%<\/span>)<\/span> rotate<\/span>(<\/span>–<\/span>135deg)<\/span>;<\/span>
\n content:<\/span> ''<\/span>;<\/span>
\n }<\/span>
\n}<\/span>
\n<<\/span>\/<\/span>style><\/span>
\n<<\/span>style lang=<\/span>"less"<\/span>><\/span>
\n\/* \u4ee5\u4e0b\u4e24\u7c7b\u89c4\u5219\u5fc5\u987b\u7559\u5728\u5168\u5c40：\u5b83\u4eec\u4f5c\u7528\u4e8e <Popup> \u5bbf\u4e3b\u7f16\u8bd1\u51fa\u7684\u9762\u677f\u8282\u70b9（scope id \u5c5e\u5bbf\u4e3b），
\n \u4e14 Teleport \u5230 body \u540e\u4e0d\u5728\u672c\u7ec4\u4ef6 DOM \u5b50\u6811\u5185，scoped \u4e0e :deep() \u5747\u9009\u4e0d\u4e2d\u3002
\n \u6536\u53e3\u53e3\u5f84：\u2460 \u9762\u677f\u51e0\u4f55\u4ee5 .datepicker-panel-container \u6536\u53e3；\u2461 \u52a8\u753b\u7c7b\u4e0e\u5173\u952e\u5e27\u7edf\u4e00\u52a0 `datepicker-` \u524d\u7f00，\u907f\u514d\u4e0e\u5bbf\u4e3b\u9875\u9762\u649e\u540d *\/<\/span>
\n.<\/span>datepicker–<\/span>panel–<\/span>container {<\/span>
\n width:<\/span> max–<\/span>content;<\/span>
\n outline:<\/span> none;<\/span>
\n}<\/span>
\n.<\/span>va–<\/span>popup–<\/span>placement–<\/span>top .<\/span>datepicker–<\/span>range–<\/span>arrow,<\/span>
\n.<\/span>va–<\/span>popup–<\/span>placement–<\/span>topLeft .<\/span>datepicker–<\/span>range–<\/span>arrow,<\/span>
\n.<\/span>va–<\/span>popup–<\/span>placement–<\/span>topRight .<\/span>datepicker–<\/span>range–<\/span>arrow {<\/span>
\n top:<\/span> auto;<\/span>
\n bottom:<\/span> 0<\/span>;<\/span>
\n transform:<\/span> translateY<\/span>(<\/span>100<\/span>%<\/span>)<\/span> rotate<\/span>(<\/span>180deg)<\/span>;<\/span>
\n}<\/span>
\n.<\/span>datepicker–<\/span>panel–<\/span>container.<\/span>va–<\/span>popup–<\/span>leaving .<\/span>picker–<\/span>panel–<\/span>body .<\/span>picker–<\/span>panel–<\/span>cell–<\/span>inner {<\/span>
\n transition:<\/span> none;<\/span>
\n}<\/span>
\n.<\/span>datepicker–<\/span>zoom–<\/span>enter–<\/span>active,<\/span>
\n.<\/span>datepicker–<\/span>zoom–<\/span>leave–<\/span>active {<\/span>
\n animation–<\/span>duration:<\/span> 0<\/span>.<\/span>2s;<\/span>
\n animation–<\/span>fill–<\/span>mode:<\/span> both;<\/span>
\n}<\/span>
\n.<\/span>datepicker–<\/span>zoom–<\/span>enter–<\/span>active {<\/span>
\n animation–<\/span>name:<\/span> datepickerZoomIn;<\/span>
\n animation–<\/span>timing–<\/span>function<\/span>:<\/span> cubic–<\/span>bezier<\/span>(<\/span>0.23<\/span>,<\/span> 1<\/span>,<\/span> 0.32<\/span>,<\/span> 1<\/span>)<\/span>;<\/span>
\n}<\/span>
\n.<\/span>datepicker–<\/span>zoom–<\/span>leave–<\/span>active {<\/span>
\n animation–<\/span>name:<\/span> datepickerZoomOut;<\/span>
\n animation–<\/span>timing–<\/span>function<\/span>:<\/span> cubic–<\/span>bezier<\/span>(<\/span>0.755<\/span>,<\/span> 0.05<\/span>,<\/span> 0.855<\/span>,<\/span> 0.06<\/span>)<\/span>;<\/span>
\n}<\/span>
\n.<\/span>datepicker–<\/span>zoom–<\/span>enter–<\/span>from,<\/span>
\n.<\/span>datepicker–<\/span>zoom–<\/span>leave–<\/span>to {<\/span>
\n opacity:<\/span> 0<\/span>;<\/span>
\n}<\/span>
\n@<\/span>keyframes<\/span><\/span> datepickerZoomIn {<\/span>
\n 0<\/span>%<\/span> {<\/span>
\n opacity:<\/span> 0<\/span>;<\/span>
\n transform:<\/span> scaleY<\/span>(<\/span>0.8<\/span>)<\/span>;<\/span>
\n }<\/span>
\n 100<\/span>%<\/span> {<\/span>
\n opacity:<\/span> 1<\/span>;<\/span>
\n transform:<\/span> scaleY<\/span>(<\/span>1<\/span>)<\/span>;<\/span>
\n }<\/span>
\n}<\/span>
\n@<\/span>keyframes<\/span><\/span> datepickerZoomOut {<\/span>
\n 0<\/span>%<\/span> {<\/span>
\n opacity:<\/span> 1<\/span>;<\/span>
\n transform:<\/span> scaleY<\/span>(<\/span>1<\/span>)<\/span>;<\/span>
\n }<\/span>
\n 100<\/span>%<\/span> {<\/span>
\n opacity:<\/span> 0<\/span>;<\/span>
\n transform:<\/span> scaleY<\/span>(<\/span>0.8<\/span>)<\/span>;<\/span>
\n }<\/span>
\n}<\/span>
\n<<\/span>\/<\/span>style><\/span><\/p>\n

\u5728\u8981\u4f7f\u7528\u7684\u9875\u9762\u5f15\u5165<\/h3>\n

<<\/span>script setup lang=<\/span>"ts"<\/span>><\/span>
\nimport<\/span> DatePicker from<\/span> '.\/DatePicker.vue'<\/span>
\nimport<\/span> {<\/span> computed,<\/span> ref }<\/span> from<\/span> 'vue'<\/span>
\nimport<\/span> type<\/span> {<\/span> CSSProperties }<\/span> from<\/span> 'vue'<\/span>
\nimport<\/span> {<\/span>
\n addDays,<\/span>
\n addMonths,<\/span>
\n differenceInCalendarDays,<\/span>
\n endOfDay,<\/span>
\n getDate,<\/span>
\n getDay,<\/span>
\n getHours,<\/span>
\n getMinutes,<\/span>
\n getSeconds,<\/span>
\n isSameDay,<\/span>
\n startOfDay,<\/span>
\n startOfMonth
\n}<\/span> from<\/span> 'date-fns'<\/span>
\nimport<\/span> type<\/span> {<\/span> DatePickerProps }<\/span> from<\/span> 'vue-amazing-ui'<\/span>
\n\/** \u6f14\u793a\u7528\u4f8b\u7684\u56fa\u5b9a\u503c：\u53d6\u56fa\u5b9a\u65e5\u671f（\u4e0d\u968f\u5f53\u5929\u53d8\u5316），\u4fbf\u4e8e\u622a\u56fe\u4e0e\u6587\u6863\u5c55\u793a *\/<\/span>
\nconst<\/span> fixedDate =<\/span> new<\/span> Date<\/span>(<\/span>2026<\/span>,<\/span> 9<\/span>,<\/span> 10<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n\/** \u8303\u56f4\u7528\u4f8b\u7684\u521d\u59cb\u503c：\u4e24\u7aef\u90fd\u5f52\u4e00\u5230\u5f53\u65e5\u96f6\u70b9，\u4e0e\u9762\u677f\u6309\u5929\u9009\u62e9\u7684\u7c92\u5ea6\u4e00\u81f4 *\/<\/span>
\nfunction<\/span> initialRange<\/span>(<\/span>startOffset:<\/span> number<\/span> =<\/span> 0<\/span>,<\/span> endOffset:<\/span> number<\/span> =<\/span> 7<\/span>)<\/span>:<\/span> [<\/span>number<\/span>,<\/span> number<\/span>]<\/span> {<\/span>
\n const<\/span> start =<\/span> startOfDay<\/span>(<\/span>addDays<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> startOffset)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n const<\/span> end =<\/span> startOfDay<\/span>(<\/span>addDays<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> endOffset)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n return<\/span> [<\/span>start,<\/span> end]<\/span>
\n}<\/span>
\n\/\/ \u5404\u7528\u4f8b\u72ec\u7acb\u6301\u6709\u4e00\u7ec4\u503c，\u907f\u514d\u5728\u4e00\u4e2a\u7528\u4f8b\u91cc\u9009\u65e5\u671f\u5f71\u54cd\u5230\u5176\u5b83\u7528\u4f8b<\/span>
\n\/\/ \u9664\u300c\u65e5\u671f\u683c\u5f0f\u300d\u300c\u7981\u7528\u300d\u7b49\u5c11\u6570\u9700\u8981\u5c55\u793a\u5df2\u9009\u503c\u7684\u7528\u4f8b\u5916，\u5176\u4f59\u7528\u4f8b\u5747\u4e0d\u8bbe\u521d\u59cb\u503c<\/span>
\nconst<\/span> basicValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> slashValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>fixedDate)<\/span>
\nconst<\/span> chineseValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>fixedDate)<\/span>
\nconst<\/span> rangeFormatValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>[<\/span>fixedDate,<\/span> addDays<\/span>(<\/span>fixedDate,<\/span> 5<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>]<\/span>)<\/span>
\nconst<\/span> disabledValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>fixedDate)<\/span>
\nconst<\/span> beforeTodayValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> afterTodayValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> weekendValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> sizeCaseValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> suffixValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> errorValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> warningValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> errorRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> warningRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> placementBottomLeftValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> placementBottomRightValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> placementTopLeftValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> placementTopRightValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> placementRangeBottomLeftValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> placementRangeTopLeftValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u952e\u76d8\u64cd\u4f5c\u7528\u4f8b：\u65e5\u671f \/ \u8303\u56f4 \/ \u65e5\u671f\u65f6\u95f4\u5404\u4e00；\u65e0\u521d\u59cb\u503c\u65f6\u5149\u6807\u4ee5\u9762\u677f\u89c6\u56fe\u65e5\u671f（\u5f53\u5929）\u4e3a\u8d77\u70b9，\u65b9\u5411\u952e\u540c\u6837\u53ef\u64cd\u4f5c<\/span>
\nconst<\/span> keyboardValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> keyboardRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> keyboardDateTimeValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u5468\u5f62\u6001\u7528\u4f8b：\u9762\u677f\u6309 ISO \u5468\u6210\u884c\u9ad8\u4eae，\u5c55\u793a\u683c\u5f0f\u4e3a ISO \u5468\u5e74 + \u5468\u5e8f\u53f7，\u5e26\u300c\u5468\u300d\u5b57\u540e\u7f00<\/span>
\nconst<\/span> weekValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u6708 \/ \u5b63 \/ \u5e74\u5f62\u6001\u7528\u4f8b：\u521d\u59cb\u503c\u4e3a\u7a7a<\/span>
\nconst<\/span> monthValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> quarterValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> yearValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> monthFormatValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>startOfMonth<\/span>(<\/span>fixedDate)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>)<\/span>
\n\/\/ \u5468\u683c\u5f0f\u7528\u4f8b：\u5468\u5e74\u5360\u4f4d\u7b26\u53ea\u80fd\u53d6 ISO \u53e3\u5f84（RRRR）\u2014\u2014\u4e0e\u5468\u5e8f\u53f7（II）\u914d\u5bf9\u624d\u53ef\u89e3\u6790，\u8be6\u89c1\u4e0b\u65b9 format \u7528\u4f8b\u8bf4\u660e；\u8be5\u7528\u4f8b\u4e0e\u5b98\u65b9\u4e00\u81f4\u53d6\u5f53\u5929\u503c<\/span>
\nconst<\/span> weekFormatValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>Date.<\/span>now<\/span>(<\/span>)<\/span>)<\/span>
\nconst<\/span> disabledMonthValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>startOfMonth<\/span>(<\/span>fixedDate)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>)<\/span>
\nconst<\/span> disabledFullRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>[<\/span>fixedDate,<\/span> fixedDate]<\/span>)<\/span>
\nconst<\/span> disabledMonthBeforeValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> sizeMonthValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> sizeWeekValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u6708 \/ \u5b63 \/ \u5e74\u8303\u56f4\u7528\u4f8b：\u521d\u59cb\u503c\u4e3a\u7a7a<\/span>
\nconst<\/span> monthRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> quarterRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> yearRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u5468\u8303\u56f4\u7528\u4f8b：\u521d\u59cb\u503c\u4e3a\u7a7a<\/span>
\nconst<\/span> weekRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> presetMonthRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u65e0\u8fb9\u6846\u7528\u4f8b\u7684\u6708 \/ \u5b63 \/ \u5e74\u5f62\u6001：\u5404\u6301\u4e00\u7ec4\u503c，\u4e0d\u4e0e\u5176\u5b83\u7528\u4f8b\u8054\u52a8；\u521d\u59cb\u503c\u5747\u4e3a\u7a7a<\/span>
\nconst<\/span> borderlessMonthValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessQuarterValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessYearValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessMonthRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessYearRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessWeekValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessWeekRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessDateRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> borderlessQuarterRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u6708\u8303\u56f4\u7528\u4f8b\u7684\u9884\u8bbe：\u503c\u540c\u6837\u652f\u6301\u65f6\u95f4\u6233\u4e0e\u51fd\u6570（\u6b64\u5904\u4e3a\u300c\u8fd1 N \u4e2a\u6708\u300d\u4e24\u4e2a\u533a\u95f4）<\/span>
\nconst<\/span> monthRangePresets:<\/span> NonNullable<<\/span>DatePickerProps[<\/span>'presets'<\/span>]<\/span>><\/span> =<\/span> [<\/span>
\n {<\/span>
\n label:<\/span> '\u8fd1 3 \u4e2a\u6708'<\/span>,<\/span>
\n value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> [<\/span>startOfMonth<\/span>(<\/span>addMonths<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> –<\/span>2<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>,<\/span> startOfMonth<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>]<\/span>
\n }<\/span>,<\/span>
\n {<\/span>
\n label:<\/span> '\u8fd1\u534a\u5e74'<\/span>,<\/span>
\n value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> [<\/span>startOfMonth<\/span>(<\/span>addMonths<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> –<\/span>5<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>,<\/span> startOfMonth<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>]<\/span>
\n }<\/span>
\n]<\/span>
\n\/\/ \u8303\u56f4\u7528\u4f8b：\u4e3b\u7528\u4f8b\u7684\u65e5\u671f\u8303\u56f4\u5f62\u6001，\u521d\u59cb\u503c\u4e3a\u7a7a<\/span>
\nconst<\/span> rangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> sizeRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> rangePlaceholder:<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> =<\/span> [<\/span>'\u5f00\u59cb\u65e5\u671f'<\/span>,<\/span> '\u7ed3\u675f\u65e5\u671f'<\/span>]<\/span>
\n\/\/ \u5176\u4f59\u8303\u56f4\u5f62\u6001\u7684\u63d0\u793a\u6587\u5b57\u6309\u5f62\u6001\u533a\u5206（\u5468 \/ \u6708 \/ \u5b63 \/ \u5e74\u5404\u6709\u72ec\u7acb\u6587\u6848）<\/span>
\nconst<\/span> weekRangePlaceholder:<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> =<\/span> [<\/span>'\u5f00\u59cb\u5468'<\/span>,<\/span> '\u7ed3\u675f\u5468'<\/span>]<\/span>
\nconst<\/span> monthRangePlaceholder:<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> =<\/span> [<\/span>'\u5f00\u59cb\u6708\u4efd'<\/span>,<\/span> '\u7ed3\u675f\u6708\u4efd'<\/span>]<\/span>
\nconst<\/span> quarterRangePlaceholder:<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> =<\/span> [<\/span>'\u5f00\u59cb\u5b63\u5ea6'<\/span>,<\/span> '\u7ed3\u675f\u5b63\u5ea6'<\/span>]<\/span>
\nconst<\/span> yearRangePlaceholder:<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> =<\/span> [<\/span>'\u5f00\u59cb\u5e74\u4efd'<\/span>,<\/span> '\u7ed3\u675f\u5e74\u4efd'<\/span>]<\/span>
\n\/\/ \u5207\u6362\u4e0d\u540c\u7684\u9009\u62e9\u5668\u7528\u4f8b：\u5206\u6bb5\u63a7\u4ef6\u5207\u6362\u5f62\u6001，\u5404\u5f62\u6001\u5171\u7528\u540c\u4e00\u4e2a\u7ed1\u5b9a\u503c<\/span>
\ntype<\/span> SwitchableType<\/span> =<\/span> 'date'<\/span> |<\/span> 'week'<\/span> |<\/span> 'month'<\/span> |<\/span> 'quarter'<\/span> |<\/span> 'year'<\/span>
\nconst<\/span> switchableType =<\/span> ref<\/span><<\/span>SwitchableType><\/span><\/span><\/span>(<\/span>'date'<\/span>)<\/span>
\nconst<\/span> switchableValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> switchableOptions:<\/span> {<\/span> label:<\/span> string<\/span>;<\/span> value:<\/span> SwitchableType }<\/span>[<\/span>]<\/span> =<\/span> [<\/span>
\n {<\/span> label:<\/span> '\u65e5\u671f'<\/span>,<\/span> value:<\/span> 'date'<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u5468'<\/span>,<\/span> value:<\/span> 'week'<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u6708\u4efd'<\/span>,<\/span> value:<\/span> 'month'<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u5b63\u5ea6'<\/span>,<\/span> value:<\/span> 'quarter'<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u5e74\u4efd'<\/span>,<\/span> value:<\/span> 'year'<\/span> }<\/span>
\n]<\/span>
\n\/** \u5207\u6362\u9009\u62e9\u5668\u7684\u63d0\u793a\u6587\u5b57：\u968f\u5f62\u6001\u5207\u6362，\u4e0e\u5404\u5f62\u6001\u57fa\u672c\u7528\u4f8b\u7684\u63d0\u793a\u4fdd\u6301\u4e00\u81f4 *\/<\/span>
\nconst<\/span> switchablePlaceholder =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> placeholderMap:<\/span> Record<<\/span>SwitchableType,<\/span> string<\/span>><\/span> =<\/span> {<\/span>
\n date:<\/span> '\u8bf7\u9009\u62e9\u65e5\u671f'<\/span>,<\/span>
\n week:<\/span> '\u8bf7\u9009\u62e9\u5468'<\/span>,<\/span>
\n month:<\/span> '\u8bf7\u9009\u62e9\u6708\u4efd'<\/span>,<\/span>
\n quarter:<\/span> '\u8bf7\u9009\u62e9\u5b63\u5ea6'<\/span>,<\/span>
\n year:<\/span> '\u8bf7\u9009\u62e9\u5e74\u4efd'<\/span>
\n }<\/span>
\n return<\/span> placeholderMap[<\/span>switchableType.<\/span>value]<\/span>
\n}<\/span>)<\/span>
\n\/\/ \u65e5\u671f\u65f6\u95f4\u8303\u56f4\u7528\u4f8b：\u5355\u4e2a\u65e5\u671f\u65f6\u95f4\u9762\u677f + \u4e24\u6bb5\u5207\u6362，\u521d\u59cb\u503c\u4e3a\u7a7a<\/span>
\nconst<\/span> dateTimeRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u6309\u6bb5\u9ed8\u8ba4\u65f6\u523b\u7528\u4f8b：\u8303\u56f4\u5f62\u6001\u6309\u6bb5\u6307\u5b9a（\u8d77\u70b9\u5f53\u65e5 0 \u70b9\u3001\u7ec8\u70b9\u5f53\u65e5 23:59:59）<\/span>
\nconst<\/span> defaultTimeRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u8d77\u70b9\u53d6\u5f53\u65e5 0 \u70b9\u3001\u7ec8\u70b9\u53d6\u5f53\u65e5 23:59:59（\u53ea\u53d6\u5176\u4e2d\u7684\u65f6\u5206\u79d2，\u65e5\u671f\u90e8\u5206\u4e0d\u53c2\u4e0e\u843d\u503c） *\/<\/span>
\nconst<\/span> rangeDefaultTime:<\/span> NonNullable<<\/span>DatePickerProps[<\/span>'defaultTime'<\/span>]<\/span>><\/span> =<\/span> [<\/span>
\n startOfDay<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>,<\/span>
\n endOfDay<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n]<\/span>
\n\/\/ \u7981\u7528\u65e5\u671f\u7528\u4f8b\u7684\u8303\u56f4\u53d8\u4f53：\u521d\u59cb\u4e3a\u7a7a\u503c<\/span>
\nconst<\/span> disabledRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u9010\u6bb5\u7981\u7528\u7528\u4f8b：\u8d77\u70b9\u6bb5\u7981\u7528\u4e14\u6301\u6709\u503c（\u8d77\u70b9\u4e0d\u53ef\u8f93\u5165\u4f46\u503c\u4ecd\u5c55\u793a）\u3001\u7ec8\u70b9\u6bb5\u53ef\u7f16\u8f91；\u88ab\u7981\u7528\u6bb5\u6709\u503c\u624d\u80fd\u5c55\u793a\u5176\u65e5\u671f\u7ea6\u675f<\/span>
\nconst<\/span> disabledSideRangeInit =<\/span> initialRange<\/span>(<\/span>–<\/span>3<\/span>,<\/span> 0<\/span>)<\/span>
\nconst<\/span> disabledSideRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>disabledSideRangeInit)<\/span>
\n\/\/ \u65e5\u671f\u65f6\u95f4\u7528\u4f8b：\u4e3b\u7528\u4f8b + \u65f6\u95f4\u9762\u677f\u9009\u9879 \/ 12 \u5c0f\u65f6\u5236 \/ \u9690\u85cf\u300c\u6b64\u523b\u300d\u4e09\u4e2a\u7ec6\u9879，\u521d\u59cb\u503c\u5747\u4e3a\u7a7a<\/span>
\nconst<\/span> datetimeValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> minuteStepValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> twelveHourValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> showNowValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u4e8b\u4ef6\u7528\u4f8b：\u5355\u9009 \/ \u8303\u56f4 \/ \u65e5\u671f\u65f6\u95f4\u5404\u4e00，\u7ed1\u5b9a\u540e\u53ef\u5728\u63a7\u5236\u53f0\u67e5\u770b\u5404\u4e8b\u4ef6\u7684\u89e6\u53d1\u65f6\u673a\u4e0e\u53c2\u6570；\u521d\u59cb\u503c\u5747\u4e3a\u7a7a<\/span>
\nconst<\/span> eventValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> eventRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> eventDateTimeValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03：\u503c\u4e0e\u683c\u5f0f\u5316\u503c\u53cc\u8f68 *\/<\/span>
\nfunction<\/span> onEventChange<\/span>(<\/span>
\n value:<\/span> number<\/span> |<\/span> [<\/span>number<\/span> |<\/span> null<\/span>,<\/span> number<\/span> |<\/span> null<\/span>]<\/span> |<\/span> null<\/span>,<\/span>
\n formattedValue:<\/span> string<\/span> |<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> |<\/span> null<\/span>
\n)<\/span>:<\/span> void<\/span> {<\/span>
\n console<\/span>.<\/span>log<\/span>(<\/span>'change'<\/span>,<\/span> value,<\/span> formattedValue)<\/span>
\n}<\/span>
\n\/** \u8303\u56f4\u5f62\u6001\u5f85\u9009\u533a\u95f4\u53d8\u5316\u65f6\u7684\u56de\u8c03：`info.range` \u6807\u8bc6\u672c\u6b21\u6539\u52a8\u843d\u5728\u54ea\u4e00\u6bb5 *\/<\/span>
\nfunction<\/span> onEventCalendarChange<\/span>(<\/span>
\n value:<\/span> [<\/span>number<\/span> |<\/span> null<\/span>,<\/span> number<\/span> |<\/span> null<\/span>]<\/span> |<\/span> null<\/span>,<\/span>
\n formattedValue:<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> |<\/span> null<\/span>,<\/span>
\n info:<\/span> {<\/span> range:<\/span> 'start'<\/span> |<\/span> 'end'<\/span> }<\/span>
\n)<\/span>:<\/span> void<\/span> {<\/span>
\n console<\/span>.<\/span>log<\/span>(<\/span>'calendarChange'<\/span>,<\/span> value,<\/span> formattedValue,<\/span> info)<\/span>
\n}<\/span>
\n\/** \u5e26\u65f6\u95f4\u7684\u5f62\u6001\u70b9\u51fb\u300c\u786e\u5b9a\u300d\u65f6\u7684\u56de\u8c03（\u300c\u6b64\u523b\u300d\u662f\u5feb\u6377\u5165\u53e3，\u4e0d\u6d3e\u53d1） *\/<\/span>
\nfunction<\/span> onEventOk<\/span>(<\/span>
\n value:<\/span> number<\/span> |<\/span> [<\/span>number<\/span> |<\/span> null<\/span>,<\/span> number<\/span> |<\/span> null<\/span>]<\/span> |<\/span> null<\/span>,<\/span>
\n formattedValue:<\/span> string<\/span> |<\/span> [<\/span>string<\/span>,<\/span> string<\/span>]<\/span> |<\/span> null<\/span>
\n)<\/span>:<\/span> void<\/span> {<\/span>
\n console<\/span>.<\/span>log<\/span>(<\/span>'ok'<\/span>,<\/span> value,<\/span> formattedValue)<\/span>
\n}<\/span>
\n\/** \u9762\u677f\u5c55\u5f00\u6536\u8d77\u65f6\u7684\u56de\u8c03 *\/<\/span>
\nfunction<\/span> onEventOpenChange<\/span>(<\/span>open:<\/span> boolean<\/span>)<\/span>:<\/span> void<\/span> {<\/span>
\n console<\/span>.<\/span>log<\/span>(<\/span>'openChange'<\/span>,<\/span> open)<\/span>
\n}<\/span>
\n\/** \u9762\u677f\u89c6\u56fe\u5207\u6362\u65f6\u7684\u56de\u8c03：`mode` \u4e3a\u5207\u6362\u540e\u7684\u89c6\u56fe\u5c42\u7ea7 *\/<\/span>
\nfunction<\/span> onEventPanelChange<\/span>(<\/span>value:<\/span> number<\/span>,<\/span> mode:<\/span> string<\/span>)<\/span>:<\/span> void<\/span> {<\/span>
\n console<\/span>.<\/span>log<\/span>(<\/span>'panelChange'<\/span>,<\/span> value,<\/span> mode)<\/span>
\n}<\/span>
\n\/** \u8f93\u5165\u6846\u83b7\u53d6\u7126\u70b9\u65f6\u7684\u56de\u8c03 *\/<\/span>
\nfunction<\/span> onEventFocus<\/span>(<\/span>event:<\/span> FocusEvent)<\/span>:<\/span> void<\/span> {<\/span>
\n console<\/span>.<\/span>log<\/span>(<\/span>'focus'<\/span>,<\/span> event)<\/span>
\n}<\/span>
\n\/** \u8f93\u5165\u6846\u5931\u53bb\u7126\u70b9\u65f6\u7684\u56de\u8c03 *\/<\/span>
\nfunction<\/span> onEventBlur<\/span>(<\/span>event:<\/span> FocusEvent)<\/span>:<\/span> void<\/span> {<\/span>
\n console<\/span>.<\/span>log<\/span>(<\/span>'blur'<\/span>,<\/span> event)<\/span>
\n}<\/span>
\n\/\/ \u4e0d\u53ef\u9009\u62e9\u65e5\u671f\u548c\u65f6\u95f4\u7528\u4f8b：\u521d\u59cb\u4e3a\u7a7a\u503c，\u5c55\u5f00\u540e\u518d\u9009\u62e9<\/span>
\nconst<\/span> disabledDateTimeValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/\/ \u9690\u85cf\u7981\u7528\u9879\u7528\u4f8b：\u4e0e\u300c\u4e0d\u53ef\u9009\u62e9\u65e5\u671f\u548c\u65f6\u95f4\u300d\u540c\u6e90，\u6539\u7528 timePickerProps \u628a\u7981\u7528\u7684\u65f6\u5206\u79d2\u4ece\u9762\u677f\u4e2d\u9690\u85cf<\/span>
\nconst<\/span> hideDisabledOptionsValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u4e0d\u53ef\u9009\u62e9\u4eca\u5929\u4e4b\u540e\u7684\u65e5\u671f（`disabledDate` \u5165\u53c2\u4e3a\u300c\u5f53\u65e5\u96f6\u70b9\u300d\u7684\u6beb\u79d2\u65f6\u95f4\u6233） *\/<\/span>
\nfunction<\/span> disabledDateBefore<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n return<\/span> startOfDay<\/span>(<\/span>timestamp)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span> ><\/span> startOfDay<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n}<\/span>
\n\/** \u53ea\u80fd\u9009\u62e9\u672a\u6765\u4e03\u5929\u5185\u7684\u65e5\u671f *\/<\/span>
\nfunction<\/span> disabledDateAfter<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n const<\/span> current =<\/span> endOfDay<\/span>(<\/span>timestamp)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n return<\/span> current <=<\/span> endOfDay<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span> ||<\/span> current ><\/span> endOfDay<\/span>(<\/span>addDays<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> 7<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n}<\/span>
\n\/** \u4e0d\u53ef\u9009\u62e9\u5468\u516d\u4e0e\u5468\u65e5 *\/<\/span>
\nfunction<\/span> disabledWeekendDate<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n const<\/span> day =<\/span> getDay<\/span>(<\/span>timestamp)<\/span>
\n return<\/span> day ===<\/span> 0<\/span> ||<\/span> day ===<\/span> 6<\/span>
\n}<\/span>
\n\/** \u4e0d\u53ef\u9009\u62e9\u4eca\u5929\u4e4b\u524d\u7684\u6708\u4efd（\u7c92\u5ea6\u4e3a\u6574\u6708：\u6574\u6708\u90fd\u65e9\u4e8e\u4eca\u5929\u624d\u7b97\u7981\u7528） *\/<\/span>
\nfunction<\/span> disabledMonthBefore<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n return<\/span> endOfDay<\/span>(<\/span>timestamp)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span> <<\/span> startOfDay<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n}<\/span>
\n\/** \u534a\u5f00\u533a\u95f4 [start, end) \u7684\u6574\u6570\u5e8f\u5217 *\/<\/span>
\nfunction<\/span> range<\/span>(<\/span>start:<\/span> number<\/span>,<\/span> end:<\/span> number<\/span>)<\/span>:<\/span> number<\/span>[<\/span>]<\/span> {<\/span>
\n return<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>{<\/span> length:<\/span> end –<\/span> start }<\/span>,<\/span> (<\/span>_,<\/span> index)<\/span> =><\/span> index +<\/span> start)<\/span>
\n}<\/span>
\n\/** \u4e0d\u53ef\u9009\u62e9\u4eca\u5929\u53ca\u4e4b\u524d *\/<\/span>
\nfunction<\/span> disabledDateTodayOrBefore<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n return<\/span> endOfDay<\/span>(<\/span>timestamp)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span> <=<\/span> endOfDay<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\n}<\/span>
\n\/** \u7981\u7528\u7684\u65f6\u95f4\u533a\u95f4：4-23 \u65f6 \/ 30-59 \u5206 \/ 55-56 \u79d2 *\/<\/span>
\nfunction<\/span> disabledDateTimeUnits<\/span>(<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>
\n disabledHours<\/span>:<\/span> (<\/span>)<\/span> =><\/span> range<\/span>(<\/span>4<\/span>,<\/span> 24<\/span>)<\/span>,<\/span>
\n disabledMinutes<\/span>:<\/span> (<\/span>)<\/span> =><\/span> range<\/span>(<\/span>30<\/span>,<\/span> 60<\/span>)<\/span>,<\/span>
\n disabledSeconds<\/span>:<\/span> (<\/span>)<\/span> =><\/span> [<\/span>55<\/span>,<\/span> 56<\/span>]<\/span>
\n }<\/span>
\n}<\/span>
\n\/\/ \u9009\u62e9\u4e0d\u8d85\u8fc7\u4e03\u5929\u7684\u8303\u56f4\u7528\u4f8b：\u521d\u59cb\u4e3a\u7a7a\u503c，\u53ef\u9009\u8303\u56f4\u7531\u8349\u7a3f\u533a\u95f4\u52a8\u6001\u9650\u5236<\/span>
\nconst<\/span> sevenDaysValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u8349\u7a3f\u533a\u95f4：`calendarChange` \u76f4\u63a5\u7ed9\u51fa\u7684\u65f6\u95f4\u6233\u533a\u95f4 *\/<\/span>
\nconst<\/span> sevenDaysDraft =<\/span> ref<\/span><<\/span>[<\/span>number<\/span> |<\/span> null<\/span>,<\/span> number<\/span> |<\/span> null<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/**
\n * \u8349\u7a3f\u671f\u95f4\u628a\u53ef\u9009\u65e5\u671f\u9650\u5236\u5728\u8349\u7a3f\u4e24\u7aef \u00b17 \u5929\u5185
\n *
\n * \u8349\u7a3f\u7531 `calendarChange` \u8bb0\u5f55\u3001`disabledDate` \u8bfb\u8349\u7a3f\u52a8\u6001\u6536\u7a84\u53ef\u9009\u8303\u56f4，\u8349\u7a3f\u53d8\u5316\u5373\u91cd\u7b97\u7981\u7528\u6001\u3002
\n *\/<\/span>
\nfunction<\/span> disabledSevenDaysDate<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n const<\/span> draft =<\/span> sevenDaysDraft.<\/span>value
\n if<\/span> (<\/span>!<\/span>draft ||<\/span> (<\/span>draft[<\/span>0<\/span>]<\/span> ===<\/span> null<\/span> &&<\/span> draft[<\/span>1<\/span>]<\/span> ===<\/span> null<\/span>)<\/span>)<\/span> {<\/span>
\n return<\/span> false<\/span>
\n }<\/span>
\n const<\/span> tooLate =<\/span> draft[<\/span>0<\/span>]<\/span> ===<\/span> null<\/span> ?<\/span> false<\/span> :<\/span> differenceInCalendarDays<\/span>(<\/span>timestamp,<\/span> draft[<\/span>0<\/span>]<\/span>)<\/span> ><\/span> 7<\/span>
\n const<\/span> tooEarly =<\/span> draft[<\/span>1<\/span>]<\/span> ===<\/span> null<\/span> ?<\/span> false<\/span> :<\/span> differenceInCalendarDays<\/span>(<\/span>draft[<\/span>1<\/span>]<\/span>,<\/span> timestamp)<\/span> ><\/span> 7<\/span>
\n return<\/span> tooLate ||<\/span> tooEarly
\n}<\/span>
\nfunction<\/span> onSevenDaysCalendarChange<\/span>(<\/span>value:<\/span> [<\/span>number<\/span> |<\/span> null<\/span>,<\/span> number<\/span> |<\/span> null<\/span>]<\/span> |<\/span> null<\/span>)<\/span>:<\/span> void<\/span> {<\/span>
\n sevenDaysDraft.<\/span>value =<\/span> value
\n}<\/span>
\n\/** \u5c55\u5f00\u65f6\u4e22\u5f03\u4e0a\u4e00\u8f6e\u8349\u7a3f：\u5426\u5219\u4e0a\u6b21\u7684\u533a\u95f4\u4f1a\u7ee7\u7eed\u9650\u5236\u672c\u6b21\u53ef\u9009\u8303\u56f4 *\/<\/span>
\nfunction<\/span> onSevenDaysOpenChange<\/span>(<\/span>open:<\/span> boolean<\/span>)<\/span>:<\/span> void<\/span> {<\/span>
\n if<\/span> (<\/span>open)<\/span> {<\/span>
\n sevenDaysDraft.<\/span>value =<\/span> null<\/span>
\n }<\/span>
\n}<\/span>
\n\/\/ \u9884\u8bbe\u8303\u56f4\u7528\u4f8b：\u5355\u9009 \/ \u65e5\u671f\u8303\u56f4 \/ \u65e5\u671f\u65f6\u95f4\u8303\u56f4\u4e09\u79cd\u5f62\u6001\u5404\u6301\u4e00\u7ec4\u503c<\/span>
\nconst<\/span> presetValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> presetRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> presetDateTimeRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u8fd1 N \u5929\u533a\u95f4：\u8d77\u70b9\u53d6 N \u5929\u524d\u7684\u96f6\u70b9\u3001\u7ec8\u70b9\u53d6\u5f53\u524d\u65f6\u523b *\/<\/span>
\nfunction<\/span> recentDaysRange<\/span>(<\/span>days:<\/span> number<\/span>)<\/span>:<\/span> [<\/span>number<\/span>,<\/span> number<\/span>]<\/span> {<\/span>
\n return<\/span> [<\/span>startOfDay<\/span>(<\/span>addDays<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> –<\/span>days)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>,<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span>]<\/span>
\n}<\/span>
\n\/** \u9884\u8bbe\u503c\u53ef\u4e3a\u65f6\u95f4\u6233，\u4e5f\u53ef\u4e3a\u8fd4\u56de\u65f6\u95f4\u6233\u7684\u51fd\u6570（\u51fd\u6570\u503c\u5728\u70b9\u51fb\u65f6\u624d\u6c42\u503c） *\/<\/span>
\nconst<\/span> datePresets:<\/span> NonNullable<<\/span>DatePickerProps[<\/span>'presets'<\/span>]<\/span>><\/span> =<\/span> [<\/span>
\n {<\/span> label:<\/span> '\u6628\u5929'<\/span>,<\/span> value:<\/span> startOfDay<\/span>(<\/span>addDays<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> –<\/span>1<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u4e00\u5468\u524d'<\/span>,<\/span> value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> startOfDay<\/span>(<\/span>addDays<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> –<\/span>7<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u4e00\u4e2a\u6708\u524d'<\/span>,<\/span> value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> startOfDay<\/span>(<\/span>addMonths<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> –<\/span>1<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span> }<\/span>
\n]<\/span>
\nconst<\/span> rangePresets:<\/span> NonNullable<<\/span>DatePickerProps[<\/span>'presets'<\/span>]<\/span>><\/span> =<\/span> [<\/span>
\n {<\/span> label:<\/span> '\u8fd1 7 \u5929'<\/span>,<\/span> value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> recentDaysRange<\/span>(<\/span>7<\/span>)<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u8fd1 14 \u5929'<\/span>,<\/span> value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> recentDaysRange<\/span>(<\/span>14<\/span>)<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u8fd1 30 \u5929'<\/span>,<\/span> value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> recentDaysRange<\/span>(<\/span>30<\/span>)<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> '\u8fd1 90 \u5929'<\/span>,<\/span> value<\/span>:<\/span> (<\/span>)<\/span> =><\/span> recentDaysRange<\/span>(<\/span>90<\/span>)<\/span> }<\/span>
\n]<\/span>
\n\/\/ \u5b9a\u5236\u65e5\u671f\u5355\u5143\u683c\u7528\u4f8b：\u5355\u65e5\u671f\u4e0e\u65e5\u671f\u8303\u56f4\u5404\u6301\u4e00\u7ec4\u503c，\u521d\u59cb\u503c\u5747\u4e3a\u7a7a<\/span>
\nconst<\/span> dateRenderValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> dateRenderRangeValue =<\/span> ref<\/span><<\/span>[<\/span>number<\/span>,<\/span> number<\/span>]<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\n\/** \u5b9a\u5236\u65e5\u671f\u5355\u5143\u683c：\u6bcf\u6708 1 \u53f7\u63cf\u4e00\u5708\u8fb9\u6846（\u5355\u5143\u683c\u5185\u5c42\u5757\u9ad8 24px，\u81ea\u5b9a\u4e49\u8282\u70b9\u987b\u6309 border-box \u7b49\u9ad8，\u5426\u5219\u5916\u6846\u4f1a\u628a\u5706\u5708\u6491\u9ad8 2px） *\/<\/span>
\nfunction<\/span> firstDayCellStyle<\/span>(<\/span>dayOfMonth:<\/span> number<\/span>)<\/span>:<\/span> CSSProperties {<\/span>
\n const<\/span> cellStyle:<\/span> CSSProperties =<\/span> {<\/span> boxSizing:<\/span> 'border-box'<\/span>,<\/span> height:<\/span> '24px'<\/span> }<\/span>
\n return<\/span> dayOfMonth ===<\/span> 1<\/span> ?<\/span> {<\/span> …<\/span>cellStyle,<\/span> border:<\/span> '1px solid #1677ff'<\/span>,<\/span> borderRadius:<\/span> '50%'<\/span> }<\/span> :<\/span> cellStyle
\n}<\/span>
\n\/\/ \u81ea\u5b9a\u4e49\u65e5\u671f\u8303\u56f4\u9009\u62e9\u7528\u4f8b：\u4e24\u4e2a\u72ec\u7acb\u9009\u62e9\u5668\u7ecf disabledDate \/ disabledTime \u4e0e\u5c55\u5f00\u72b6\u6001\u4e92\u76f8\u7ea6\u675f<\/span>
\nconst<\/span> startValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> endValue =<\/span> ref<\/span><<\/span>number<\/span> |<\/span> null<\/span>><\/span><\/span><\/span>(<\/span>null<\/span>)<\/span>
\nconst<\/span> endOpen =<\/span> ref<\/span>(<\/span>false<\/span>)<\/span>
\n\/** \u9009\u4e2d\u65e5\u671f\u65f6\u7684\u9ed8\u8ba4\u65f6\u5206\u79d2 *\/<\/span>
\nconst<\/span> defaultTime =<\/span> startOfDay<\/span>(<\/span>new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>.<\/span>getTime<\/span>(<\/span>)<\/span>
\nconst<\/span> sizeValue =<\/span> ref<\/span><<\/span>DatePickerProps[<\/span>'size'<\/span>]<\/span>><\/span><\/span><\/span>(<\/span>'middle'<\/span>)<\/span>
\nconst<\/span> sizeOptions:<\/span> Array<\/span><<\/span>{<\/span> label:<\/span> string<\/span>;<\/span> value:<\/span> NonNullable<<\/span>DatePickerProps[<\/span>'size'<\/span>]<\/span>><\/span> }<\/span>><\/span> =<\/span> [<\/span>
\n {<\/span> label:<\/span> 'small'<\/span>,<\/span> value:<\/span> 'small'<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> 'middle'<\/span>,<\/span> value:<\/span> 'middle'<\/span> }<\/span>,<\/span>
\n {<\/span> label:<\/span> 'large'<\/span>,<\/span> value:<\/span> 'large'<\/span> }<\/span>
\n]<\/span>
\n\/** \u8d77\u70b9\u4e0d\u5f97\u665a\u4e8e\u7ec8\u70b9\u7684\u300c\u6574\u65e5\u300d：\u540c\u4e00\u5929\u4ecd\u53ef\u9009，\u8d8a\u754c\u7684\u65f6\u95f4\u70b9\u4ea4\u7ed9 disabledTime *\/<\/span>
\nfunction<\/span> disabledStartDate<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n const<\/span> end =<\/span> endValue.<\/span>value
\n return<\/span> end !==<\/span> null<\/span> &&<\/span> differenceInCalendarDays<\/span>(<\/span>timestamp,<\/span> end)<\/span> ><\/span> 0<\/span>
\n}<\/span>
\n\/** \u7ec8\u70b9\u4e0d\u5f97\u65e9\u4e8e\u8d77\u70b9\u7684\u300c\u6574\u65e5\u300d：\u540c\u4e00\u5929\u4ecd\u53ef\u9009 *\/<\/span>
\nfunction<\/span> disabledEndDate<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span>:<\/span> boolean<\/span> {<\/span>
\n const<\/span> start =<\/span> startValue.<\/span>value
\n return<\/span> start !==<\/span> null<\/span> &&<\/span> differenceInCalendarDays<\/span>(<\/span>timestamp,<\/span> start)<\/span> <<\/span> 0<\/span>
\n}<\/span>
\n\/** \u65f6\u95f4\u9762\u677f\u7684\u7981\u7528\u5355\u4f4d *\/<\/span>
\ninterface<\/span> DisabledTimeUnits<\/span> {<\/span>
\n disabledHours<\/span>:<\/span> (<\/span>)<\/span> =><\/span> number<\/span>[<\/span>]<\/span>
\n disabledMinutes<\/span>:<\/span> (<\/span>currentHour:<\/span> number<\/span>)<\/span> =><\/span> number<\/span>[<\/span>]<\/span>
\n disabledSeconds<\/span>:<\/span> (<\/span>currentHour:<\/span> number<\/span>,<\/span> currentMinute:<\/span> number<\/span>)<\/span> =><\/span> number<\/span>[<\/span>]<\/span>
\n}<\/span>
\n\/**
\n * \u7531\u8fb9\u754c\u65f6\u523b\u7684\u65f6\u5206\u79d2\u6784\u9020\u7981\u7528\u5355\u4f4d：\u9010\u7ea7\u5224\u5b9a（\u53ea\u6709\u9ad8\u4e00\u7ea7\u4e0e\u8fb9\u754c\u76f8\u540c，\u4e0b\u4e00\u7ea7\u624d\u6709\u989d\u5916\u7981\u7528\u9879），\u8fb9\u754c\u65f6\u523b\u672c\u8eab\u89c6\u4e3a\u8d8a\u754c
\n *
\n * @param direction `notLaterThan` \u7981\u7528\u65e9\u4e8e\u7b49\u4e8e\u8fb9\u754c\u7684\u65f6\u523b（\u7ec8\u70b9\u4fa7\u7528）\u3001`notEarlierThan` \u7981\u7528\u665a\u4e8e\u7b49\u4e8e\u8fb9\u754c\u7684\u65f6\u523b（\u8d77\u70b9\u4fa7\u7528）
\n *\/<\/span>
\nfunction<\/span> disabledTimeUnitsByBoundary<\/span>(<\/span>
\n hour:<\/span> number<\/span>,<\/span>
\n minute:<\/span> number<\/span>,<\/span>
\n second:<\/span> number<\/span>,<\/span>
\n direction:<\/span> 'notLaterThan'<\/span> |<\/span> 'notEarlierThan'<\/span>
\n)<\/span>:<\/span> DisabledTimeUnits {<\/span>
\n if<\/span> (<\/span>direction ===<\/span> 'notLaterThan'<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>
\n disabledHours<\/span>:<\/span> (<\/span>)<\/span> =><\/span> range<\/span>(<\/span>0<\/span>,<\/span> hour)<\/span>,<\/span>
\n disabledMinutes<\/span>:<\/span> (<\/span>currentHour:<\/span> number<\/span>)<\/span> =><\/span> (<\/span>currentHour ===<\/span> hour ?<\/span> range<\/span>(<\/span>0<\/span>,<\/span> minute)<\/span> :<\/span> [<\/span>]<\/span>)<\/span>,<\/span>
\n disabledSeconds<\/span>:<\/span> (<\/span>currentHour:<\/span> number<\/span>,<\/span> currentMinute:<\/span> number<\/span>)<\/span> =><\/span>
\n currentHour ===<\/span> hour &&<\/span> currentMinute ===<\/span> minute ?<\/span> range<\/span>(<\/span>0<\/span>,<\/span> second +<\/span> 1<\/span>)<\/span> :<\/span> [<\/span>]<\/span>
\n }<\/span>
\n }<\/span>
\n return<\/span> {<\/span>
\n disabledHours<\/span>:<\/span> (<\/span>)<\/span> =><\/span> range<\/span>(<\/span>hour +<\/span> 1<\/span>,<\/span> 24<\/span>)<\/span>,<\/span>
\n disabledMinutes<\/span>:<\/span> (<\/span>currentHour:<\/span> number<\/span>)<\/span> =><\/span> (<\/span>currentHour ===<\/span> hour ?<\/span> range<\/span>(<\/span>minute +<\/span> 1<\/span>,<\/span> 60<\/span>)<\/span> :<\/span> [<\/span>]<\/span>)<\/span>,<\/span>
\n disabledSeconds<\/span>:<\/span> (<\/span>currentHour:<\/span> number<\/span>,<\/span> currentMinute:<\/span> number<\/span>)<\/span> =><\/span>
\n currentHour ===<\/span> hour &&<\/span> currentMinute ===<\/span> minute ?<\/span> range<\/span>(<\/span>second +<\/span> 1<\/span>,<\/span> 60<\/span>)<\/span> :<\/span> [<\/span>]<\/span>
\n }<\/span>
\n}<\/span>
\n\/**
\n * \u540c\u4e00\u5929\u5185\u7684\u65f6\u95f4\u7ea6\u675f：\u8de8\u5929\u5219\u65e0\u989d\u5916\u7981\u7528\u9879（\u6574\u65e5\u8d8a\u754c\u7531\u5185\u6838\u6309\u6fc0\u6d3b\u6bb5\u7981\u7528）
\n *
\n * @param boundary \u7ea6\u675f\u8fb9\u754c\u7684\u65f6\u523b（\u7ec8\u70b9\u4fa7\u4e3a\u8d77\u70b9\u3001\u8d77\u70b9\u4fa7\u4e3a\u7ec8\u70b9）
\n * @param timestamp \u9762\u677f\u5f53\u524d\u6240\u7f16\u8f91\u7684\u65f6\u523b
\n *\/<\/span>
\nfunction<\/span> disabledUnitsNotLaterThan<\/span>(<\/span>boundary:<\/span> number<\/span>,<\/span> timestamp:<\/span> number<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>isSameDay<\/span>(<\/span>timestamp,<\/span> boundary)<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>}<\/span>
\n }<\/span>
\n return<\/span> disabledTimeUnitsByBoundary<\/span>(<\/span>getHours<\/span>(<\/span>boundary)<\/span>,<\/span> getMinutes<\/span>(<\/span>boundary)<\/span>,<\/span> getSeconds<\/span>(<\/span>boundary)<\/span>,<\/span> 'notLaterThan'<\/span>)<\/span>
\n}<\/span>
\n\/** \u540c disabledUnitsNotLaterThan，\u65b9\u5411\u76f8\u53cd：\u7981\u7528\u665a\u4e8e\u8fb9\u754c\u65f6\u523b\u7684\u65f6\u95f4\u5355\u4f4d *\/<\/span>
\nfunction<\/span> disabledUnitsNotEarlierThan<\/span>(<\/span>boundary:<\/span> number<\/span>,<\/span> timestamp:<\/span> number<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>isSameDay<\/span>(<\/span>timestamp,<\/span> boundary)<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>}<\/span>
\n }<\/span>
\n return<\/span> disabledTimeUnitsByBoundary<\/span>(<\/span>getHours<\/span>(<\/span>boundary)<\/span>,<\/span> getMinutes<\/span>(<\/span>boundary)<\/span>,<\/span> getSeconds<\/span>(<\/span>boundary)<\/span>,<\/span> 'notEarlierThan'<\/span>)<\/span>
\n}<\/span>
\n\/** \u7ec8\u70b9\u4fa7：\u540c\u4e00\u5929\u53ea\u5141\u8bb8\u9009\u62e9\u665a\u4e8e\u8d77\u70b9\u65f6\u523b\u7684\u65f6\u95f4 *\/<\/span>
\nfunction<\/span> disabledEndTime<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span> {<\/span>
\n const<\/span> start =<\/span> startValue.<\/span>value
\n return<\/span> start ===<\/span> null<\/span> ?<\/span> {<\/span>}<\/span> :<\/span> disabledUnitsNotLaterThan<\/span>(<\/span>start,<\/span> timestamp)<\/span>
\n}<\/span>
\n\/** \u8d77\u70b9\u4fa7：\u540c\u4e00\u5929\u53ea\u5141\u8bb8\u9009\u62e9\u65e9\u4e8e\u7ec8\u70b9\u65f6\u523b\u7684\u65f6\u95f4 *\/<\/span>
\nfunction<\/span> disabledStartTime<\/span>(<\/span>timestamp:<\/span> number<\/span>)<\/span> {<\/span>
\n const<\/span> end =<\/span> endValue.<\/span>value
\n return<\/span> end ===<\/span> null<\/span> ?<\/span> {<\/span>}<\/span> :<\/span> disabledUnitsNotEarlierThan<\/span>(<\/span>end,<\/span> timestamp)<\/span>
\n}<\/span>
\n\/** \u65e5\u671f\u65f6\u95f4\u8303\u56f4\u7528\u4f8b：\u7ec8\u70b9\u53ea\u9009\u665a\u4e8e\u8d77\u70b9\u7684\u65f6\u5206\u79d2（\u65e5\u671f\u6574\u65e5\u8d8a\u754c\u7531\u5185\u6838\u6309\u6fc0\u6d3b\u6bb5\u81ea\u52a8\u7981\u7528） *\/<\/span>
\nfunction<\/span> disabledDateTimeRangeTime<\/span>(<\/span>timestamp:<\/span> number<\/span>,<\/span> side:<\/span> 'start'<\/span> |<\/span> 'end'<\/span>)<\/span> {<\/span>
\n const<\/span> boundary =<\/span> (<\/span>side ===<\/span> 'end'<\/span> ?<\/span> dateTimeRangeValue.<\/span>value?.<\/span>[<\/span>0<\/span>]<\/span> :<\/span> dateTimeRangeValue.<\/span>value?.<\/span>[<\/span>1<\/span>]<\/span>)<\/span> ??<\/span> null<\/span>
\n if<\/span> (<\/span>boundary ===<\/span> null<\/span>)<\/span> {<\/span>
\n return<\/span> {<\/span>}<\/span>
\n }<\/span>
\n return<\/span> side ===<\/span> 'end'<\/span>
\n ?<\/span> disabledUnitsNotLaterThan<\/span>(<\/span>boundary,<\/span> timestamp)<\/span>
\n :<\/span> disabledUnitsNotEarlierThan<\/span>(<\/span>boundary,<\/span> timestamp)<\/span>
\n}<\/span>
\n\/** \u8d77\u70b9\u9009\u5b8c\u5373\u6536\u8d77：\u628a\u7ec8\u70b9\u76f4\u63a5\u5c55\u5f00，\u7701\u6389\u7528\u6237\u7684\u4e00\u6b21\u70b9\u51fb *\/<\/span>
\nfunction<\/span> onStartOpenChange<\/span>(<\/span>open:<\/span> boolean<\/span>)<\/span>:<\/span> void<\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>open)<\/span> {<\/span>
\n endOpen.<\/span>value =<\/span> true<\/span>
\n }<\/span>
\n}<\/span>
\n<<\/span>\/<\/span>script><\/span>
\n<<\/span>template><\/span>
\n <<\/span>div><\/span>
\n <<\/span>h1><\/span>{<\/span>{<\/span> $route.<\/span>name }<\/span>}<\/span> {<\/span>{<\/span> $route.<\/span>meta.<\/span>title }<\/span>}<\/span><<\/span>\/<\/span>h1><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u57fa\u672c\u4f7f\u7528<<\/span>\/<\/span>h2><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"basicValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"weekValue"<\/span> type=<\/span>"week"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5468"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"monthValue"<\/span> type=<\/span>"month"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u6708\u4efd"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"quarterValue"<\/span> type=<\/span>"quarter"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5b63\u5ea6"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"yearValue"<\/span> type=<\/span>"year"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5e74\u4efd"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u65e5\u671f\u683c\u5f0f<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>\u4f7f\u7528 <<\/span>code><\/span>format<<\/span>\/<\/span>code><\/span> \u5b9a\u5236\u5c55\u793a\u683c\u5f0f<<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"slashValue"<\/span> format=<\/span>"yyyy\/MM\/dd"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"chineseValue"<\/span> format=<\/span>"yyyy\u5e74MM\u6708dd\u65e5"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"monthFormatValue"<\/span> type=<\/span>"month"<\/span> format=<\/span>"yyyy\u5e74MM\u6708"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u6708\u4efd"<\/span> \/<\/span>><\/span>
\n <<\/span>!<\/span>—<\/span> \u5468\u5f62\u6001\u7684\u5468\u5e74\u5360\u4f4d\u7b26\u53d6 ISO<\/span> \u53e3\u5f84（RRRR<\/span>），\u4e0e\u5468\u5e8f\u53f7（II<\/span>）\u914d\u5bf9\u624d\u53ef\u89e3\u6790 —<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"weekFormatValue"<\/span> type=<\/span>"week"<\/span> format=<\/span>"RRRR\u5e74\u7b2cII\u5468"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5468"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"rangeFormatValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n format=<\/span>"yyyy\/MM\/dd"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u8303\u56f4\u9009\u62e9\u5668<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>\u901a\u8fc7\u8bbe\u7f6e <<\/span>code><\/span>type<<\/span>\/<\/span>code><\/span> \u5c5e\u6027，\u6307\u5b9a\u8303\u56f4\u9009\u62e9\u5668\u7c7b\u578b<<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"rangeValue"<\/span> type=<\/span>"daterange"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"weekRangeValue"<\/span> type=<\/span>"weekrange"<\/span> :<\/span>placeholder=<\/span>"weekRangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"monthRangeValue"<\/span> type=<\/span>"monthrange"<\/span> :<\/span>placeholder=<\/span>"monthRangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"quarterRangeValue"<\/span> type=<\/span>"quarterrange"<\/span> :<\/span>placeholder=<\/span>"quarterRangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"yearRangeValue"<\/span> type=<\/span>"yearrange"<\/span> :<\/span>placeholder=<\/span>"yearRangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>
\n <<\/span>code><\/span>type=<\/span>"datetimerange"<\/span><<\/span>\/<\/span>code><\/span>
\n \u5728\u8303\u56f4\u5f62\u6001\u4e0a\u53e0\u52a0\u65f6\u95f4\u9762\u677f：\u4e24\u6bb5\u5171\u7528\u540c\u4e00\u4e2a\u65e5\u671f\u65f6\u95f4\u9762\u677f，\u70b9\u300c\u786e\u5b9a\u300d\u63d0\u4ea4\u5f53\u524d\u6bb5\u5e76\u81ea\u52a8\u5207\u5230\u53e6\u4e00\u7aef，\u4e24\u6bb5\u90fd\u786e\u5b9a\u540e\u624d\u6536\u8d77；\u5c55\u5f00\u671f\u95f4\u7684\u9009\u62e9\u53ea\u843d\u5728\u8349\u7a3f\u4e0a，\u5173\u95ed\u9762\u677f\u5219\u4e22\u5f03\u8349\u7a3f；\u914d\u5408
\n <<\/span>code><\/span>disabledTime<<\/span>\/<\/span>code><\/span> \u53ef\u8ba9\u7ec8\u70b9\u53ea\u9009\u300c\u665a\u4e8e\u8d77\u70b9\u300d\u7684\u65f6\u5206\u79d2（\u65e5\u671f\u6574\u65e5\u8d8a\u754c\u7531\u5185\u6838\u6309\u6fc0\u6d3b\u6bb5\u81ea\u52a8\u7981\u7528）
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"dateTimeRangeValue"<\/span>
\n type=<\/span>"datetimerange"<\/span>
\n :<\/span>disabled–<\/span>time=<\/span>"disabledDateTimeRangeTime"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u5207\u6362\u4e0d\u540c\u7684\u9009\u62e9\u5668<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n \u63d0\u4f9b\u9009\u62e9\u5668，\u81ea\u7531\u5207\u6362\u4e0d\u540c\u7c7b\u578b\u7684\u65e5\u671f\u9009\u62e9\u5668，\u5e38\u7528\u4e8e\u65e5\u671f\u7b5b\u9009\u573a\u5408；\u65f6\u95f4\u9009\u62e9\u7531 <<\/span>code><\/span>TimePicker<<\/span>\/<\/span>code><\/span>
\n \u7ec4\u4ef6\u627f\u62c5，\u6545\u5206\u6bb5\u9879\u4e0d\u542b\u300c\u65f6\u95f4\u300d\u9879
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>Segmented v–<\/span>model:<\/span>value=<\/span>"switchableType"<\/span> :<\/span>options=<\/span>"switchableOptions"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"switchableValue"<\/span> :<\/span>type=<\/span>"switchableType"<\/span> :<\/span>placeholder=<\/span>"switchablePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u65e5\u671f\u65f6\u95f4\u9009\u62e9<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n <<\/span>code><\/span>type=<\/span>"datetime"<\/span><<\/span>\/<\/span>code><\/span> \u589e\u52a0\u9009\u62e9\u65f6\u95f4\u529f\u80fd，\u65f6\u95f4\u9762\u677f\u9009\u9879\u7ecf <<\/span>code><\/span>timePickerProps<<\/span>\/<\/span>code><\/span>
\n \u900f\u4f20；\u5c55\u5f00\u671f\u95f4\u7684\u9009\u62e9\u53ea\u843d\u5728\u8349\u7a3f\u503c\u4e0a，\u70b9\u300c\u786e\u5b9a\u300d\u6216\u300c\u6b64\u523b\u300d\u624d\u63d0\u4ea4，\u5173\u95ed\u9762\u677f\u5219\u4e22\u5f03\u8349\u7a3f
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"datetimeValue"<\/span> type=<\/span>"datetime"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span> \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u5206\u949f\u6309 <<\/span>code><\/span>5<\/span><<\/span>\/<\/span>code><\/span> \u5206\u949f\u6b65\u957f\u9009\u62e9<<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"minuteStepValue"<\/span>
\n type=<\/span>"datetime"<\/span>
\n :<\/span>time–<\/span>picker–<\/span>props=<\/span>"{ minuteStep: 5 }"<\/span>
\n placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>
\n ><\/span><<\/span>code><\/span>12<\/span><<\/span>\/<\/span>code><\/span> \u5c0f\u65f6\u5236：<<\/span>code><\/span>use12Hours<<\/span>\/<\/span>code><\/span> \u4e0e <<\/span>code><\/span>12<\/span><<\/span>\/<\/span>code><\/span> \u5c0f\u65f6\u5236\u683c\u5f0f（<<\/span>code><\/span>hh<<\/span>\/<\/span>code><\/span>）\u914d\u5408\u4f7f\u7528<<\/span>\/<\/span>p
\n ><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"twelveHourValue"<\/span>
\n type=<\/span>"datetime"<\/span>
\n format=<\/span>"yyyy-MM-dd hh:mm:ss"<\/span>
\n :<\/span>time–<\/span>picker–<\/span>props=<\/span>"{ use12Hours: true }"<\/span>
\n placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u9690\u85cf\u300c\u6b64\u523b\u300d\u5feb\u6377<<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"showNowValue"<\/span> type=<\/span>"datetime"<\/span> :<\/span>show–<\/span>now=<\/span>"false"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span> \/<\/span>><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u4e8b\u4ef6<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n \u5355\u9009\u5f62\u6001\u7ed1\u5b9a
\n <<\/span>code><\/span>change<<\/span>\/<\/span>code
\n ><\/span>\u3001<<\/span>code><\/span>openChange<<\/span>\/<\/span>code><\/span>\u3001<<\/span>code><\/span>panelChange<<\/span>\/<\/span>code><\/span>\u3001<<\/span>code><\/span>focus<<\/span>\/<\/span>code><\/span>\u3001<<\/span>code><\/span>blur<<\/span>\/<\/span>code><\/span>，\u8303\u56f4\u5f62\u6001\u7ed1\u5b9a
\n <<\/span>code><\/span>change<<\/span>\/<\/span>code><\/span>\u3001<<\/span>code><\/span>calendarChange<<\/span>\/<\/span>code><\/span>，\u5e26\u65f6\u95f4\u7684\u5f62\u6001\u8fd8\u53ef\u7ed1\u5b9a
\n <<\/span>code><\/span>ok<<\/span>\/<\/span>code><\/span>；\u5404\u4e8b\u4ef6\u7684\u53c2\u6570\u90fd\u4f1a\u6253\u5370\u5230\u63a7\u5236\u53f0
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"eventValue"<\/span>
\n placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span>
\n @<\/span>change<\/span><\/span>=<\/span>"onEventChange"<\/span>
\n @<\/span>open<\/span><\/span>–<\/span>change=<\/span>"onEventOpenChange"<\/span>
\n @<\/span>panel<\/span><\/span>–<\/span>change=<\/span>"onEventPanelChange"<\/span>
\n @<\/span>focus<\/span><\/span>=<\/span>"onEventFocus"<\/span>
\n @<\/span>blur<\/span><\/span>=<\/span>"onEventBlur"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"eventRangeValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n @<\/span>change<\/span><\/span>=<\/span>"onEventChange"<\/span>
\n @<\/span>calendar<\/span><\/span>–<\/span>change=<\/span>"onEventCalendarChange"<\/span>
\n @<\/span>open<\/span><\/span>–<\/span>change=<\/span>"onEventOpenChange"<\/span>
\n @<\/span>panel<\/span><\/span>–<\/span>change=<\/span>"onEventPanelChange"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"eventDateTimeValue"<\/span>
\n type=<\/span>"datetime"<\/span>
\n placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span>
\n @<\/span>change<\/span><\/span>=<\/span>"onEventChange"<\/span>
\n @<\/span>ok<\/span><\/span>=<\/span>"onEventOk"<\/span>
\n @<\/span>open<\/span><\/span>–<\/span>change=<\/span>"onEventOpenChange"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u7981\u7528<<\/span>\/<\/span>h2><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker disabled v–<\/span>model:<\/span>value=<\/span>"disabledValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker disabled v–<\/span>model:<\/span>value=<\/span>"disabledMonthValue"<\/span> type=<\/span>"month"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u6708\u4efd"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker disabled v–<\/span>model:<\/span>value=<\/span>"disabledFullRangeValue"<\/span> type=<\/span>"daterange"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>
\n \u8303\u56f4\u5f62\u6001\u7684 <<\/span>code><\/span>disabled<<\/span>\/<\/span>code><\/span> \u53ef\u4f20\u4e24\u6bb5\u5143\u7ec4\u9010\u6bb5\u7981\u7528，\u88ab\u7981\u7528\u7684\u6bb5\u4e0d\u53ef\u8f93\u5165\u3001\u9762\u677f\u4e5f\u4e0d\u6574\u4f53\u7f6e\u7070
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"disabledSideRangeValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n :<\/span>disabled=<\/span>"[true, false]"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u4e0d\u53ef\u9009\u62e9\u65e5\u671f\u548c\u65f6\u95f4<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n <<\/span>code><\/span>disabledDate<<\/span>\/<\/span>code><\/span> \u4e0e <<\/span>code><\/span>disabledTime<<\/span>\/<\/span>code><\/span> \u5206\u522b\u7981\u6b62\u9009\u62e9\u90e8\u5206\u65e5\u671f\u4e0e\u65f6\u95f4，<<\/span>code><\/span>disabledTime<<\/span>\/<\/span>code><\/span>
\n \u9700\u4e0e\u5e26\u65f6\u95f4\u7684\u5f62\u6001\u914d\u5408\u4f7f\u7528
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"disabledDateTimeValue"<\/span>
\n type=<\/span>"datetime"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledDateTodayOrBefore"<\/span>
\n :<\/span>disabled–<\/span>time=<\/span>"disabledDateTimeUnits"<\/span>
\n :<\/span>default<\/span>–<\/span>time=<\/span>"defaultTime"<\/span>
\n placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u4e0d\u53ef\u9009\u62e9\u4eca\u5929\u4e4b\u540e\u7684\u65e5\u671f<<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"beforeTodayValue"<\/span> :<\/span>disabled–<\/span>date=<\/span>"disabledDateBefore"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u53ea\u80fd\u9009\u62e9\u672a\u6765\u4e03\u5929\u5185\u7684\u65e5\u671f<<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"afterTodayValue"<\/span> :<\/span>disabled–<\/span>date=<\/span>"disabledDateAfter"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u65e5\u671f\u8303\u56f4\u4e0d\u53ef\u9009\u62e9\u4eca\u5929\u53ca\u4e4b\u524d（<<\/span>code><\/span>disabledDate<<\/span>\/<\/span>code><\/span> \u540c\u65f6\u4f5c\u7528\u4e8e\u4e24\u4e2a\u9762\u677f）<<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"disabledRangeValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledDateTodayOrBefore"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u4e0d\u53ef\u9009\u62e9\u5468\u516d\u4e0e\u5468\u65e5<<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"weekendValue"<\/span> :<\/span>disabled–<\/span>date=<\/span>"disabledWeekendDate"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>
\n \u6708\u5f62\u6001\u4e0d\u53ef\u9009\u62e9\u4eca\u5929\u4e4b\u524d\u7684\u6708\u4efd（<<\/span>code><\/span>disabledDate<<\/span>\/<\/span>code><\/span> \u7684\u7c92\u5ea6\u4e3a\u6574\u6708，\u6574\u6708\u90fd\u4e0d\u53ef\u9009\u8be5\u683c\u624d\u7981\u7528）
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"disabledMonthBeforeValue"<\/span>
\n type=<\/span>"month"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledMonthBefore"<\/span>
\n placeholder=<\/span>"\u8bf7\u9009\u62e9\u6708\u4efd"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>p class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>
\n \u7528 <<\/span>code><\/span>time–<\/span>picker–<\/span>props<<\/span>\/<\/span>code><\/span> \u7684 <<\/span>code><\/span>hideDisabledOptions<<\/span>\/<\/span>code><\/span>
\n \u628a\u7981\u7528\u7684\u65f6\u5206\u79d2\u4ece\u9762\u677f\u4e2d\u9690\u85cf（\u800c\u975e\u7f6e\u7070），\u9002\u5408\u7981\u7528\u9879\u8fc7\u591a\u7684\u573a\u666f
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"hideDisabledOptionsValue"<\/span>
\n type=<\/span>"datetime"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledDateTodayOrBefore"<\/span>
\n :<\/span>disabled–<\/span>time=<\/span>"disabledDateTimeUnits"<\/span>
\n :<\/span>time–<\/span>picker–<\/span>props=<\/span>"{ hideDisabledOptions: true }"<\/span>
\n placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u9009\u62e9\u4e0d\u8d85\u8fc7\u4e03\u5929\u7684\u8303\u56f4<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>\u7528 <<\/span>code><\/span>calendarChange<<\/span>\/<\/span>code><\/span> \u8bb0\u5f55\u8349\u7a3f\u533a\u95f4\u3001\u7528 <<\/span>code><\/span>disabledDate<<\/span>\/<\/span>code><\/span> \u8bfb\u8349\u7a3f\u6536\u7a84\u53ef\u9009\u8303\u56f4<<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"sevenDaysValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledSevenDaysDate"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n @<\/span>calendar<\/span><\/span>–<\/span>change=<\/span>"onSevenDaysCalendarChange"<\/span>
\n @<\/span>open<\/span><\/span>–<\/span>change=<\/span>"onSevenDaysOpenChange"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u9884\u8bbe\u8303\u56f4<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n \u7528 <<\/span>code><\/span>presets<<\/span>\/<\/span>code><\/span> \u9884\u8bbe\u5e38\u7528\u65e5\u671f\u4e0e\u533a\u95f4，\u70b9\u51fb\u5373\u586b\u5165\u5e76\u6536\u8d77；\u503c\u53ef\u4e3a\u65f6\u95f4\u6233，\u4e5f\u53ef\u4e3a\u8fd4\u56de\u65f6\u95f4\u6233\u7684\u51fd\u6570
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"presetValue"<\/span> :<\/span>presets=<\/span>"datePresets"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"presetRangeValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n :<\/span>presets=<\/span>"rangePresets"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"presetMonthRangeValue"<\/span>
\n type=<\/span>"monthrange"<\/span>
\n :<\/span>presets=<\/span>"monthRangePresets"<\/span>
\n :<\/span>placeholder=<\/span>"monthRangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"presetDateTimeRangeValue"<\/span>
\n type=<\/span>"datetimerange"<\/span>
\n format=<\/span>"yyyy\/MM\/dd HH:mm:ss"<\/span>
\n width=<\/span>"400px"<\/span>
\n :<\/span>presets=<\/span>"rangePresets"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u989d\u5916\u7684\u9875\u811a<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>\u7528 <<\/span>code><\/span>renderExtraFooter<<\/span>\/<\/span>code><\/span> \u5728\u9762\u677f\u5e95\u90e8\u8ffd\u52a0\u989d\u5916\u5185\u5bb9，\u6e32\u67d3\u5728\u300c\u4eca\u5929\u300d\u300c\u786e\u5b9a\u300d\u7b49\u64cd\u4f5c\u884c\u4e4b\u4e0a<<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span>><\/span>
\n <<\/span>template #renderExtraFooter><\/span>
\n <<\/span>span><\/span>extra footer<<\/span>\/<\/span>span><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>DatePicker type=<\/span>"datetime"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span>><\/span>
\n <<\/span>template #renderExtraFooter><\/span>
\n <<\/span>span><\/span>extra footer<<\/span>\/<\/span>span><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>DatePicker type=<\/span>"daterange"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>><\/span>
\n <<\/span>template #renderExtraFooter><\/span>
\n <<\/span>span><\/span>extra footer<<\/span>\/<\/span>span><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>DatePicker type=<\/span>"datetimerange"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>><\/span>
\n <<\/span>template #renderExtraFooter><\/span>
\n <<\/span>span><\/span>extra footer<<\/span>\/<\/span>span><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>DatePicker type=<\/span>"month"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u6708\u4efd"<\/span>><\/span>
\n <<\/span>template #renderExtraFooter><\/span>
\n <<\/span>span><\/span>extra footer<<\/span>\/<\/span>span><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u4e09\u79cd\u5927\u5c0f<<\/span>\/<\/span>h2><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>RadioGroup v–<\/span>model:<\/span>value=<\/span>"sizeValue"<\/span> :<\/span>options=<\/span>"sizeOptions"<\/span> button button–<\/span>style=<\/span>"solid"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"sizeCaseValue"<\/span> :<\/span>size=<\/span>"sizeValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"sizeMonthValue"<\/span> type=<\/span>"month"<\/span> :<\/span>size=<\/span>"sizeValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u6708\u4efd"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"sizeRangeValue"<\/span> type=<\/span>"daterange"<\/span> :<\/span>size=<\/span>"sizeValue"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"sizeWeekValue"<\/span> type=<\/span>"week"<\/span> :<\/span>size=<\/span>"sizeValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5468"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u5b9a\u5236\u65e5\u671f\u5355\u5143\u683c<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>
\n ><\/span>\u7528 <<\/span>code><\/span>dateRender<<\/span>\/<\/span>code><\/span> \u81ea\u5b9a\u4e49\u65e5\u671f\u5355\u5143\u683c\u7684\u5185\u5bb9\u4e0e\u6837\u5f0f，\u5165\u53c2 <<\/span>code><\/span>current<<\/span>\/<\/span>code><\/span> \u4e3a\u8be5\u683c\u65e5\u671f\u7684\u96f6\u70b9\u65f6\u95f4\u6233<<\/span>\/<\/span>p
\n ><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"dateRenderValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span>><\/span>
\n <<\/span>template #dateRender=<\/span>"{ current }"<\/span>><\/span>
\n <<\/span>div :<\/span>style=<\/span>"firstDayCellStyle(getDate(current))"<\/span>><\/span>{<\/span>{<\/span> getDate<\/span>(<\/span>current)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>div><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"dateRenderRangeValue"<\/span> type=<\/span>"daterange"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>><\/span>
\n <<\/span>template #dateRender=<\/span>"{ current }"<\/span>><\/span>
\n <<\/span>div :<\/span>style=<\/span>"firstDayCellStyle(getDate(current))"<\/span>><\/span>{<\/span>{<\/span> getDate<\/span>(<\/span>current)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>div><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u81ea\u5b9a\u4e49\u65e5\u671f\u8303\u56f4\u9009\u62e9<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n \u7528\u4e24\u4e2a\u72ec\u7acb\u7684\u9009\u62e9\u5668\u7ec4\u5408\u51fa\u8303\u56f4\u9009\u62e9：<<\/span>code><\/span>disabledDate<<\/span>\/<\/span>code><\/span> \u6309\u6574\u65e5\u4e92\u76f8\u7ea6\u675f\u8d77\u6b62\u3001<<\/span>code><\/span>disabledTime<<\/span>\/<\/span>code><\/span>
\n \u628a\u540c\u4e00\u5929\u7684\u65f6\u5206\u79d2\u7cbe\u786e\u5230\u8fb9\u754c\u4e4b\u540e，<<\/span>code><\/span>open<<\/span>\/<\/span>code><\/span>
\n \u4e0e\u5c55\u5f00\u4e8b\u4ef6\u8054\u52a8，\u8d77\u70b9\u9009\u5b8c\u81ea\u52a8\u5c55\u5f00\u7ec8\u70b9
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"startValue"<\/span>
\n type=<\/span>"datetime"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledStartDate"<\/span>
\n :<\/span>disabled–<\/span>time=<\/span>"disabledStartTime"<\/span>
\n placeholder=<\/span>"\u5f00\u59cb\u65e5\u671f"<\/span>
\n @<\/span>open<\/span><\/span>–<\/span>change=<\/span>"onStartOpenChange"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"endValue"<\/span>
\n v–<\/span>model:<\/span>open=<\/span>"endOpen"<\/span>
\n type=<\/span>"datetime"<\/span>
\n :<\/span>disabled–<\/span>date=<\/span>"disabledEndDate"<\/span>
\n :<\/span>disabled–<\/span>time=<\/span>"disabledEndTime"<\/span>
\n placeholder=<\/span>"\u7ed3\u675f\u65e5\u671f"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u540e\u7f00\u56fe\u6807<<\/span>\/<\/span>h2><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"suffixValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span>><\/span>
\n <<\/span>template #suffixIcon><\/span>
\n <<\/span>svg width=<\/span>"1em"<\/span> height=<\/span>"1em"<\/span> viewBox=<\/span>"0 0 1024 1024"<\/span> fill=<\/span>"currentColor"<\/span> focusable=<\/span>"false"<\/span> aria–<\/span>hidden=<\/span>"true"<\/span>><\/span>
\n <<\/span>path
\n d=<\/span>"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>path
\n d=<\/span>"M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>svg><\/span>
\n <<\/span>\/<\/span>template><\/span>
\n <<\/span>\/<\/span>DatePicker><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u81ea\u5b9a\u4e49\u72b6\u6001<<\/span>\/<\/span>h2><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"errorValue"<\/span> status=<\/span>"error"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"warningValue"<\/span> status=<\/span>"warning"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"errorRangeValue"<\/span> type=<\/span>"daterange"<\/span> status=<\/span>"error"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"warningRangeValue"<\/span> type=<\/span>"daterange"<\/span> status=<\/span>"warning"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u65e0\u8fb9\u6846<<\/span>\/<\/span>h2><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"borderlessValue"<\/span> :<\/span>bordered=<\/span>"false"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"borderlessWeekValue"<\/span> type=<\/span>"week"<\/span> :<\/span>bordered=<\/span>"false"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5468"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"borderlessMonthValue"<\/span> type=<\/span>"month"<\/span> :<\/span>bordered=<\/span>"false"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u6708\u4efd"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"borderlessQuarterValue"<\/span> type=<\/span>"quarter"<\/span> :<\/span>bordered=<\/span>"false"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5b63\u5ea6"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"borderlessYearValue"<\/span> type=<\/span>"year"<\/span> :<\/span>bordered=<\/span>"false"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u5e74\u4efd"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"borderlessDateRangeValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n :<\/span>bordered=<\/span>"false"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"borderlessWeekRangeValue"<\/span>
\n type=<\/span>"weekrange"<\/span>
\n :<\/span>bordered=<\/span>"false"<\/span>
\n :<\/span>placeholder=<\/span>"weekRangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"borderlessMonthRangeValue"<\/span>
\n type=<\/span>"monthrange"<\/span>
\n :<\/span>bordered=<\/span>"false"<\/span>
\n :<\/span>placeholder=<\/span>"monthRangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"borderlessQuarterRangeValue"<\/span>
\n type=<\/span>"quarterrange"<\/span>
\n :<\/span>bordered=<\/span>"false"<\/span>
\n :<\/span>placeholder=<\/span>"quarterRangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"borderlessYearRangeValue"<\/span>
\n type=<\/span>"yearrange"<\/span>
\n :<\/span>bordered=<\/span>"false"<\/span>
\n :<\/span>placeholder=<\/span>"yearRangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u5f39\u51fa\u4f4d\u7f6e<<\/span>\/<\/span>h2><\/span>
\n <<\/span>Space><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"placementBottomLeftValue"<\/span> placement=<\/span>"bottomLeft"<\/span> placeholder=<\/span>"\u5de6\u4e0b"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"placementBottomRightValue"<\/span> placement=<\/span>"bottomRight"<\/span> placeholder=<\/span>"\u53f3\u4e0b"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"placementTopLeftValue"<\/span> placement=<\/span>"topLeft"<\/span> placeholder=<\/span>"\u5de6\u4e0a"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"placementTopRightValue"<\/span> placement=<\/span>"topRight"<\/span> placeholder=<\/span>"\u53f3\u4e0a"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"placementRangeBottomLeftValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n placement=<\/span>"bottomLeft"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"placementRangeTopLeftValue"<\/span>
\n type=<\/span>"daterange"<\/span>
\n placement=<\/span>"topLeft"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u952e\u76d8\u64cd\u4f5c<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n \u9762\u677f\u5c55\u5f00\u540e\u6309 <<\/span>code><\/span>Tab<<\/span>\/<\/span>code><\/span> \u628a\u952e\u76d8\u4ea4\u7ed9\u9762\u677f，\u65b9\u5411\u952e\u6309\u5f53\u524d\u9762\u677f\u5c42\u7ea7\u7684\u7c92\u5ea6\u79fb\u52a8\u5149\u6807\u3001<<\/span>code><\/span>Enter<<\/span>\/<\/span>code><\/span>
\n \u63d0\u4ea4；\u5e26\u65f6\u95f4\u7684\u5f62\u6001\u4e0b <<\/span>code><\/span>Tab<<\/span>\/<\/span>code><\/span> \u5728\u65e5\u671f\u4e0e\u65f6\u95f4\u4e24\u5217\u4e4b\u95f4\u5207\u6362，\u975e\u6d3b\u52a8\u5217\u6de1\u5316
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>Space vertical><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"keyboardValue"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"keyboardRangeValue"<\/span> type=<\/span>"daterange"<\/span> :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span> \/<\/span>><\/span>
\n <<\/span>DatePicker v–<\/span>model:<\/span>value=<\/span>"keyboardDateTimeValue"<\/span> type=<\/span>"datetime"<\/span> placeholder=<\/span>"\u8bf7\u9009\u62e9\u65e5\u671f\u65f6\u95f4"<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Space><\/span>
\n <<\/span>h2 class<\/span>=<\/span>"mt30 mb10"<\/span>><\/span>\u6309\u6bb5\u9ed8\u8ba4\u65f6\u523b<<\/span>\/<\/span>h2><\/span>
\n <<\/span>p class<\/span>=<\/span>"mb10"<\/span>><\/span>
\n <<\/span>code><\/span>defaultTime<<\/span>\/<\/span>code><\/span> \u6307\u5b9a\u7a7a\u8349\u7a3f\u65f6\u7684\u9ed8\u8ba4\u65f6\u5206\u79d2，\u8303\u56f4\u5f62\u6001\u53ef\u4f20\u4e24\u6bb5\u5143\u7ec4\u6309\u6bb5\u6307\u5b9a（\u8d77\u70b9 <<\/span>code><\/span>00<\/span>:<\/span>00<\/span>:<\/span>00<\/span><<\/span>\/<\/span>code><\/span>\u3001\u7ec8\u70b9
\n <<\/span>code><\/span>23<\/span>:<\/span>59<\/span>:<\/span>59<\/span><<\/span>\/<\/span>code><\/span>）；\u67d0\u6bb5\u4e3a <<\/span>code><\/span>undefined<\/span><<\/span>\/<\/span>code><\/span> \u65f6\u8be5\u6bb5\u9000\u56de\u5f53\u524d\u65f6\u523b
\n <<\/span>\/<\/span>p><\/span>
\n <<\/span>DatePicker
\n v–<\/span>model:<\/span>value=<\/span>"defaultTimeRangeValue"<\/span>
\n type=<\/span>"datetimerange"<\/span>
\n :<\/span>default<\/span>–<\/span>time=<\/span>"rangeDefaultTime"<\/span>
\n :<\/span>placeholder=<\/span>"rangePlaceholder"<\/span>
\n \/<\/span>><\/span>
\n <<\/span>\/<\/span>div><\/span>
\n<<\/span>\/<\/span>template><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

\u6548\u679c\u5982\u4e0b\u56fe： \u5728\u7ebf\u9884\u89c8
\nAPIs \u53d7\u63a7 \/ \u975e\u53d7\u63a7：\u4f20\u5165 v-model:value \u5373\u53d7\u63a7，\u7ec4\u4ef6\u53ea\u7ecf update:value \u4e0a\u62a5；\u4e0d\u4f20\u65f6\u7531\u7ec4\u4ef6\u81ea\u6301，\u53ef\u7528 defaultValue \u6307\u5b9a\u521d\u503c\u3002\u4e24\u8005\u540c\u65f6\u4f20\u65f6\u4ee5 value \u4e3a\u51c6\u3002 DatePicker Props
\n\u540d\u79f0\u8bf4\u660e\u7c7b\u578b\u9ed8\u8ba4\u503cvalue v-model\u53cc\u5411\u7ed1\u5b9a\u503c，\u6beb\u79d2\u65f6\u95f4\u6233；\u8303\u56f4\u5f62\u6001\u4e3a\u4e24\u6bb5\u5143\u7ec4，\u67d0\u6bb5\u53ef\u4e3a <\/p>\n","protected":false},"author":2,"featured_media":123775,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[12392,684,2475,568],"topic":[],"class_list":["post-123785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-12392","tag-vue3","tag-less","tag-typescript"],"yoast_head":"\nVue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/123785.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6548\u679c\u5982\u4e0b\u56fe： \u5728\u7ebf\u9884\u89c8 APIs \u53d7\u63a7 \/ \u975e\u53d7\u63a7：\u4f20\u5165 v-model:value \u5373\u53d7\u63a7，\u7ec4\u4ef6\u53ea\u7ecf update:value \u4e0a\u62a5；\u4e0d\u4f20\u65f6\u7531\u7ec4\u4ef6\u81ea\u6301，\u53ef\u7528 defaultValue \u6307\u5b9a\u521d\u503c\u3002\u4e24\u8005\u540c\u65f6\u4f20\u65f6\u4ee5 value \u4e3a\u51c6\u3002 DatePicker Props \u540d\u79f0\u8bf4\u660e\u7c7b\u578b\u9ed8\u8ba4\u503cvalue v-model\u53cc\u5411\u7ed1\u5b9a\u503c，\u6beb\u79d2\u65f6\u95f4\u6233；\u8303\u56f4\u5f62\u6001\u4e3a\u4e24\u6bb5\u5143\u7ec4，\u67d0\u6bb5\u53ef\u4e3a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/123785.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-07T21:33:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107213317-6aef991daee84.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"39 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/123785.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/123785.html\",\"name\":\"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-11-07T21:33:28+00:00\",\"dateModified\":\"2026-11-07T21:33:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/123785.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/123785.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/123785.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/123785.html","og_locale":"zh_CN","og_type":"article","og_title":"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6548\u679c\u5982\u4e0b\u56fe： \u5728\u7ebf\u9884\u89c8 APIs \u53d7\u63a7 \/ \u975e\u53d7\u63a7：\u4f20\u5165 v-model:value \u5373\u53d7\u63a7，\u7ec4\u4ef6\u53ea\u7ecf update:value \u4e0a\u62a5；\u4e0d\u4f20\u65f6\u7531\u7ec4\u4ef6\u81ea\u6301，\u53ef\u7528 defaultValue \u6307\u5b9a\u521d\u503c\u3002\u4e24\u8005\u540c\u65f6\u4f20\u65f6\u4ee5 value \u4e3a\u51c6\u3002 DatePicker Props \u540d\u79f0\u8bf4\u660e\u7c7b\u578b\u9ed8\u8ba4\u503cvalue v-model\u53cc\u5411\u7ed1\u5b9a\u503c，\u6beb\u79d2\u65f6\u95f4\u6233；\u8303\u56f4\u5f62\u6001\u4e3a\u4e24\u6bb5\u5143\u7ec4，\u67d0\u6bb5\u53ef\u4e3a","og_url":"https:\/\/www.wsisp.com\/helps\/123785.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-11-07T21:33:28+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107213317-6aef991daee84.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"39 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/123785.html","url":"https:\/\/www.wsisp.com\/helps\/123785.html","name":"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-11-07T21:33:28+00:00","dateModified":"2026-11-07T21:33:28+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/123785.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/123785.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/123785.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Vue3\u65e5\u671f\u9009\u62e9\u5668\uff08DatePicker\uff09"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/123785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=123785"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/123785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/123775"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=123785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=123785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=123785"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=123785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}