Skip to Content
UI Components/Cupertino UI/Cupertino Date Picker

Cupertino Date Picker

iOS-style date and time picker with spinning wheel interface

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

DatePicker.tsx
1import { useState } from 'react';
2import { FlutterCupertinoDatePicker } from '@openwebf/react-cupertino-ui';
3
4export function DatePickerExample() {
5  const [value, setValue] = useState('2025-01-01T12:00:00.000');
6
7  return (
8    <FlutterCupertinoDatePicker
9      mode="dateAndTime"
10      value={value}
11      onChange={(e) => setValue(e.detail)}
12    />
13  );
14}

API Reference

Props (React)

NameTypeDefaultDescription
mode'time' | 'date' | 'dateAndTime' | 'monthYear'dateAndTimePicker display mode.
valuestring-ISO8601 date-time value.
minimumDatestring-ISO8601 minimum date-time.
maximumDatestring-ISO8601 maximum date-time.
onChange(event: CustomEvent<string>) => void-Fires on selection changes (`event.detail` is ISO8601 string).
Full type definitions: npm package docs.