Prismane / after

This validator checks if a date is after a given date.

Import

import { after } from '@prismane/core/validators';

Parameters

The after validator accepts the following parameters:

Name	Type	Description	Default Value
`date`	Date	The date that will be validated.	-
`target`	Date	The target date.	-
`fieldName`	string, undefined	The name of the field.	-

Usage

The after validator compares two dates and returns a string error, if the provided date is before the provided target date.

const date = new Date('2023-06-05');
const target = new Date('2024-01-01');

const error = after(date, target);

console.log(error); // This date must be after January 1, 2024!

If there is no error, null is returned.

const date = new Date('2024-06-05');
const target = new Date('2024-01-01');

const error = after(date, target);

console.log(error); // null

Custom Error Message

Pass the fieldName parameter to the validator, which is the third parameter, to customize the error message to make it more personalized to the given field.

const date = new Date('2023-06-05');
const target = new Date('2024-01-01');

const error = after(date, target, 'Deadline');

console.log(error); // Deadline must be after January 1, 2024!

useForm Example

The after validator, like all other validators of Prismane, has a great integration with our useForm hook.

Firstly, import the useForm hook like so:

import { useForm } from '@prismane/core/hooks';

Then do the following:

function Demo() {
  const { handleSubmit, register } = useForm({
    fields: {
      date: {
        value: "",
        validators: {
          after: (v: string) => after(new Date(v), new Date()),
        },
      },
    },
  });

  return (
    <Form
      onSubmit={(e: any) => {
        handleSubmit(e, (v: any) => console.log(v, ""));
      }}
    >
      <NativeDateField
        placeholder="Enter date:"
        label="Date:"
        {...register("date")}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

PreviousMiscellaneous

Nextbefore