两个日期比较-结束日期应大于React Redux验证中的开始日期

时间:2019-03-01 06:57:35

标签: javascript reactjs redux react-redux

我正在使用日期验证,但它对我不起作用,因为日期选择器验证在选择了小于日期后锁定了我的日历,所以请您建议我如何解决此问题。

这是我的代码:

index.js

import React from 'react';
import moment from 'moment';

const processDate = date =>
    date ? moment(date, date.length === 10 ? 'DD/MM/YYYY' : 
    null).format('MM/DD/YYYY') : null;
class Skills extends React.Component {
    static propTypes = {
        skills: PropTypes.array.isRequired,
    };
    onSubmitSkill(formData) {
        const { paramValue } = this.props;
        const skill = Object.assign({ employeeId: paramValue }, 
        formData);
        skill.startDate = processDate(skill.startDate);
        skill.endDate = processDate(skill.endDate);
    }
}

SkillsForm.js

import React, { Component } from 'react';
import { Input, DatePicker, Select } from 'components/Form';
import moment from 'moment';
import skillsValidations from './validations.js';

const selector = formValueSelector('academicYear');
const processDate = date => (date ? moment(date, date.length === 10 ? 'DD/MM/YYYY' : null) : null);

@connect(state => ({
    startDate: selector(state, 'startDate'),
    perm: state.auth.user.permissions,
}))
@reduxForm({
    form: 'skills',
    validate: skillsValidations,
})
export default class SkillsForm extends Component {
    constructor(props) {
        super(props);

        const defaultValues =
            (props.skill &&
                Object.assign(
                    {
                        startDate: processDate(props.skill.startDate),
                        endDate: processDate(props.skill.endDate),
                    },
                    props.skill,
                )) ||
            {};

        this.props.initialize(defaultValues);
    }

    render() {
       return (
            <form
                    <Field
                        component={DatePicker}
                        name="startDate"
                        label="Start Date"
                        placeholder="select date"
                        required
                    />
                    <Field
                        component={DatePicker}
                        label="End Date"
                        name="endDate"
                        placeholder="End Date"
                    />
            </form>
        );
    }
}

它是validations.js

import {
    createValidator,
    required,
    validDate,
} from 'utils/validation';
import moment from 'moment';

const skillsValidations = createValidator({
    startDate: [required, validDate],
    endDate: [validDate],
});

export default skillsValidations;

我正在使用此代码,但是它基本上不能用于比较两个日期,基本上,结束日期必须大于开始日期,我正在使用日期验证,但是它对我不起作用,因为datepicker验证在选择了更少之后会锁定我的日历比日期和日历不起作用,那么我不选择任何日期,那么我必须更改日历月并选择日期,我不知道这是问题,我不知道我实际上在使用什么问题16和我已经使用react datepicker版本1.1.0 我在两个日期之间进行了比较,但没有逻辑。

1 个答案:

答案 0 :(得分:0)

您可以创建用于检查日期验证的简单帮助程序功能。

    checkDateValidation(startDate, endDate) {
        // check the dates
        if ((new Date(startDate) > new Date(endDate)) || (new Date(endDate) < new Date(startDate))) {
          // set date error validation true 
        } else {
          // null or false date error validation 
        }
      }