需求:原定结项时间表单里回显为2025-02-06,延期时间的选择范围要设置从2025-02-07开始选择包括2.7号的; 2.7号之前的置灰,不可选择
PC端部分代码:
javascript">// react的函数组件写法 const disabledDate = function (current) {console.log(current, 'current')const times = pro.proLimted ? pro.proLimted : '' // 从pro这恶对象里取出proLimted参数,即原定结项时间字段:2025-02-06 17:00:00console.log(pro.proLimted, 'pro.proLimted')// moment()里不能为空,否则报错,所以取值times的时候做下判断const proTIME = moment(times).format('YYYY-MM-DD') // 转化下时间格式, 类似为2025-02-06console.log(proTIME , 'proTIME')const d = new Date(proTIME ) //console.log(d, 'd')d.setDate(d.getDate() + 1)console.log(d.getDate(), 'd.getDate()')return current && current.valueOf() < d.getDate() }<FormItem {...formItemLayout} label='延期结项时间'>{getFieldDecorator('csTime', {rules: [{require: true, message: '时间不能为空'}],initialValue: moment('csTime', 'YYYY-MM-DD')})(<DatePickerformat='YYYY-MM-DD'disabledDate={disabledDate}placeholder='请选择延期结项时间'/>)} </FormItem>
移动端端部分代码:
javascript">import { List, Flex, DatePicker } from 'antd-mobile'const minDateFun = () => {const proLimit = contents && contents[0] && contents[0].proLimitif(proLimit && proLimit !== undefined && proLimit !== null && proLimit !== ''){const d = moment().set({year: new Date(proLimit).getFullYear(),month: new Date(proLimit).getMonth(),date: new Date(proLimit).getDate() +1})return new Date(d)} }const changeDatePick = (data) => {const proId = idsaveLimitedTime({ // 这块调接口proId, proLimited: moment(data).format(YYYY-MM-DD 17:00:00)}) }<div><Flex align='baseline'><Flex.Item style={{ flex: 2.8 }}><div>原定结项时间</div></Flex.Item><Flex.Item style={{ flex: 7.2 }}><div><DatePicker mode='date'title='请选择时间'extra='请选择结项时间'format='YYYY-MM-DD'minDate={new Date()}maxDate={new Date(moment().set({ yaer: new Date().getFullYear()+1, data: new Date().getDate() }))}onChange={data => changeDatePick(data)}><list.Item arrow='horizontal'>{projrctTime || '请选择结项时间'}</list.Item> </DatePicker></div></Flex.Item></Flex> </div><div><Flex align='baseline'><Flex.Item style={{ flex: 2.8 }}><div>延期结项时间</div></Flex.Item><Flex.Item style={{ flex: 7.2 }}><div><DatePicker mode='date'title='请选择时间'extra='&emsp'format='YYYY-MM-DD 17:00:00'minDate={minDateFun()}onChange={onChange}><list.Item arrow='horizontal'>{projrctTime || '请选择结项时间'}</list.Item> </DatePicker></div></Flex.Item></Flex> </div>