时间选择器修改

src/components/BlockLossManage/editBlock.js

@@ -12,13 +12,14 @@ const { post, api, xPost } = apiObj;
 const { TextArea } = Input;
 function EditBlock(props) {
     useEffect(() => {
-        if(type == 2){
+        if (type == 2) {
             setLimit(true)
         }
     }, []);
     const [form] = Form.useForm();
-    const [dates, setDates] = useState([]);
     const [disable, setDisable] = useState(true);
+    const [startValue, setStartValue] = useState();
+    const [endValue, setendValue] = useState();
     const [limit, setLimit] = useState(false);
     const { blockDetail, type } = useContext(BlockContext);
     const initialValues = blockDetail;
@@ -32,14 +33,6 @@ function EditBlock(props) {
         }
 
     };
-    function onChange(e) {
-        const formData = form.getFieldsValue();
-        if (formData.behospitalCode || formData.time != '') {
-            setDisable(false)
-        } else {
-            setDisable(true)
-        }
-    }
     function change(e) {
         const formData = form.getFieldsValue();
         const { value } = e.target;
@@ -50,7 +43,7 @@ function EditBlock(props) {
                 setLimit(false)
             }
         }
-        if (formData.behospitalCode || formData.time != '') {
+        if (formData.behospitalCode || (formData.startDate != undefined && formData.endDate != undefined)) {
             setDisable(false)
         } else {
             setDisable(true)
@@ -72,27 +65,59 @@ function EditBlock(props) {
             }
         })
     }
