两个日期比较 - 结束日期应该大于反应 redux 中验证的开始日期

Question

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

这是我的代码：

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 验证是在 select less 后锁定我的日历比日期和日历不起作用然后我没有选择任何日期然后我必须更改日历月份并选择日期我不知道这是问题，我不知道实际上我使用的是什么问题反应 16 和我使用了 react datepicker 版本 1.1.0 我在两个日期比较之间尝试了很多逻辑，但没有逻辑。

Answer 1

您可以制作简单的辅助函数来检查日期验证。

    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 
        }
      }

Answer 2

从输入[type=date] 表单验证到日期（比较日期结束是否在日期开始之后）

checkDateValidation(startDate, endDate) {
        // check the dates
        if (Math.floor((new Date(startDate).getTime() - new Date(endDate).getTime()) / (24 * 3600 * 1000)) < 1)  {
          // set date error validation true 
        } else {
          // ok pass: end date is sup start date!
        }
      }

javascriptformvalidationcomparedate