DatePicker

Beta

Date selection control with multiple display variants and formatting options.

Installation

npm install @xaui/native

Import

import { DatePicker } from '@xaui/native/datepicker'

Basic Usage

Minimal example showing the component with its default configuration.

import { DatePicker } from '@xaui/native/datepicker'

export function Example() {
  return <DatePicker />
}

Variants

Use case with multiple visual variants.

import { DatePicker } from '@xaui/native/datepicker'

export function VariantsExample() {
  return (
    <>
      <DatePicker variant="solid" />
      <DatePicker variant="outlined" />
      <DatePicker variant="light" />
      <DatePicker variant="flat" />
      <DatePicker variant="faded" />
    </>
  )
}

Controlled State

Controlled pattern using external React state.

import { useState } from 'react'
import { DatePicker } from '@xaui/native/datepicker'

export function ControlledExample() {
  const [value, setValue] = useState(undefined)

  return <DatePicker value={value} onValueChange={setValue} />
}

Disabled State

Use case where the component should be non-interactive.

import { DatePicker } from '@xaui/native/datepicker'

export function DisabledExample() {
  return <DatePicker isDisabled />
}

Customization

Customization via the customAppearance API.

import { DatePicker } from '@xaui/native/datepicker'

export function CustomAppearanceExample() {
  return (
    <DatePicker
      customAppearance={{
        container: { borderRadius: 12 },
      }}
    />
  )
}