-    function disabledDate(current) {
-        if (!dates || dates.length === 0) {
-            return current && current >= moment().endOf('day');
+    function onStartChange(val) {
+        setStartValue(val)
+        const formData = form.getFieldsValue();
+        if (formData.behospitalCode || (formData.startDate != undefined && formData.endDate != undefined)) {
+            setDisable(false)
+        } else {
+            setDisable(true)
         }
-        const tooLate = dates[0] && current.diff(dates[0], 'days') > 29;
-        const tooEarly = dates[1] && dates[1].diff(current, 'days') > 29;
-        if (!limit) {
-            return current && current >= moment().endOf('day') || tooEarly || tooLate;
+    }
+    function onEndChange(val) {
+        setendValue(val)
+        const formData = form.getFieldsValue();
+        if (formData.behospitalCode || (formData.startDate != undefined && formData.endDate != undefined)) {
+            setDisable(false)
         } else {
-            return current && current >= moment().endOf('day');
+            setDisable(true)
         }
-    };
+    }
+    function disabledStartDate(startValue) {
+        if (!startValue || !endValue) {
+            //如果没有选择结束日期，则选择开始日期时，开始日期不能大于今天
+            return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }
+        //如果选择了结束日期，则结束日期和开始日期之差大于30天（24*60*60*1000*30是30天的毫秒数）,还需要开始日期小于结束日期，返回true，禁止选择
+        if(limit){
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }else{
+            return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 30 || endValue.valueOf() <= startValue.valueOf();
+        }
+    }
+
+    function disabledEndDate(endValue) {
+        if (!endValue || !startValue) {
+            ////如果没有选择开始日期，则结束日期时大于今天
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }
+        if(limit){
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }else{
+            return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 30;
+        }
+        //结束日期这里稍微复杂了一些，如果选择了开始日期，则结束日期和开始日期除了不能超过30个自然日之外，还需要结束日期不能小于开始日期，还需要不能超过今天，返回true为不能选择，所以用或链接，式子之间的符号正好与咱们分析的相反
+        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 30;
+    }
     //数据补录
     function dataRepari(values) {
-        values.startDate = moment(values.time[0]).format('YYYY-MM-DD 00:00:00');
-        values.endDate = moment(values.time[1]).format('YYYY-MM-DD 23:23:59');
+        values.startDate = moment(values.startDate).format('YYYY-MM-DD 00:00:00');
+        values.endDate = moment(values.endDate).format('YYYY-MM-DD 23:23:59');
         let params = {
             behospitalCode: values.behospitalCode,
             endDate: values.endDate,
             startDate: values.startDate,
-            isPlacefile:getCookie('isPlacefile')
+            isPlacefile: getCookie('isPlacefile')
         }
         post(api.dataRepari, params).then((res) => {
             if (res.data.code === 200) {
@@ -207,7 +232,7 @@ function EditBlock(props) {
                         name="lossCause"
                         label="丢失原因"
                         wrapperCol={{ span: 18 }}
-						rules={[{ max: 200,message:'丢失原因不能超过200个字符' }]}
+                        rules={[{ max: 200, message: '丢失原因不能超过200个字符' }]}
                     >
                         <TextArea
                             autoSize={{ minRows: 5, maxRows: 5 }}
@@ -219,19 +244,32 @@ function EditBlock(props) {
 
                 <Col span={24} hidden={type == 3}>
                     {type != 3 ?
-                        <Form.Item label="日期" name="time" rules={[{ required: true }]} labelAlign="right">
-                            <RangePicker
-                            allowClear={false}
-                                placeholder={['开始时间', '结束时间']}
-                                disabledDate={disabledDate}
-                                onCalendarChange={val => setDates(val)}
-                                onChange={onChange}
-                            />
+                        <Form.Item label="日期" >
+                            <Form.Item name="startDate" className='times'>
+                                <DatePicker
+                                    allowClear={false}
+                                    disabledDate={disabledStartDate}
+                                    value={startValue}
+                                    placeholder="请选择开始日期"
+                                    onChange={onStartChange}
+                                />
+
+                            </Form.Item>
+                            <span style={{ margin: '0 5px', position: 'relative', top: '2px' }}>-</span>
+                            <Form.Item name="endDate" className='times'>
+                                <DatePicker
+                                    allowClear={false}
+                                    disabledDate={disabledEndDate}
+                                    value={endValue}
+                                    placeholder="请选择结束始日期"
+                                    onChange={onEndChange}
+                                />
+                            </Form.Item>
                         </Form.Item>
                         : ''}
                 </Col>
                 <Col span={24} hidden={type == 3} style={{ marginTop: 15 }}>
-                    <Form.Item label="住院序号" name="behospitalCode" rules={[{ max: 30,message:'住院序号不能超过30个字符' }]}>
+                    <Form.Item label="住院序号" name="behospitalCode" rules={[{ max: 30, message: '住院序号不能超过30个字符' }]}>
                         <Input placeholder="请输入" autoComplete='off' onChange={change} />
                     </Form.Item>
                 </Col>
@@ -254,7 +292,7 @@ function EditBlock(props) {
                         <Button htmlType="button" onClick={e => cancel()}>
                             取消
                         </Button>
-                        <Button type="primary" htmlType="submit" disabled={disable &&  type != 3}>
+                        <Button type="primary" htmlType="submit" disabled={disable && type != 3}>
                             {type == 3 ? '保存' : '确定'}
                         </Button>
                     </Space>

src/components/BlockLossManage/index.js

@@ -21,7 +21,8 @@ function BlockLossManage() {
     const [title, setTitle] = useState(0);
     const [visible, setVisible] = useState(false);
     const [size, setSize] = useState(15);
-    const [dates, setDates] = useState([]);
+    const [startValue, setStartValue] = useState();
+    const [endValue, setendValue] = useState();
     const [current, setCurrent] = useState(1);
     const [type, setType] = useState(null);
     const [blockData, setBlockData] = useState({});
@@ -68,14 +69,29 @@ function BlockLossManage() {
             }
         })
     }
-    function disabledDate(current) {
-        if (!dates || dates.length === 0) {
-            return current && current >= moment().endOf('day');
+    function onStartChange(val) {
+        setStartValue(val)
+    }
+    function onEndChange(val) {
+        setendValue(val)
+    }
+    function disabledStartDate(startValue) {
+        if (!startValue || !endValue) {
+            //如果没有选择结束日期，则选择开始日期时，开始日期不能大于今天
+            return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
         }
-        const tooLate = dates[0] && current.diff(dates[0], 'days') > 364;
-        const tooEarly = dates[1] && dates[1].diff(current, 'days') > 364;
-        return current && current >= moment().endOf('day') || tooEarly || tooLate;
-    };
+        //如果选择了结束日期，则结束日期和开始日期之差大于30天（24*60*60*1000*30是30天的毫秒数）,还需要开始日期小于结束日期，返回true，禁止选择
+        return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365 || endValue.valueOf() <= startValue.valueOf();
+    }
+
+    function disabledEndDate(endValue) {
+        if (!endValue || !startValue) {
+            ////如果没有选择开始日期，则结束日期时大于今天
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }
+        //结束日期这里稍微复杂了一些，如果选择了开始日期，则结束日期和开始日期除了不能超过30个自然日之外，还需要结束日期不能小于开始日期，还需要不能超过今天，返回true为不能选择，所以用或链接，式子之间的符号正好与咱们分析的相反
+        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365;
+    }
     //修改
     function showModal(title, row, type) {
         setVisible(true)
@@ -111,11 +127,8 @@ function BlockLossManage() {
         setBlockDetail(null)
     }
     const onFinish = (value) => {
-        if (value.time) {
-            value.startDate = moment(value.time[0]).format('YYYY-MM-DD 00:00:00');
-            value.endDate = moment(value.time[1]).format('YYYY-MM-DD 23:23:59');
-        }
-        delete value.time
+        value.startDate = moment(value.startDate).format('YYYY-MM-DD 00:00:00');
+        value.endDate = moment(value.endDate).format('YYYY-MM-DD 23:23:59');
         const param = {
             ...data,
             ...value,
@@ -192,7 +205,7 @@ function BlockLossManage() {
             )
         }
     ];
-
+    // time1: moment(getCurrentDataFront()), time2: moment(getCurrentData())
     return (
         <div className="wrapper">
             <div className="filter-box">
@@ -200,16 +213,31 @@ function BlockLossManage() {
                     form={form}
                     name="normal_login"
                     onFinish={onFinish}
-                    initialValues={{ lossType: '', lossWay: '', isAudited: '', status: '', time: [moment(getCurrentDataFront()), moment(getCurrentData())] }}
+                    initialValues={{ lossType: '', lossWay: '', isAudited: '', status: '', startDate: moment(getCurrentDataFront()), endDate: moment(getCurrentData()) }}
                 >
                     <Row gutter={24}>
-                        <Col span={6} key={0}>
-                            <Form.Item label="日期" name="time">
-                                <RangePicker
-                                    disabledDate={disabledDate} // 限制日期不可选
-                                    placeholder={['开始时间', '结束时间']}
-                                    onCalendarChange={val => setDates(val)}
-                                />
+                        <Col span={7} key={0}>
+                            <Form.Item label="日期" >
+                                <Form.Item name="startDate" className='times'>
+                                    <DatePicker
+                                        allowClear={false}
+                                        disabledDate={disabledStartDate}
+                                        value={startValue}
+                                        placeholder="请选择开始日期"
+                                        onChange={onStartChange}
+                                    />
+
+                                </Form.Item>
+                                <span style={{ margin: '0 5px', position: 'relative', top: '2px' }}>-</span>
+                                <Form.Item name="endDate" className='times'>
+                                    <DatePicker
+                                        allowClear={false}
+                                        disabledDate={disabledEndDate}
+                                        value={endValue}
+                                        placeholder="请选择结束始日期"
+                                        onChange={onEndChange}
+                                    />
+                                </Form.Item>
                             </Form.Item>
                         </Col>
                         <Col span={5} key={1}>

src/components/BlockLossManage/index.less

@@ -68,3 +68,8 @@
     width: 70px;
   }
 }
+.times{
+  display: inline-block;
+  width: 120px;
+  margin-right: 0;
+}

src/components/FieldProblem/editProblem.js

@@ -14,7 +14,8 @@ function EditBlock(props) {
     useEffect(() => {
     }, []);
     const [form] = Form.useForm();
-    const [dates, setDates] = useState([]);
+    const [startValue, setStartValue] = useState();
+    const [endValue, setendValue] = useState();
     const [disable, setDisable] = useState(true);
     const [limit, setLimit] = useState(false);
     const { problemDetail, type } = useContext(BlockContext);
@@ -27,28 +28,65 @@ function EditBlock(props) {
         }
 
     };
-    function onChange(e) {
+
+    function change(e) {
         const formData = form.getFieldsValue();
-        if (formData.behospitalCode || formData.time != '') {
+        const { value } = e.target;
+        if (value) {
+            setLimit(true)
+        } else {
+            setLimit(false)
+        }
+        if (formData.behospitalCode || (formData.startDate != undefined && formData.endDate != undefined)) {
             setDisable(false)
         } else {
             setDisable(true)
         }
     }
-    function change(e) {
+    function onStartChange(val) {
+        setStartValue(val)
         const formData = form.getFieldsValue();
-        const { value } = e.target;
-        if (value) {
-            setLimit(true)
+        if (formData.behospitalCode || (formData.startDate != undefined && formData.endDate != undefined)) {
+            setDisable(false)
         } else {
-            setLimit(false)
+            setDisable(true)
         }
-        if (formData.behospitalCode || formData.time != '') {
+    }
+    function onEndChange(val) {
+        setendValue(val)
+        const formData = form.getFieldsValue();
+        if (formData.behospitalCode || (formData.startDate != undefined && formData.endDate != undefined)) {
             setDisable(false)
         } else {
             setDisable(true)
         }
     }
+    function disabledStartDate(startValue) {
+        if (!startValue || !endValue) {
+            //如果没有选择结束日期，则选择开始日期时，开始日期不能大于今天
+            return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }
+        //如果选择了结束日期，则结束日期和开始日期之差大于30天（24*60*60*1000*30是30天的毫秒数）,还需要开始日期小于结束日期，返回true，禁止选择
+        if(limit){
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }else{
+            return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 30 || endValue.valueOf() <= startValue.valueOf();
+        }
+    }
+
+    function disabledEndDate(endValue) {
+        if (!endValue || !startValue) {
+            ////如果没有选择开始日期，则结束日期时大于今天
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }
+        if(limit){
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }else{
+            return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 30;
+        }
+        //结束日期这里稍微复杂了一些，如果选择了开始日期，则结束日期和开始日期除了不能超过30个自然日之外，还需要结束日期不能小于开始日期，还需要不能超过今天，返回true为不能选择，所以用或链接，式子之间的符号正好与咱们分析的相反
+        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 30;
+    }
     function editProblem(values) {
         let params = {
             id: problemDetail.id,
@@ -84,19 +122,7 @@ function EditBlock(props) {
             }
         })
     }
-    function disabledDate(current) {
-        if (!dates || dates.length === 0) {
-            return current && current >= moment().endOf('day');
-        }
-        const tooLate = dates[0] && current.diff(dates[0], 'days') > 29;
-        const tooEarly = dates[1] && dates[1].diff(current, 'days') > 29;
-        if (!limit) {
-            return current && current >= moment().endOf('day') || tooEarly || tooLate;
-        } else {
-            return current && current >= moment().endOf('day');
-        }
 
-    };
     function cancel() {
         props.cancel()
     }
@@ -221,15 +247,28 @@ function EditBlock(props) {
                 </Col>
                 <Col span={24} hidden={type == 3}>
                     {type != 3 ?
-                        <Form.Item label="日期" name="time" labelAlign="right">
-                            <RangePicker
+                        <Form.Item label="日期" >
+                        <Form.Item name="startDate" className='times'>
+                            <DatePicker
+                                allowClear={false}
+                                disabledDate={disabledStartDate}
+                                value={startValue}
+                                placeholder="请选择开始日期"
+                                onChange={onStartChange}
+                            />
+
+                        </Form.Item>
+                        <span style={{ margin: '0 5px', position: 'relative', top: '2px' }}>-</span>
+                        <Form.Item name="endDate" className='times'>
+                            <DatePicker
                                 allowClear={false}
-                                placeholder={['开始时间', '结束时间']}
-                                disabledDate={disabledDate}
-                                onCalendarChange={val => setDates(val)}
-                                onChange={onChange}
+                                disabledDate={disabledEndDate}
+                                value={endValue}
+                                placeholder="请选择结束始日期"
+                                onChange={onEndChange}
                             />
                         </Form.Item>
+                    </Form.Item>
                         : ''}
                 </Col>
                 <Col span={24} hidden={type == 3} style={{ marginTop: 15 }}>

src/components/FieldProblem/index.js

@@ -22,6 +22,8 @@ function FieldProblem() {
     const [total, setTotal] = useState(0);
     const [type, setType] = useState(0);//1新增 2修改
     const [visible, setVisible] = useState(false);
+    const [startValue, setStartValue] = useState();
+    const [endValue, setendValue] = useState();
     const [size, setSize] = useState(15);
     const [current, setCurrent] = useState(1);
     const [probleData, setProbleData] = useState({});
@@ -32,8 +34,8 @@ function FieldProblem() {
         pages: 1,
         current: 1,
         size: 15,
-        asc:['isSolved'],
-        desc: ['solveTime','behospitalCode'],
+        asc: ['isSolved'],
+        desc: ['solveTime', 'behospitalCode'],
         behospitalStartDate: getCurrentDataFront().split('/').join('-') + ' 00:00:00',
         behospitalEndDate: getCurrentData().split('/').join('-') + ' 23:23:59'
     });
@@ -42,8 +44,8 @@ function FieldProblem() {
         pages: 1,
         current: 1,
         size: size,
-        asc:['isSolved'],
-        desc: ['solveTime','behospitalCode'],
+        asc: ['isSolved'],
+        desc: ['solveTime', 'behospitalCode'],
         behospitalStartDate: getCurrentDataFront().split('/').join('-') + ' 00:00:00',
         behospitalEndDate: getCurrentData().split('/').join('-') + ' 23:23:59'
     }
@@ -85,6 +87,29 @@ function FieldProblem() {
     function onSearch(val) {
         getModeName(val)
     }
+    function onStartChange(val) {
+        setStartValue(val)
+    }
+    function onEndChange(val) {
+        setendValue(val)
+    }
+    function disabledStartDate(startValue) {
+        if (!startValue || !endValue) {
+            //如果没有选择结束日期，则选择开始日期时，开始日期不能大于今天
+            return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }
+        //如果选择了结束日期，则结束日期和开始日期之差大于30天（24*60*60*1000*30是30天的毫秒数）,还需要开始日期小于结束日期，返回true，禁止选择
+        return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365 || endValue.valueOf() <= startValue.valueOf();
+    }
+
+    function disabledEndDate(endValue) {
+        if (!endValue || !startValue) {
+            ////如果没有选择开始日期，则结束日期时大于今天
+            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
+        }
+        //结束日期这里稍微复杂了一些，如果选择了开始日期，则结束日期和开始日期除了不能超过30个自然日之外，还需要结束日期不能小于开始日期，还需要不能超过今天，返回true为不能选择，所以用或链接，式子之间的符号正好与咱们分析的相反
+        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365;
+    }
     //修改
     function showModal(title, row, type) {
         setVisible(true)
@@ -152,12 +177,16 @@ function FieldProblem() {
     const columns = [
         { title: '序号', dataIndex: 'index', render: (text, record, index) => (current - 1) * params.size + index + 1 },
         { title: '住院序号', dataIndex: 'behospitalCode', key: 'behospitalCode' },
-        { title: '文书编号', dataIndex: 'hosptialDatatmpCode', key: 'hosptialDatatmpCode', render: (text, record) => {
-            return record.hosptialDatatmpCode || '-';
-        } },
-        { title: '文书标题', dataIndex: 'hosptialDatatmpName', key: 'hosptialDatatmpName', render: (text, record) => {
-            return record.hosptialDatatmpName || '-';
-        } },
+        {
+            title: '文书编号', dataIndex: 'hosptialDatatmpCode', key: 'hosptialDatatmpCode', render: (text, record) => {
+                return record.hosptialDatatmpCode || '-';
+            }
+        },
+        {
+            title: '文书标题', dataIndex: 'hosptialDatatmpName', key: 'hosptialDatatmpName', render: (text, record) => {
+                return record.hosptialDatatmpName || '-';
+            }
+        },
         { title: '质控模块名称', dataIndex: 'modeName', key: 'modeName' },
         { title: '表名称（中文）', dataIndex: 'tableCname', key: 'tableCname' },
         { title: '表名称（英文）', dataIndex: 'tableEname', key: 'tableEname' },
@@ -205,17 +234,32 @@ function FieldProblem() {
                     name="normal_login"
                     onFinish={onFinish}
                     initialValues={{
-                        isSolved: '', type: '', time: [moment(getCurrentDataFront()), moment(getCurrentData())]
+                        isSolved: '', type: '', behospitalStartDate: moment(getCurrentDataFront()), behospitalEndDate: moment(getCurrentData())
                     }}
                 >
                     <Row gutter={24}>
-                        <Col span={6} key={0}>
-                            <Form.Item label="日期" name="time">
-                                <RangePicker
-                                    allowClear={false}
-                                    disabledDate={disabledDate}
-                                    placeholder={['开始时间', '结束时间']}
-                                />
+                        <Col span={7} key={0}>
+                            <Form.Item label="日期" >
+                                <Form.Item name="behospitalStartDate" className='times'>
+                                    <DatePicker
+                                        allowClear={false}
+                                        disabledDate={disabledStartDate}
+                                        value={startValue}
+                                        placeholder="请选择开始日期"
+                                        onChange={onStartChange}
+                                    />
+
+                                </Form.Item>
+                                <span style={{ margin: '0 5px', position: 'relative', top: '2px' }}>-</span>
+                                <Form.Item name="behospitalEndDate" className='times'>
+                                    <DatePicker
+                                        allowClear={false}
+                                        disabledDate={disabledEndDate}
+                                        value={endValue}
+                                        placeholder="请选择结束始日期"
+                                        onChange={onEndChange}
+                                    />
+                                </Form.Item>
                             </Form.Item>
                         </Col>
                         <Col span={5} key={1}>