freysie/watch-date-picker

A customizable date picker for watchOS and SwiftUI.

Watch Date Picker

A customizable date picker for watchOS and SwiftUI.

Installation

Add the https://github.com/freysie/watch-date-picker package, then add the WatchDatePicker product to your app’s WatchKit extension target.

Overview

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

Watch Date Picker is designed to look and feel similar to the system’s date and time pickers, seen in apps such as Alarms, Calendar, and Reminders, with an API matching SwiftUI’s built-in DatePicker.

Selecting Date and Time

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

Selecting a Date

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

Selecting a Time

DatePicker(
    "Time",
    selection: $value,
    displayedComponents: .hourAndMinute
)

Customization

DateInputView and TimeInputView, the two views which DatePicker is primarily composed of, can be used on their own.

Date Input View

The date input view displays three pickers for selecting day, month, and year.

DateInputView(selection: $value)

The date input view uses the current locale for labeling and ordering the day-month-year pickers.

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

Time Input View

The time input view displays a clock dial for selecting hour and minute. In locales with AM/PM-based time, AM/PM buttons will be displayed, otherwise 24-hour mode is used.

TimeInputView(selection: $value)

24-hour mode can be explicitly enabled or disabled regardless of locale.

TimeInputView(selection: $value)
    .timeInputViewTwentyFourHourMode()

TimeInputView(selection: $value)
    .timeInputViewTwentyFourHourMode(false)

The 24-hour mode indicator can be hidden.

TimeInputView(selection: $value)
    .timeInputViewTwentyFourHourMode()
    .timeInputViewTwentyFourHourIndicator(.hidden)

See the documentation for more options.

Localization

Watch Date Picker works in all languages supported by watchOS: Arabic, Bulgarian, Catalan, Chinese (Simplified), Chinese (Traditional), Croatian, Czech, Danish, Dutch, English, Finnish, French, German, Greek, Hebrew, Hindi, Hungarian, Indonesian, Italian, Japanese, Kazakh, Korean, Malay, Norwegian, Polish, Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian, Slovak, Spanish, Spanish (Latin America), Swedish, Thai, Turkish, Ukrainian, and Vietnamese.

Translations are based on Apple’s glossaries, thus they should feel at home in each locale.

A script is run to take screenshots for every locale and screen size to ensure everything renders correctly.

watch-date-picker's Issues

picker focus jump back

thank you to Freysie for her work

In addition to the prompt found by Chris, I also have a question about the date selection view, when you directly select the second picker and scroll to change, it will refocus and jump back to the first picker, which troubles me a bit.

Thanks, freysie, the interface you created is wonderful!

"... is only available in iOS 13.0 or newer" in a project targeting iOS 15.0

I'm using Xcode 13.4 and have created a new SwiftUI project using the "iOS app with watch app" project template. The target for the main app is set to iOS 15.5 and the watch target is set to WatchOS 8. Everything was building and running on the simulator fine.

I've just added the watch-date-picker Swift package to my project, and now I can't build my project - I get tons of errors in the added watch-date-picker package's code complaining that various things are only available in iOS 13.0 or newer. I haven't even tried using the library yet - I've just added it via File -> Add Packages

I'm confused why I'm getting this error - as far as I can tell, I'm targeting the latest versions of everything - iOS 15.5 and WatchOS 8.5. Can anyone explain why this is and what I can do to resolve it? Am I missing something? Is there something I need to do to tell the package to only build for WatchOS and not iOS? I've tried cleaning, deleting derived data, closing Xcode, nothing works. Thanks!

Runtime warning running in simulator...

Hi - super work on this - thank you!

One observation - that there are repeated warnings in the Xcode debugger console when running in the watch simulator - one per picker:

"ScrollView contentOffset binding has been read; this will cause grossly inefficient view performance as the ScrollView's content will be updated whenever its contentOffset changes. Read the contentOffset binding in a view that is not parented between the creator of the binding and the ScrollView to avoid this."

I see the same for my own picker code for WatchOS - and wonder if you have thoughts. Is there an underlying problem? Or is it just an anomaly with the simulator?

Thanks - Chris.

How to use the resulting Date/Time

Hi Freya

Thanks for your fabulous work with this picker!

The import of your package in to my 'watchOS only' app was straight forward. Displaying the picker to select a date and time works - here now comes my problem, where can i grab the resulting value, so that i can use it in my app?

I tried reading through your code, but i must have missed the relevant part for my problem.

Looking forward to your suggestion ;-)
Alex