@cainiaofe/cn-ui-m
Version:
41 lines (40 loc) • 2.58 kB
JavaScript
import * as React from 'react';
import { CnBox, CnButton, CnRangeDatePickerPro, CnDemoBlock, CnDemoPage, } from "../../..";
import dayjs from 'dayjs';
export var 日期范围选择 = function () {
var _a = React.useState([
dayjs('2023-01-11').valueOf(),
dayjs('2023-01-12').valueOf(),
]), val = _a[0], setVal = _a[1];
var _b = React.useState([]), val2 = _b[0], setVal2 = _b[1];
return (React.createElement(CnDemoPage, { title: "\u65E5\u671F\u8303\u56F4\u9009\u62E9" },
React.createElement(CnDemoBlock, { title: "\u9ED8\u8BA4\u503C", padding: 0 },
React.createElement(CnRangeDatePickerPro, { defaultValue: ['2023-01-09', '2023-01-10'], endOfDay: [false, true], onChange: function (value, valueStr) {
console.log(value, valueStr);
}, hasClear: true })),
React.createElement(CnDemoBlock, { title: "\u53D7\u63A7", padding: 0 },
React.createElement(CnRangeDatePickerPro, { value: val, endOfDay: [false, true], onChange: function (value, valueStr) {
console.log(value, valueStr);
setVal(value);
}, hasClear: true })),
React.createElement(CnDemoBlock, { title: "\u53EA\u8BFB\u6A21\u5F0F", padding: 16 },
React.createElement(CnRangeDatePickerPro, { endOfDay: [false, true], defaultValue: ['2023-01-09', '2023-01-10'], readOnly: true })),
React.createElement(CnDemoBlock, { title: "\u9875\u811A\u5B9A\u5236", padding: 0 },
React.createElement(CnRangeDatePickerPro, { value: val2, endOfDay: [false, true], onChange: function (value, valueStr) {
console.log(value, valueStr);
setVal2(value);
}, hasClear: true, extraFooterRender: React.createElement(CnBox, { direction: "row", align: "center", spacing: 8 },
React.createElement(CnButton, { size: "small", onClick: function () {
setVal2([
dayjs().add(-3, 'day').valueOf(),
dayjs().valueOf(),
]);
} }, "\u6700\u8FD13\u5929"),
React.createElement(CnButton, { size: "small", onClick: function () {
setVal2([
dayjs().add(-7, 'day').valueOf(),
dayjs().valueOf(),
]);
} }, "\u6700\u8FD17\u5929")) }))));
};
export default { title: 'demo/CnDatePickerPro' };