Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freysie/watch-date-picker
A customizable date picker for watchOS and SwiftUI.
https://github.com/freysie/watch-date-picker
datepicker swift swiftui watchos
Last synced: 13 days ago
JSON representation
A customizable date picker for watchOS and SwiftUI.
- Host: GitHub
- URL: https://github.com/freysie/watch-date-picker
- Owner: freysie
- License: mit
- Created: 2021-10-30T17:35:37.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-02T16:12:12.000Z (11 months ago)
- Last Synced: 2024-04-14T10:59:46.972Z (7 months ago)
- Topics: datepicker, swift, swiftui, watchos
- Language: Swift
- Homepage:
- Size: 4.48 MB
- Stars: 60
- Watchers: 2
- Forks: 20
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```swift
DatePicker(
"Date & Time",
selection: $value
)
```
### Selecting a Date
```swift
DatePicker(
"Date",
selection: $value,
displayedComponents: .date
)
```
### Selecting a Time
```swift
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.
```swift
DateInputView(selection: $value)
```
The date input view uses the current locale for labeling and ordering the day-month-year pickers.
```swift
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.
```swift
TimeInputView(selection: $value)
```
24-hour mode can be explicitly enabled or disabled regardless of locale.
```swift
TimeInputView(selection: $value)
.timeInputViewTwentyFourHourMode()
TimeInputView(selection: $value)
.timeInputViewTwentyFourHourMode(false)
```
The 24-hour mode indicator can be hidden.
```swift
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](https://freysie.github.io/watch-date-picker-qa/) to ensure everything renders correctly.