Locale Date Range

A React date range picker with localized English and Arabic layouts, useful for selecting reporting periods and booking dates in bilingual applications.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Locale Date Range to your project and fits it to your theme.

"use client";

import * as React from "react";
import LocaleDateRange from "../components/ui/locale-date-range";

export default function LocaleDateRangeDemo() {
  return <div className="flex min-h-[460px] w-full flex-col items-center justify-center bg-background p-4 text-foreground sm:p-8"><LocaleDateRange /></div>;
}