@cainiaofe/cn-ui-m
Version:
79 lines (78 loc) • 2.9 kB
JavaScript
import React from 'react';
import { CnForm, formilyCore, CnDemoPage, CnCard } from "../../..";
var onFieldChange = formilyCore.onFieldChange;
export var 表单中使用 = function () {
var schema = React.useMemo(function () { return ({
type: 'object',
properties: {
date: {
title: '日期选择器',
required: true,
'x-decorator': 'CnFormItem',
'x-component': 'CnDatePickerPro',
},
datetime: {
title: '日期时间选择器',
required: true,
'x-decorator': 'CnFormItem',
'x-component': 'CnDatePickerPro',
'x-component-props': {
showTime: true,
},
},
rangeDate: {
title: '范围日期选择器',
required: true,
'x-decorator': 'CnFormItem',
'x-component': 'CnRangeDatePickerPro',
'x-component-props': {
endOfDay: [false, true],
},
},
gentle2: {
title: '只读展示(月选择)',
'x-decorator': 'CnFormItem',
'x-component': 'CnMonthPickerPro',
readOnly: true,
},
gentle0: {
title: '空值',
'x-decorator': 'CnFormItem',
'x-component': 'CnDatePickerPro',
readOnly: true,
},
gentle3: {
title: '年选择',
'x-decorator': 'CnFormItem',
'x-component': 'CnYearPickerPro',
},
gentle4: {
title: '周选择',
'x-decorator': 'CnFormItem',
'x-component': 'CnWeekPickerPro',
},
gentle5: {
title: '控制输出格式',
'x-decorator': 'CnFormItem',
'x-component': 'CnDatePickerPro',
'x-component-props': {
showTime: true,
outputFormat: 'YYYY-MM-DD HH:mm:ss',
},
},
},
}); }, []);
return (React.createElement(CnDemoPage, { title: "\u8868\u5355\u4E2D\u4F7F\u7528" },
React.createElement(CnCard, { title: "\u8868\u5355\u4E2D\u4F7F\u7528" },
React.createElement(CnForm, { formProps: {
values: {
gentle2: '2023-03-10',
},
effects: function () {
onFieldChange('*', function (fieldState) {
console.log(fieldState.path.toString(), fieldState.value);
});
},
}, schema: schema }))));
};
export default { title: 'demo/CnDatePickerPro' };