Date

DD/MM/YYYY (DMY). Calendar validity is checked.

← All examples·date

Preview

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ date: string }>()
  const { date } = useViraMask({
    form,
    schema: { date: "date" },
  })
 
  const { rawValue, ...inputProps } = date
 
  return <input {...inputProps} placeholder="29/07/2026" />
}

Details

Mask: 99/99/9999
Preset: "date"
Built-in validator: 'date' Produces a form error when an invalid value is entered.
dateFormat defaults to 'DMY'. Can be changed with MDY / YMD.

Customization

MDY format

Month/day/year order.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { date: "" } })
 
const { date } = useViraMask({
  form,
  schema: {
    date: {
      preset: "date",
      dateFormat: "MDY",
      errorMessage: "Invalid date",
    },
  },
})
 
const { rawValue, ...inputProps } = date
 
<input {...inputProps} placeholder="07/29/2026" />

YMD format

Year/month/day order. Override the mask to 9999/99/99 so the year takes four slots first.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { date: "" } })
 
const { date } = useViraMask({
  form,
  schema: {
    date: {
      preset: "date",
      dateFormat: "YMD",
      mask: "9999/99/99",
      errorMessage: "Invalid date",
    },
  },
})
 
const { rawValue, ...inputProps } = date
 
<input {...inputProps} placeholder="2026/07/29" />

See useViraMask() for the hook API and custom mask for custom masks.

Date

DD/MM/YYYY (DMY). Calendar validity is checked.

← All examples·date

Preview

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ date: string }>()
  const { date } = useViraMask({
    form,
    schema: { date: "date" },
  })
 
  const { rawValue, ...inputProps } = date
 
  return <input {...inputProps} placeholder="29/07/2026" />
}

Details

Mask: 99/99/9999
Preset: "date"
Built-in validator: 'date' Produces a form error when an invalid value is entered.
dateFormat defaults to 'DMY'. Can be changed with MDY / YMD.

Customization

MDY format

Month/day/year order.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { date: "" } })
 
const { date } = useViraMask({
  form,
  schema: {
    date: {
      preset: "date",
      dateFormat: "MDY",
      errorMessage: "Invalid date",
    },
  },
})
 
const { rawValue, ...inputProps } = date
 
<input {...inputProps} placeholder="07/29/2026" />

YMD format

Year/month/day order. Override the mask to 9999/99/99 so the year takes four slots first.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { date: "" } })
 
const { date } = useViraMask({
  form,
  schema: {
    date: {
      preset: "date",
      dateFormat: "YMD",
      mask: "9999/99/99",
      errorMessage: "Invalid date",
    },
  },
})
 
const { rawValue, ...inputProps } = date
 
<input {...inputProps} placeholder="2026/07/29" />

See useViraMask() for the hook API and custom mask for custom masks.