Skip to content

SwiftUI: DatePicker & TimePicker

DatePicker gives you the flexibility of either selecting only the date or both the date and time. It’s a useful tool if you would like to give the user’s input on either date or time. The implementation too didn’t look too difficult.

A control for selecting an absolute date.

Apple Documentation

In this tutorial, you’ll learn what it takes to build a DatePicker in SwiftUI. You’ll learn:

  • How to build a DatePicker.
  • How to build a TimePicker
  • How to build a combination of DatePicker & TimePicker
  • How to include either minimum or maximum range

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Basic DatePicker

The most basic DatePicker includes only date. For this, you will see how it is being done.

The DatePicker looks a little unusual. It looks like it’s leaning more to the right. Well, that’s because the left space is where the title of the DatePicker should be should you intend to add a title.

For the code above, the title is empty.

You just need to hide the title. You can do that with .labelsHidden() and the DatePicker will be centered.

Basic TimePicker

Next, you would like to have TimePicker instead of DatePicker. Well, that’s also really easy to make it work. For the displayedComponent, you can use .hourAndMinute as shown below.

The result of the time is as shown below:

DatePicker & TimePicker

Now, having only one doesn’t quite satisfy your project need. You need both TimePicker and DatePicker. displayedComponent could actually take an array. By including both time and date, you will get both DatePicker and TimePicker.

You can add a Label under the DatePicker to indicate the selection that you have made. You can do that with the following code just below the DatePicker code:

With this, you will be able to get the input from the selection that the user made.

Maximum Range

Now your project is getting more and more requirement at the last minute. Sounds familiar? You are required to add either a minimum or a maximum range by either allowing the user to start on specific date or not allowing user to go beyond certain date.

You will first start with the maximum range. The maximum range is 30 days. To do that, first you will have to create a variable of 30 days.

Then in the DatePicker, you will include an additional parameter that takes in ClosedRange<Date>. The ... is called Range Operator and it is mainly used to express a range of values between a minimum and maximum value. When you use only one value, it will act as a One-sided Range that extends until the range ends.

So here, there isn’t a minimum range but more of a maximum range. User can only select no later than 30 days. If you’ve gone beyond 30 days, it will by default select the maximum dates as shown below.

Minimum Range

Now, twist that around and let the minimum date begins from 30 days.

When you run the project, the date will first begin after 30 days which is January 18 in my case.

Minimum and Maximum Range

Why not have both minimum and maximum range? Well, you will have to create a variable to contain that information. The variable below return the date from today as the minimum and the next 30 days as the maximum.

Simply plug the variable in and it will run as usual.

Ladies and gentleman, and that is DatePicker for SwiftUI.

Where to go From Here

If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:

Published inSwiftUI

One Comment

  1. Victor Victor

    Hi, Thanks for the post about date and timePicker (SwiftUI). Could you teach me how to auto hide the date/timePicker after choose the date/time please

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © DaddyCoding 2017-2020