@cainiaofe/cn-ui-m
Version:
70 lines (69 loc) • 2.95 kB
JavaScript
import React, { useCallback } from 'react';
import { CnDatePicker, CnDemoBlock, CnDemoPage } from "../../..";
var weekdayToZh = function (weekday) {
switch (weekday) {
case 1:
return '周一';
case 2:
return '周二';
case 3:
return '周三';
case 4:
return '周四';
case 5:
return '周五';
case 6:
return '周六';
case 7:
return '周日';
default:
return weekday;
}
};
export var 基本 = function () {
var defaultDate = new Date('2024-10-01');
var weeklabelRenderer = useCallback(function (type, data) {
switch (type) {
case 'year':
return "".concat(data, "\u5E74");
case 'week':
return "".concat(data, "\u5468");
case 'week-day':
return weekdayToZh(data);
default:
return data;
}
}, []);
var labelRenderer = useCallback(function (type, data) {
switch (type) {
case 'year':
return "".concat(data, "\u5E74");
case 'month':
return "".concat(data, "\u6708");
case 'day':
return "".concat(data, "\u65E5");
case 'hour':
return "".concat(data, "\u65F6");
case 'minute':
return "".concat(data, "\u5206");
case 'second':
return "".concat(data, "\u79D2");
default:
return data;
}
}, []);
return (React.createElement(CnDemoPage, { title: "\u57FA\u672C" },
React.createElement(CnDemoBlock, { title: "\u57FA\u672C", padding: 0 },
React.createElement(CnDatePicker, { onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u4F7F\u7528\u9ED8\u8BA4\u503C\uFF08\u652F\u6301Date\u3001number\u3001String\u548Cdayjs\uFF09", padding: 0 },
React.createElement(CnDatePicker, { defaultValue: defaultDate, onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u81EA\u5B9A\u4E49\u6BCF\u5217\u7684\u6E32\u67D3\u5185\u5BB9", padding: 0 },
React.createElement(CnDatePicker, { defaultValue: defaultDate, renderLabel: labelRenderer })),
React.createElement(CnDemoBlock, { title: "\u7CBE\u5EA6\u5230\u5468\u548C\u6BCF\u5468\u7B2C\u51E0\u5929", padding: 0 },
React.createElement(CnDatePicker, { precision: "week-day", renderLabel: weeklabelRenderer })),
React.createElement(CnDemoBlock, { title: "\u9009\u62E9\u65E5\u671F\u65F6\uFF0C\u65F6\u95F4\u6233\u4E3A\u5F53\u5929\u672B\u5C3E", padding: 0 },
React.createElement(CnDatePicker, { endOfDay: true, onChange: function (value, dateStr) {
console.log(value, dateStr);
} }))));
};
export default { title: 'demo/CnDatePickerPro' };