E9:流程表单日期区间格式选择器(2024-01-01 至 2024-12-31）（ECODE)

༄天M宇ༀ

已于 2023-12-26 10:07:49 修改

阅读量456

点赞数 8

分类专栏：泛微OA：E9 文章标签： javascript 前端 react.js

于 2023-12-26 10:07:06 首次发布

本文链接：https://blog.csdn.net/qq_34975043/article/details/135214743

版权

泛微OA：E9 专栏收录该内容

34 篇文章 12 订阅

订阅专栏

在这里插入图片描述

const { WeaDatePicker } = ecCom;
class NewWeaDatePickerCom extends React.Component {
  constructor(props) { //初始化，固定语法
    super(props);
    this.state = {
            startDate: null,
            endDate: null,
            endOpen: false
    }
  }
  render() {
 
        const { startDate, endDate, endOpen} = this.state
        const disabledStartDate = startDate => {
            const { endDate } = this.state;
            if (!startDate || !endDate) {
                return false;
            }
            return startDate.valueOf() > endDate.valueOf();
        };
        const disabledEndDate = endDate => {
            const { startDate } = this.state;
            if (!endDate || !startDate) {
                return false;
            }
            return endDate.valueOf() <= startDate.valueOf() || endDate.diff(startDate, 'days') > 365;//时间跨度最多365天
        };

        const onChange = (field, value) => {
            this.setState({
                [field]: value,
            });
        };

        const onStartChange = value => {
            onChange('startDate', value);
        };

        const onEndChange = value => {
            onChange('endDate', value);
        };

        const handleStartOpenChange = open => {
            if (!open) {
                this.setState({ endOpen: true });
            }
        };

        const handleEndOpenChange = open => {
            this.setState({ endOpen: open });
        };


    return (
            <div>
                            <WeaDatePicker
                                disabledDate={disabledStartDate}
                                format="YYYY-MM-DD"
                                value={startDate}
                                placeholder="开始日期"
                                onChange={onStartChange}
                                onOpenChange={handleStartOpenChange}
                                style={{ marginRight: '10px' }}
                            />
                            <WeaDatePicker
                                disabledDate={disabledEndDate}
                                format="YYYY-MM-DD"
                                value={endDate}
                                placeholder="结束日期"
                                onChange={onEndChange}
                                open={endOpen}
                                onOpenChange={handleEndOpenChange}
                                style={{ marginRight: '33px' }}
                            />
             </div>
      );
  }
}
//发布模块
ecodeSDK.setCom('${appId}', 'NewWeaDatePickerCom', NewWeaDatePickerCom);