Adding a UIDatePicker to UITextField(Extensions)

iDev
4 min readNov 11, 2020

During this week of learning app development, we dove into complex input screens with a UITalbeView.

What we have here are some very commonly used input screens used to put data into the application.

The three cells with First Name, Last Name, and Email is what as known as UITextFields. This is where the user enters text when a keyboard is prompted.

The next two cells have what is known as UIDatePickers. When the cell is tapped, a DatePicker will be presented and you can choose the date accordingly. You’ve probably seen these before if you are familiar with iPhones and iOS. The older style is in a wheel format, but the more modern version is what is called compact, which displays a miniature calendar.

Wheel Format
Compact Format

The next two cells after that are steppers. With a plus or minus symbol to tap whether you want the value to go up or down. It steps the value with each tap.

Stepper

The next cell is a switch. Very simple, as the switch is tapped it's either On or Off. This works great for Booleans to determine whether true or false.

Switch(off position)

Now the thing I had trouble with within this week's project was trying to get a UIDatePicker to be the way I input a date into a text field instead of just typing it. It was part of the project to use a UIDatePicker but only display the month and year as the expiration date just as you would see on most credit cards.

The problem is when I text field is tapped keyboard slides up and you enter text. This would be the input view of a text field. But what I want is a date picker to be the input view and a wheel format date picker to slide up instead. Since the UITextField does not have this functionality, we must add this functionality to it, this is where “extensions” come in.

Extensions add new functionality to an existing class, structure, enumeration, or protocol type. This includes the ability to extend types for which you do not have access to the source code(Apple’s definition). Basically, allow the text field to do something it originally could not do, for example, use a DatePicker.

This is how the syntax would look.

So to add a DatePicker to the input view of the text field, I made an extension of UITextField, and the new ability is a function that first creates a DatePicker object then sets it to the input view. It looks like this.

Here the screen width is stored in a constant. Then we create the DatePicker with the width the same as the screen width and set the height(216 is the height of the wheel format). Next, I set the mode to “date’’, versus “time” or “date and time” together. Date mode will only give month, day, and year. Then I set the preferred style to “wheel” format versus the “compact” format. Lastly, I set the input view of the text field to equal this new date picker that I just created.

Now I need to add a toolbar to the DatePicker and a “Done” button to the toolbar to get this result.

UIToolbar with UIBarButtonItem

Here is the code.

This basically creates the toolbar and the button and then assigns it to the input accessory view of the previously created date picker.

Now that we created that functionality, when the user taps the text field it will give us that date picker and not a keyboard. But there is a problem, it will give us a month/date/year format. I want it to give only month/year like 09/2021. So we must make a function that formats the date to a specific string(text) format. Like this example.

We create what's called a date formatted. Then set the style to be either long, medium, or short. Then as we can see the format is set to “MM/yyyy” giving us only the month and year. We then set this new format to be the text for our text field.

Finally when the app loads we call this new functionality and initializes the whole implementation of the new extension, like so.

--

--