Watch Date Picker

A customizable date picker for watchOS and SwiftUI.

Installation

.package(url: "https://github.com/freyaariel/watch-date-picker.git", branch: "main")

import WatchDatePicker

Overview

The DatePicker view displays a button with a title and the selected value. When pressed, it presents a sheet with user interfaces for selecting date and time.

Date & Time Mode

DatePicker("Date & Time", selection: $value)

Date Mode

DatePicker("Date", selection: $value, mode: .date, maximumDate: Date())

Time Mode

DatePicker("Time", selection: $value, mode: .time, twentyFourHours: true)

Outside of Lists

Both DatePickerView and TimePickerView can be used indepedently of DatePicker.

Date Picker View

DatePickerView(selection: $value)

DatePickerView(selection: $value)
  .environment(\.locale, Locale(identifier: "fr"))

Time Picker View

TimePickerView(selection: $value)

TimePickerView(
  selection: $value,
  selectionIndicatorRadius: 7,
  selectionIndicatorColor: .mint,
  focusColor: .purple,
  amPMHighlightColor: .yellow,
  markSize: CGSize(width: 5.5, height: 3),
  markFill: AnyShapeStyle(Color.white.opacity(0.75)),
  emphasizedMarkSize: CGSize(width: 2, height: 7),
  emphasizedMarkFill: AnyShapeStyle(Color.pink)
)

ℹ️ Note:

The API exposed by WatchDatePicker is different from that of SwiftUI’s built-in date picker. When sharing code between multiple platforms, #if os(watchOS), target memberships, or namespaces can be used to disambiguate.

Topics

Setting Date Picker Mode

var mode: DatePicker.Mode

Mode that determines the appearance of a date picker. Default is .dateAndTime.

Customizing Appearance

var confirmationColor: Color? 

The color for the date & time confirmation button.
Default is .green.
When mode is not .dateAndTime, this value is ignored.

var confirmationTitleKey: LocalizedStringKey?

The radius of the date & time confirmation button.
Default is “Continue” if mode is .dateAndTime, or “Done” if mode is .date.
When mode is .time or nil, this value is ignored.

var selectionIndicatorRadius: CGFloat?

The radius of the time selection indicators.
Default is 2.0.
When mode is .date, this value is ignored.

var selectionIndicatorColor: Color?

The color for the time selection indicators.
Default is .accentColor.
When mode is .date, this value is ignored.

var focusColor: Color?

The color for the focus outline of time fields.
Default is .green.

GitHub

View Github