Picker Components

import { DatePicker, Calendar, Picker, CascadePicker, TreeSelect } from "antd-mobile";

function DatePicker(props: DatePickerProps): JSX.Element;

interface DatePickerProps {
  value?: Date;
  defaultValue?: Date;
  min?: Date;
  max?: Date;
  precision?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
  onChange?: (val: Date | null) => void;
  onConfirm?: (val: Date) => void;
  onCancel?: () => void;
  children?: React.ReactNode;
  loading?: boolean;
  renderLabel?: (type: string, data: number) => React.ReactNode;
} & NativeProps;

interface DatePickerRef {
  open(): void;
  close(): void;
}

function Calendar(props: CalendarProps): JSX.Element;

interface CalendarProps {
  value?: Date | [Date, Date] | null;
  defaultValue?: Date | [Date, Date] | null;
  selectionMode?: 'single' | 'range';
  min?: Date;
  max?: Date;
  shouldDisableDate?: (date: Date) => boolean;
  allowClear?: boolean;
  onChange?: (val: Date | [Date, Date] | null) => void;
  onPageChange?: (year: number, month: number) => void;
  weekStartsOn?: 'Monday' | 'Sunday';
  renderLabel?: (date: Date) => React.ReactNode | null;
} & NativeProps;

interface CalendarRef {
  jumpTo(page: { year: number; month: number }): void;
  jumpToToday(): void;
}

function Picker<T = any>(props: PickerProps<T>): JSX.Element;

interface PickerProps<T = any> {
  columns: PickerColumn<T>[];
  value?: T[];
  defaultValue?: T[];
  onChange?: (val: T[], extend: PickerValueExtend) => void;
  onConfirm?: (val: T[], extend: PickerValueExtend) => void;
  onCancel?: () => void;
  onSelect?: (val: T[], extend: PickerValueExtend) => void;
  children?: React.ReactNode;
  loading?: boolean;
  mouseWheel?: boolean;
} & NativeProps;

interface PickerColumn<T> {
  key?: string | number;
  options: PickerColumnItem<T>[];
}

interface PickerColumnItem<T> {
  label: React.ReactNode;
  value: T;
  key?: string | number;
}

interface PickerValueExtend {
  columns: PickerColumn[];
  items: (PickerColumnItem | null)[];
}

interface PickerRef {
  open(): void;
  close(): void;
}

function CascadePicker(props: CascadePickerProps): JSX.Element;

interface CascadePickerProps {
  options: CascadePickerOption[];
  value?: string[];
  defaultValue?: string[];
  placeholder?: string;
  onChange?: (val: string[], extend: CascadePickerValueExtend) => void;
  onConfirm?: (val: string[], extend: CascadePickerValueExtend) => void;
  onCancel?: () => void;
  children?: React.ReactNode;
  loading?: boolean;
} & NativeProps;

interface CascadePickerOption {
  label: string;
  value: string;
  children?: CascadePickerOption[];
}

interface CascadePickerValueExtend {
  items: (CascadePickerOption | null)[];
}

interface CascadePickerRef {
  open(): void;
  close(): void;
}

function TreeSelect(props: TreeSelectProps): JSX.Element;

interface TreeSelectProps {
  options: TreeSelectOption[];
  value?: string[];
  defaultValue?: string[];
  multiple?: boolean;
  onChange?: (val: string[], nodes: TreeSelectOption[]) => void;
  fieldNames?: FieldNamesType;
  children?: React.ReactNode;
} & NativeProps;

interface FieldNamesType {
  label?: string;
  value?: string;
  disabled?: string;
  children?: string;
}

interface TreeSelectOption {
  label: string;
  value: string;
  disabled?: boolean;
  children?: TreeSelectOption[];
}

import { DatePicker, Calendar, Picker, CascadePicker } from "antd-mobile";

function PickerExample() {
  const [date, setDate] = useState<Date | null>(null);
  const [region, setRegion] = useState<string[]>([]);

  const regionOptions = [
    {
      label: 'California',
      value: 'CA',
      children: [
        { label: 'San Francisco', value: 'SF' },
        { label: 'Los Angeles', value: 'LA' }
      ]
    }
  ];

  return (
    <div>
      <DatePicker
        value={date}
        onChange={setDate}
        precision="day"
      >
        {date ? date.toDateString() : 'Select Date'}
      </DatePicker>

      <CascadePicker
        options={regionOptions}
        value={region}
        onChange={setRegion}
      >
        {region.length ? region.join(' - ') : 'Select Region'}
      </CascadePicker>
    </div>
  );
}