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 'ponents/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
                        ponent={DatePicker}
                        name="startDate"
                        label="Start Date"
                        placeholder="select date"
                        required
                    />
                    <Field
                        ponent={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 pare 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 pare but there is not logic.

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 'ponents/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
                        ponent={DatePicker}
                        name="startDate"
                        label="Start Date"
                        placeholder="select date"
                        required
                    />
                    <Field
                        ponent={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 pare 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 pare but there is not logic.

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited Mar 1, 2019 at 7:00 Praveen Rao Chavan.G 2,87033 gold badges2323 silver badges3737 bronze badges asked Mar 1, 2019 at 6:57 zuckzuck 1111 gold badge11 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

Here to date from input[type=date] form validation (pare 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!
        }
      }

javascriptformvalidationparedate