Date Picker

macOS 13.3+

Picks a date, a time, or both with SwiftUI's native date picker.

Date picker showing a due date, with its label

import SwiftUIstruct DatePickerUsageExample: View {    @State private var dueDate = DateComponents(calendar: .current, year: 2026, month: 10, day: 14).date ?? .now    var body: some View {        DatePicker("Due date", selection: $dueDate, displayedComponents: .date)            .padding(FLXSpacing.xl)    }}

Usage

DatePicker already brings keyboard and VoiceOver support and the formats for every language and region, so use it directly:

DatePicker("Due date", selection: $dueDate, displayedComponents: .date)

macOS shows the title before a text field with a stepper. People type each part of the date or change it with the arrow keys. To hide the title, add .labelsHidden(). VoiceOver reads it either way.

Examples

Date and time

displayedComponents picks what people can change: .date, .hourAndMinute, or both, which is the default.

Date pickers for a date, a time, and both

import SwiftUIstruct DatePickerComponentsExample: View {    @State private var date = DateComponents(calendar: .current, year: 2026, month: 10, day: 14, hour: 9, minute: 41).date ?? .now    var body: some View {        VStack(spacing: FLXSpacing.lg) {            DatePicker("Date", selection: $date, displayedComponents: .date)            DatePicker("Time", selection: $date, displayedComponents: .hourAndMinute)            DatePicker("Starts", selection: $date)        }        .padding(FLXSpacing.xl)    }}

Graphical

.graphical shows a calendar. With .hourAndMinute, it also shows a clock.

import SwiftUIstruct DatePickerGraphicalExample: View {    @State private var date = DateComponents(calendar: .current, year: 2026, month: 10, day: 14).date ?? .now    var body: some View {        DatePicker("Date", selection: $date, displayedComponents: .date)            .datePickerStyle(.graphical)            .padding(FLXSpacing.xl)    }}

Field

.field shows the text field without the stepper.

import SwiftUIstruct DatePickerFieldExample: View {    @State private var date = DateComponents(calendar: .current, year: 2026, month: 10, day: 14).date ?? .now    var body: some View {        DatePicker("Due date", selection: $date, displayedComponents: .date)            .datePickerStyle(.field)            .padding(FLXSpacing.xl)    }}

Range

Pass a range to in: to limit the dates people can pick.

DatePicker("Check-in", selection: $checkIn, in: Date.now..., displayedComponents: .date)

In a form

Inside a Form, date pickers line up with the other controls.

Grouped form with a title, an all-day toggle, a date, and a time

import SwiftUIstruct DatePickerFormExample: View {    @State private var title = "Design review"    @State private var date = DateComponents(calendar: .current, year: 2026, month: 10, day: 14, hour: 9, minute: 30).date ?? .now    @State private var allDay = false    var body: some View {        Form {            TextField("Title", text: $title)            Toggle("All-day", isOn: $allDay)            DatePicker("Date", selection: $date, displayedComponents: .date)            if !allDay {                DatePicker("Time", selection: $date, displayedComponents: .hourAndMinute)            }        }        .formStyle(.grouped)    }}

With Form Field

Inside a Form Field, hide the date picker's title with .labelsHidden() and let FLXFieldLabel show it above, with a description below.

Due date picker with a label and a description

import SwiftUIstruct DatePickerFormFieldExample: View {    @State private var dueDate = DateComponents(calendar: .current, year: 2026, month: 10, day: 14).date ?? .now    var body: some View {        FLXFormField {            FLXFieldLabel("Due date") {                DatePicker("Due date", selection: $dueDate, displayedComponents: .date)                    .labelsHidden()            }            FLXFormFieldDescription("We'll remind you the day before.")        }        .padding(FLXSpacing.xl)    }}

Color

The system draws every date picker style in its own colors. None of them take the theme's tint or the app's AccentColor.

Size

.controlSize(_:) changes the height of the field, from 20 points with .small to 26 with .large. The default, 22, is a little shorter than FLX's text fields.

For more information about date pickers, see the Apple documentation.