react 时间DatePicker处理Ant Design和Ant Design Mobile禁用选项
DatePicker手机端和pc端使用的属性不一样
mobile: min={},max={}
pc: disabledDate=this.disabledDate
管理端配置表单
手机端代码
{
//这里的fieldDeclares 是从管理端配置拿到的每一项数据结构
fieldDeclares && fieldDeclares.length > 0 && fieldDeclares.map((item, index) => {
if (item.visible) return null
let inputType = null
let itemLimit = {
};
let patt = /max|min/;
//options为maxappointmentEndTime配置项
if (item.options && patt.test(item.options)) {
let conditionKey = item.options.match(patt)[0];
// conditionKey 返回值为min/max
let conditionField = item.options.replace(patt, '');
//conditionField 返回值为 appointmentEndTime
let targetField = fieldDeclares.find(field => field.fieldName === conditionField);
if(conditionKey + '' ==='min') {
// 这里的moment是时间库moment.js插件
itemLimit[conditionKey] = targetField && targetField.value ? new Date(moment(targetField.value)) : new Date();
} else {
itemLimit[conditionKey] = targetField && targetField.value ? new Date(moment(targetField.value)) : undefined;
}
}
let regExp = item.inputFormat ? eval(item.inputFormat) : undefined;
switch (item.inputType + "") {
case "10":
inputType = <div>
<Button onClick={
() => {
this.setState({
["visible" + index]: true }) }} >
{
item.value ? item.value : "年-月-日"}
</Button>
<DatePicker
min={
new Date()}
{
...itemLimit} // 这里会替换掉手机端属性min={时间}
visible={
this.state["visible" + index]}
onClose={
() => {
this.setState({
["visible" + index]: false }) }}
onConfirm={
(val) => {
console.log(this.formRef);
this.formRef.setFieldsValue({
[item.fieldName]: true });
this.writeStateArray(this.getDateStr(val), "fieldDeclares", index, "value")
}}
/>
</div>
break
default:
break
}
return regExp ? <Form.Item
key={
item.id}
label={
item.htmlName}
name={
item.fieldName}
rules={
[{
required: !!item.require, message: item.warnMsg, pattern: regExp }]}
>
{
inputType}
</Form.Item> : <Form.Item
key={
item.id}
label={
item.htmlName}
name={
item.fieldName}
rules={
[{
required: !!item.require, message: item.warnMsg }]}
>
{
inputType}
</Form.Item>
})
}
pc端处理DatePicker代码
//时间配置项
getDate = (value, dateType) => {
if (dateType === 'appointmentStartTime') {
this.setState({
startData: value })
} else {
this.setState({
endData: value })
}
}
disabledStartDate = (current) => {
let {
endData } = this.state
let date = null
if (!endData) {
date = current && current < moment().subtract(1, 'days').endOf('day');
return date;
}
if (endData) {
date = current && current < moment().subtract(1, 'days').endOf('day') || current > moment(endData).add(1, 'days');
return date;
}
}
disabledEndDate = (current) => {
let {
startData } = this.state
let date = null
if (!startData) {
date = current && current < moment().subtract(1, 'days').endOf('day');
return date;
}
if (startData) {
date = current < moment(startData);
return date;
}
}
{
fieldDeclares && fieldDeclares.length > 0 && fieldDeclares.map((item, index) => {
if (item.visible) return null
let inputType = null
let regExp = eval(item.inputFormat);
switch (item.inputType + "") {
case "10":
inputType = <Form.Item
key={
item.id}
label={
item.htmlName}
name={
item.fieldName}
initialValue={
item.value ? moment(item.value) : null}
rules={
[{
required: !!item.require, message: item.warnMsg }]}
>
<DatePicker
format="YYYY-MM-DD"
disabledDate={
item.fieldName === 'appointmentStartTime' ? this.disabledStartDate : this.disabledEndDate}
onChange={
(val, str) => {
this.writeStateArray(str, "fieldDeclares", index, "value"), this.getDate(str, item.fieldName) }}
/>
</Form.Item>
break
default:
break
}
let retdata = ((item.inputType + "" === "10") || (item.inputType + "" === "11")) ? inputType : <Form.Item
key={
item.id}
label={
item.htmlName}
name={
item.fieldName}
initialValue={
item.value}
rules={
[{
required: !!item.require, message: item.warnMsg, pattern: regExp }]}
>
{
inputType}
</Form.Item>
return retdata
})
}
备注：展示基本和手机端展示一样，不予展示了