# Shadcn Ui Date Picker

> Use ShadDatePicker and ShadDatePicker.range for single or range date selection; presets, ShadDatePickerFormField, ShadDateRangePickerFormField. Use when adding date pickers or date range fields in a Flutter shadcn_ui app or ShadForm.

- **Type:** Skill
- **Install:** `agentstack add skill-serverpod-skills-registry-shadcn-ui-date-picker`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [serverpod](https://agentstack.voostack.com/s/serverpod)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** BSD-3-Clause
- **Upstream author:** [serverpod](https://github.com/serverpod)
- **Source:** https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-date-picker

## Install

```sh
agentstack add skill-serverpod-skills-registry-shadcn-ui-date-picker
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Shadcn UI — Date Picker

## Instructions

`ShadDatePicker` is a date picker with optional range and presets. Use `ShadDatePicker.range()` for range selection. For forms use `ShadDatePickerFormField` and `ShadDateRangePickerFormField` with `id`, `label`, `validator`, and optional `fromValueTransformer`/`toValueTransformer`.

### Single

```dart
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 600),
  child: const ShadDatePicker(),
)
```

### Range

```dart
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 600),
  child: const ShadDatePicker.range(),
)
```

### With presets

Use a `header` widget (e.g. `ShadSelect`) and shared `groupId` so the date picker popover stays open when the select popover closes. Set `selected` from preset choice (e.g. today + days offset).

```dart
ShadDatePicker(
  groupId: groupId,
  header: Padding(
    padding: const EdgeInsets.only(bottom: 4),
    child: ShadSelect(
      groupId: groupId,
      minWidth: 276,
      placeholder: const Text('Select'),
      options: presets.entries
          .map((e) => ShadOption(value: e.key, child: Text(e.value)))
          .toList(),
      selectedOptionBuilder: (context, value) => Text(presets[value]!),
      onChanged: (value) {
        if (value == null) return;
        setState(() => selected = today.add(Duration(days: value)));
      },
    ),
  ),
  selected: selected,
  calendarDecoration: theme.calendarTheme.decoration,
  popoverPadding: const EdgeInsets.all(4),
)
```

### Form fields

```dart
ShadDatePickerFormField(
  label: const Text('Date of birth'),
  onChanged: print,
  description: const Text('Your date of birth is used to calculate your age.'),
  validator: (v) {
    if (v == null) return 'A date of birth is required.';
    return null;
  },
)

ShadDateRangePickerFormField(
  label: const Text('Range of dates'),
  onChanged: print,
  description: const Text('Select the range of dates you want to search between.'),
  validator: (v) {
    if (v == null) return 'A range of dates is required.';
    if (v.start == null) return 'The start date is required.';
    if (v.end == null) return 'The end date is required.';
    return null;
  },
)
```

For form initial value as string (e.g. `'date': '2024-02-01'`), use `fromValueTransformer` and `toValueTransformer` on `ShadDatePickerFormField` to convert to/from `DateTime`. See [reference.md](reference.md) or the Form skill for value transformers.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [serverpod](https://github.com/serverpod)
- **Source:** [serverpod/skills-registry](https://github.com/serverpod/skills-registry)
- **License:** BSD-3-Clause

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-serverpod-skills-registry-shadcn-ui-date-picker
- Seller: https://agentstack.voostack.com/s/serverpod
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.