fonk-range-date-validator

This is a fonk microlibrary that brings validation capabilities to:

• Validate if a field of a form is between a date range.

How to install it:

npm install @lemoncode/fonk-range-date-validator --save

How to add it to an existing form validation schema:

We have the following form model:

const myFormValues = {
  product: 'shoes',
  purchaseDate: new Date('2019-03-10'),
};

The validator must be configured with the following required arguments:

export interface CustomArgs {
  min: Limit;
  max: Limit;
  parseStringToDateFn?: (value: string) => Date;
}

export interface Limit {
  value: Date;
  inclusive?: boolean;
}

These are the default arguments:

let defaultCustomArgs: CustomArgs = {
  min: {
    value: null,
    inclusive: false,
  },
  max: {
    value: null,
    inclusive: false,
  },
  parseStringToDateFn: null,
};

We can add a rangeDate validation to the myFormValues

import { rangeDate } from '@lemoncode/fonk-range-date-validator';

const validationSchema = {
  field: {
    purchaseDate: [
      {
        validator: rangeDate.validator,
        customArgs: {
          min: {
            value: new Date('2019-01-15'),
          },
          max: {
            value: new Date('2019-04-15'),
          },
        },
      },
    ],
  },
};

You can customize the error message displayed in two ways:

• Globally, replace the default error message in all validationSchemas (e.g. porting to spanish):

import { rangeDate } from '@lemoncode/fonk-range-date-validator';

rangeDate.setErrorMessage('El campo debe de ser numérico');

• Locally just override the error message for this validationSchema:

import { rangeDate } from '@lemoncode/fonk-range-date-validator';

const validationSchema = {
  field: {
    purchaseDate: [
      {
        validator: rangeDate.validator,
        message: 'Error message only updated for the validation schema',
        customArgs: {
          min: {
            value: new Date('2019-01-15'),
          },
          max: {
            value: new Date('2019-04-15'),
          },
        },
      },
    ],
  },
};

This validator compare Date values. If your model use dates as string format, you can provide the parseStringToDateFn method.

import { rangeDate } from '@lemoncode/fonk-range-date-validator';

const validationSchema = {
  field: {
    purchaseDate: [
      {
        validator: rangeDate.validator,
        customArgs: {
          min: {
            value: new Date('2019-01-15'),
          },
          max: {
            value: new Date('2019-04-15'),
          },
          parseStringToDateFn: value => new Date(value),
        },
      },
    ],
  },
};

Or if you are using some third party library like moment, date-fns, etc:

import { rangeDate } from '@lemoncode/fonk-range-date-validator';
+ import parse from 'date-fns/parse'

const validationSchema = {
  field: {
    purchaseDate: [
      {
        validator: rangeDate.validator,
        customArgs: {
          min: {
            value: new Date('2019-01-15'),
          },
          max: {
            value: new Date('2019-04-15'),
          },
-         parseStringToDateFn: value => new Date(value),
+         parseStringToDateFn: value => parse(value, 'yyyy-MM-dd HH:mm:ss', new Date()),
        },
      },
    ],
  },
};

You can specify the custom arguments in two ways:

• Locally just customize the arguments for this validationSchema:

import { rangeDate } from '@lemoncode/fonk-range-date-validator';

const validationSchema = {
  field: {
    purchaseDate: [
      {
        validator: rangeDate.validator,
        customArgs: {
          min: {
            value: new Date('2019-01-15'),
          },
          max: {
            value: new Date('2019-04-15'),
          },
          parseStringToDateFn: value => new Date(value),
        },
      },
    ],
  },
};

• Globally, replace the default custom arguments in all validationSchemas:

import { rangeDate } from '@lemoncode/fonk-range-date-validator';

rangeDate.setCustomArgs({ parseStringToDateFn: (value) => new Date(value) ) });

// OR

rangeDate.setCustomArgs({ min: { value: new Date(), inclusive: true }});

// OR

rangeDate.setCustomArgs({ max: { value: new Date(), inclusive: true }});

// OR

rangeDate.setCustomArgs({
  min: { value: new Date(), inclusive: true },
  max: { value: new Date(), inclusive: true },
  parseStringToDateFn: value => new Date(value),
});

Please, refer to fonk to know more.

License

MIT

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend