Add toolbar to UIDatePicker or UIPickerView Swift
Tell us how can we improve this post?
Above video is updated for X Code 8.2.1 & Swift 3
Hide Cursor and disable cut/paste for UITextField in Swift
So in this video we are going to learn how to add a toolbar on top of the date picker view with default button and done button. So the challenge for this video is to add toolbar on top of the picker view for done option and default option. If you want to download project file for both these projects then fill out the form below and you will receive the X code file in your inbox.
If you are looking to remove cursor or cut paste option for datepicker textfield that way you can only insert date in it and you cannot insert any foreign objects into this textfield. Then I have totally separate blog post on it. Check out the first link in the description box. This works with pickerview textfield also.
So let’s just dive right into it. I am going to create new X code project. iOS single view application next. I am going to call it toolbar. Then click next. And save this on desktop. Alright so first thing I am going to do is go to the main storyboard. Change the size to iPhone SE. Then I am going to add a textfield.
Somewhere around here. Make it little bigger. And set it here. Then I am going to add a button. Somewhere around here. The position is not specific. I am going to make it little bigger. And then I am going to change the button’s background color to something extremely bright. So when our toolbar appears toolbar is translucent toolbar.
So we should be able to see little bit of this button. I am not going to add any action to this button. The function of this button is so that we can see the background through the toolbar. Alright so let’s open the assistant editor. I am going to create an outlet for this textfield. I am going to call it date textfield.
Now I am going to close the assistant editor open the view controller swift file. And I am going to write a lot of code in here. And then I will explain it to you. Alright so let me explain what I have written here so far. But to explain that let me run this app in iPhone 5s. And then I will explain the code.
Alright so you can see if I click on the textfield the date picker appears. And its translucent toolbar with today button and done button. Alright so while its running let me explain the code. So first I have created standard code for using datepicker view as input view to the text field. Create a date picker view & set its date picker mode to date & add the target.
And if the date picker is updated then automatically the textfield text is updated. Now let’s just focus on building the toolbar. Ok because that’s what this video is about. So first I have created a toolbar instance of an UIToolBar. That takes in frame and the frame co-ordinates are x is zero and y is zero.
And the width is self dot view dot frame dot size dot width. That means the width of this toolbar is the full width of the view. And the height is 40. Now I have hardcoded this value 40. So no matter the device maybe iPhone 5s to iPad Pro. The toolbar size will always be 40. You may want to test it for different devices.
And if you don’t like 40 then you can add or reduce. You can just hardcode the value whatever you want. Then I have set toolbar dot bar style is black translucent. And that is why you can see the green box button behind. Because this is a black translucent toolbar. I prefer translucent because I like this style.
Then toolbar dot tint color is UIColor white. Now the color of the button is basically the tint color. And in the black background white color looks very prominently. So I am setting the tint color to white. Then I have created today button which is an instance of bar button item. The title for the button is today.
The style is bar button style plain. The target is self. And the action is view controller today pressed. So lets open. Ok so today pressed is the function that is triggered when you press the today button. So in that function I am basically. I got the formatter. Date style to medium & time style to none. And so today’s date NSDate.
I am just updating the textfield. with today’s date. And then I am going to close the textfield using date textfield dot resign first responder. So that’s the today button. Then the second one is done button. So for done button I am using UIBarButtonItem instance. And I am using bar button system item. I am using system item done.
Or you can the same method and setup the title to done. But I am using the system button for done. Target is self. And the action is view controller done pressed. So when the done button is pressed again sender is UIBarButtonItem. I am simply executing date textfield dot resign first responder. I just want to stop editing the textfield.
So that’s what I am doing with the done button. Then flex button. So flex button is basically between this button and this label we are going to add flexible space. So I created UIBarButtonItem. And the UIBarButtonSystemItem dot flexible space. Target is self and action is nil. Then I have created an instance of UILabel.
And I have created UILabel with the frame x is zero, y is zero. Now width Now labels maximum width I want one third of the whole bar. So I am getting the whole width. Self dot view dot frame dot size dot width the whole width I divide it by three. Because the maximum width of the label I want it third of the whole width.
And the height is 40. Which we already set here. Then label dot font. I am using system font. Whatever the system font is. Size 14. Text color is yellow. I would recommend you choose a bright color. And choose different color than white color because white color is already being used for the button.
So to differentiate between the button and a label. I am using Yellow. And yellow looks better in black background. If you choose a darker color then label may not be visible. So choose something light like yellow. Label dot text alignment is center. If the alignment is either left or right then this toolbar will not look balanced.
It will look left sided or right sided. So design wise I wanted it to be center alignment. Then the text I have set to select date. Then I have created button with a custom view. So label button is instance of UIBarButtonItem. So with custom view I am adding this UILabel. Then for this toolbar that we created I am setting items.
So the order is first is today button then there is flex space/flex button. then there is a label , then there is another flex space and at the end there is a done button. And animated of course true. And then date textfield dot input accessory view I have set it to toolbar. And when I press on today is updated todays date.
And when I press on done this disappears. So that’s how you add toolbar on top of the date picker. And the challenge is to add toolbar on top of the picker view. So try this challenge on your own before you look at my solution. I will give you a second to try this challenge on your own. Alright so let’s look at my solution.
So if you look at my solution. It is exactly the same as date picker. So I have created the toolbar, bar style translucent, tint color white, today button, Ok button, flex space, label, font. So I have done exact same steps. Only the difference is when you press the best pressed. I update the textfield with a default value.
And of course close the textfield. And if done button is pressed then I stop editing the textfield. So otherwise the code is exactly the same. There is absolutely no difference. And if I run this in iPhone 5s. Now if I press on the text field. Then you see the default option and a done button.
So if you want to download both the X code project files then fill out the form below and you will receive both the file in your inbox. So if you want to remove the cursor from the textfield and you want to remove the cut paste option from the textfield. That way for date picker textfield you cannot add foreign objects into this textfield.
Then I have totally separate blog post on it. Check out the first link in the description box. So that’s it for this video. Like this video, leave a comment. And I will see you in the next one.