Does this component convert values to UTC?

No. It passes native input strings through unchanged, including local datetime values.

Can I use this for booking availability?

It accepts arbitrary endpoints. It does not display available days, time slots or a calendar.

Input Date Range

A controlled date range field with native date and local date-time inputs.

Date range

StartsEnds

Event window · 2026-10-20 10:30 to 2026-10-20 12:00

Input Date Range is a free forms-inputs component for Next.js, React and Tailwind that pairs two native inputs for arbitrary start and end dates.

Use date-only values for reporting filters or datetime-local values for event windows. The component returns each browser string unchanged, exposes native bounds, and reports a reversed range without silently changing the values.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-date-range

Usage

"use client";

import { useState } from "react";
import { InputDateRange } from "@/components/input-date-range";

export function EventWindow() {
  const [range, setRange] = useState({ start: "2026-10-20T10:30", end: "2026-10-20T12:00" });
  return <InputDateRange start={range.start} end={range.end} onStartChange={(start) => setRange((current) => ({ ...current, start }))} onEndChange={(end) => setRange((current) => ({ ...current, end }))} startLabel="Starts" endLabel="Ends" mode="datetime-local" />;
}

Props

Prop	Type	Default	Description
start	string	required	Controlled native start string; pass the exact date or local date-time value.
end	string	required	Controlled native end string.
onStartChange	(value: string) => void	required	Receives the exact input value, including an empty string.
onEndChange	(value: string) => void	required	Receives the exact input value, including an empty string.
startLabel	string	required	Visible label for the start endpoint.
endLabel	string	required	Visible label for the end endpoint.
mode	'date' \| 'datetime-local'	'date'	Native input mode; values are never converted through Date.
min	string	undefined	Native minimum applied to both inputs.
max	string	undefined	Native maximum applied to both inputs.
error	string	undefined	Consumer error displayed and associated with both controls.
startName	string	undefined	Native form name for the start input.
endName	string	undefined	Native form name for the end input.
className	string	undefined	Additional classes merged onto the fieldset.

Customisation

Both inputs use semantic border, background, text and focus tokens. The consumer owns parsing, persistence and timezone interpretation.

.event-window { max-inline-size: 42rem; }

Frequently asked questions

Does this component convert values to UTC?: No. It passes native input strings through unchanged, including local datetime values.
Can I use this for booking availability?: It accepts arbitrary endpoints. It does not display available days, time slots or a calendar.

Related components

Build the rest of your formExplore more free form fields for your React project.Form components