Two dates compare - end date should be greater than start date in validation in react redux

Question

I am using date validation but it is not working for me because datepicker validation is lock my calendar after select less than date, so can you please suggest me how to fix this problem.

here is my code:

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

and it is validations.js

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

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

export default skillsValidations;

I am using this code but it is not working for compare two dates basically the end date must be greater than start date, I am using date validation but it is not working for me because datepicker validation is lock my calendar after select less than date and calendar is not working then I am not select any date then I have to change calendar month and select date I don't know that is the issue, I don't know what is the problem actually I am using react 16 and I have use react datepicker version 1.1.0 I have tried many logics between two dates compare but there is not logic.

Answer 1

You can make the simple helper function that check the date validation.

    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

Here to date from input[type=date] form validation (compare if date end is after date begin)

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