@cainiaofe/cn-ui-m
Version:
30 lines (29 loc) • 2.2 kB
JavaScript
import React, { useState } from 'react';
import { CnBox, CnButton, CnDatePicker, CnDemoBlock, CnDemoPage, } from "../../..";
import dayjs from 'dayjs';
export var 日历模式 = function () {
var _a = useState(new Date('2024-10-01')), value = _a[0], setValue = _a[1];
return (React.createElement(CnDemoPage, { title: "\u65E5\u5386\u6A21\u5F0F" },
React.createElement(CnDemoBlock, { title: "\u9009\u62E9\u65E5\u671F", padding: 0 },
React.createElement(CnDatePicker, { onChange: console.log, mode: "calendar" })),
React.createElement(CnDemoBlock, { title: "\u9009\u62E9\u65E5\u671F+\u65F6\u95F4", padding: 0 },
React.createElement(CnDatePicker, { onChange: console.log, mode: "calendar", showTime: true })),
React.createElement(CnDemoBlock, { title: "\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4\uFF0C\u5E76\u4E14\u81EA\u5B9A\u4E49\u65F6\u95F4", padding: 0 },
React.createElement(CnDatePicker, { onChange: console.log, mode: "calendar", showTime: true, timePanelProps: {
format: 'HH:mm',
defaultValue: '08:00',
} })),
React.createElement(CnDemoBlock, { title: "\u7981\u7528\u5076\u6570\u65E5\u671F", padding: 0 },
React.createElement(CnDatePicker, { onChange: console.log, mode: "calendar", showTime: true, disabledDate: function (d) {
return d.getDate() % 2 === 0;
} })),
React.createElement(CnDemoBlock, { title: "\u5B9A\u5236\u9875\u811A", padding: 0 },
React.createElement(CnDatePicker, { onChange: console.log, value: value, mode: "calendar", extraFooterRender: React.createElement(CnBox, { direction: "row", align: "center", spacing: 8 },
React.createElement(CnButton, { size: "small", onClick: function () {
setValue(dayjs().toDate());
} }, "\u4ECA\u5929"),
React.createElement(CnButton, { size: "small", onClick: function () {
setValue(dayjs().add(-1, 'day').toDate());
} }, "\u6628\u5929")) }))));
};
export default { title: 'demo/CnDatePickerPro' };