@app-studio/components

DatePicker

A customizable date selection input for user interfaces.

Import

import { DatePicker } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

Loading preview…

import React from 'react';
import { DatePicker } from '@app-studio/components';

export const DefaultDatePicker = () => <DatePicker label="Select a date" />;

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

Scroll horizontally to see every column.

DatePicker
Prop	Type	Default	Description
`id`	`string`	`—`	See the type and source declaration for this property.Source
`error`	`boolean`	`false`	Indicates whether the DatePicker has an error.Source
`helperText`	`string`	`—`	Additional helper text that provides information about the field.Source
`name`	`string`	`—`	The name of the toggle.Source
`isReadOnly`	`boolean`	`false`	If true, the DatePicker cannot be selected.Source
`isDisabled`	`boolean`	`false`	If true, the DatePicker will be unusable.Source
`label`	`string`	`—`	The label text for the field.Source
`onChange`	`((value: string) => void)`	`—`	Called with the date string the field now holds (`yyyy-mm-dd`) — never the DOM event, so `e.target.value` is a compile error. Typed rather than `any` so a DOM-shaped handler fails to build instead of failing silently.Source
`onChangeText`	`((text: string) => void)`	`—`	Callback function triggered when the DatePicker value changes for IOS and Android.Source
`views`	`DatePickerStyles`	`{ container: {}, label: {}, helperText: {}, text: {}, field: {} }`	CSS styles for the DatePicker container and label.Source
`shape`	`Shape` `"square""rounded""pill""default"`	`'default'`	The shape that changes the outlines of the field.Source
`variant`	`Variant` `"outline""default""none"`	`'default'`	Changes the style of the field.Source
`size`	`Size` `"sm""md""lg""xs""xl"`	`'md'`	The size that sets the height and width of the DatePicker.Source
`shadow`	`ViewProps \| Shadow \| Elevation`	`{}`	Adds a shadow effect to the DatePicker.Source

Common inherited styling props (7)

Scroll horizontally to see every column.

DatePicker inherited
Prop	Type	Default	Description
`onClick`	`any`	`—`	Called when the user activates the component.
`media`	`Record<string, CssProps>`	`—`	See the type and source declaration for this property.
`as`	`keyof JSX.IntrinsicElements` `"symbol""object""slot""style""title""pattern""form""animate""clipPath""filter""marker""mask""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""script""section""select""small""source""span""strong""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""tr""track""u""ul""var""video""wbr""webview""svg""animateMotion""animateTransform""circle""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""metadata""mpath""path""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view"`	`—`	See the type and source declaration for this property.
`themeMode`	`"light" \| "dark"` `"light""dark"`	`—`	See the type and source declaration for this property.
`_hover`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_active`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_focus`	`string \| CssProps`	`—`	See the type and source declaration for this property.

For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.

Usage guidance

Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
These previews run in the browser. Check React Native setup for platform requirements and differences.