Val

Overview

Date Schema

s.date()

Use the s.date() schema to represent dates (not datetime). Dates are stored as ISO 8601 date strings and automatically opt out of visual editing steganography.

Date values are stored as strings in ISO 8601 date format (e.g., 2024-03-15). This format ensures consistency and makes dates easy to parse and display.

Methods:

.validate: method

Custom validation function

.from(date): method

Set a minimum date (inclusive)

s.date().from("2024-01-01")

.to(date): method

Set a maximum date (inclusive)

s.date().to("2024-12-31")

Examples:

Basic usage

const schema = s.object({
  publishedAt: s.date(),
  updatedAt: s.date(),
});

export default c.define("/content/article.val.ts", schema, {
  publishedAt: "2024-03-15",
  updatedAt: "2024-03-20",
});

With date range validation

const schema = s.object({
  // Date must be between Jan 1, 2024 and Dec 31, 2024
  eventDate: s.date().from("2024-01-01").to("2024-12-31"),
  
  // Date must be after today
  futureDate: s.date().validate((date) => {
    const eventDate = new Date(date);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    if (eventDate < today) {
      return { success: false, message: "Date must be in the future" };
    }
    return { success: true };
  }),
});

Using in components

import { fetchVal } from "@/val/val.rsc";
import articleVal from "./article.val";

export default async function Article() {
  const { publishedAt } = await fetchVal(articleVal);
  
  // Parse and format the date
  const date = new Date(publishedAt);
  const formatted = date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
  
  return <time dateTime={publishedAt}>{formatted}</time>;
}

Why use s.date() instead of s.string()?

While you could use s.string() for dates, s.date() provides several advantages:

Automatic steganography opt-out - Dates are automatically marked as .raw(), preventing visual editing issues
Better UI - Val Studio displays a date picker for easier editing
Type safety - Makes it clear that the field expects a date value
Consistent format - Ensures all dates follow ISO 8601 standard

s.richtext()

.nullable()