skills.rest
Aurelian1974
Aurelian1974COMMUNITY
Explore all skills by this author →
GitHub

ui-datetime-picker

Implements DatePicker, DateTimePicker, and DateRangePicker React components with Romanian locale and React Hook Form integration.

Updated Aug 18, 2026
Search Tags:#react#zod#shadcn-ui#react-hook-form#date-fns#datepicker#romanian-locale
One-click install
npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-datetime-picker-aurelian1974
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-datetime-picker
Source: https://github.com/Aurelian1974/ERPEnterprise/tree/main/.github/skills/ui-datetime-picker
Command: npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-datetime-picker-aurelian1974

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires date-fns, react-hook-form, zod, lucide-react.

What problem does it solve? ERP forms need date inputs that follow the Romanian dd.MM.yyyy display format, support direct typing, and integrate cleanly with React Hook Form and Zod validation, which default date inputs do not provide. ## Core Features & Use Cases - Three Picker Variants: A simple DatePicker with typed input plus calendar popover, a DateTimePicker combining calendar and time input, and a DateRangePicker with two-month range selection. - Romanian Localization: All pickers use the ro locale from date-fns and enforce the dd.MM.yyyy display format throughout the UI. - Form Integration: Components connect to React Hook Form via Controller and FormField, with reusable Zod schemas for required dates, future dates, and date ranges. - Use Case: When building an ERP form with a due date field, a scheduled timestamp, and a reporting period, drop in these three components and the provided Zod schemas to get validated, localized date entry. ## Quick Start Ask the AI to add a DatePicker field with Romanian dd.MM.yyyy format to a React Hook Form form using shadcn/ui Calendar and Popover.

Frequently Asked Questions about ui-datetime-picker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a DatePicker with shadcn/ui Calendar and React Hook Form?▼

Wrap a shadcn/ui Calendar inside a Popover, pair it with an Input for typed entry, and connect it to React Hook Form through a Controller or FormField. The component exposes value and onChange props that map directly to the field state.

How to format dates as dd.MM.yyyy with Romanian locale in date-fns?▼

Use format(date, 'dd.MM.yyyy') from date-fns and pass the ro locale imported from date-fns/locale to the Calendar component. This renders day and month names in Romanian while keeping the dd.MM.yyyy display format.

Can users type dates directly instead of using the calendar popup?▼

Yes, the DatePicker includes a text input that parses typed values with date-fns parse once the input reaches 10 characters in dd.MM.yyyy format. Clearing the input sets the value to null, and blur reformats valid dates.

How do I validate date ranges with Zod in React forms?▼

Define a Zod object with from and to date fields, then add a refine check ensuring the end date is after the start date. Attach the error message to the to field path so FormMessage displays it correctly.

Does the DateTimePicker support selecting both date and time?▼

Yes, it combines a calendar popover for the date with a native time input for hours and minutes. Selecting a date preserves the existing time using date-fns setHours and setMinutes, and the time input is disabled until a date exists.

Related Skills

Explore More Software Engineering Skills→
nthplusionthplusio

shadcn-forms

Implement validated React forms with shadcn-ui, react-hook-form, and zod.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-forms-date

Implement and validate Canopy lg-date-field inputs in Angular forms.

Official
Basic
verivendverivend

form-validation

Implement Vue.js form validation with VeeValidate 4 and Zod schemas.

Official
Intermediate
DevExpressDevExpress
39

devextreme-datebox

Configure DevExtreme DateBox pickers for Angular, React, Vue, and jQuery.

Official
Intermediate