Updating label from datepicker ios swift
This tutorial updated for X code 8.2.1 & Swift 3
Use datepicker as input to uitextfield in swift
Alright so in this video we are going to learn how to update this label from a date picker and the challenge for this video is to update label with countdown timer. If you want to watch the challenge solution then stay till end of this video. To download both the x code files. Just fill out the form below and you will receive x code file in your inbox.
If you are looking to add date picker view as input view for the text field. Then I have completely separate blog post on that. Check out the first link in the description box.
Alright so let’s just dive into it. So I am going to create new X code project. iOS single view application. I am going to call it date picker to label. And I am going to save this on the desktop. Alright so first thing you go to the main storyboard. Then you set the iPhone size to iPhone SE.
Then I am going to add a label. Simple label over here. I am going to resize it so it fits bigger date. I am going to set the alignment to centre. And I am going to add date picker and put it at the bottom of this view controller. Then I am going to create outlet.
So I am going to open assistant editor. I am going to call it date label. And right click and drag or control click and drag and I am going to create a date picker outlet. Close the assistant editor. Open view controller swift file. Now I am going to create a function over here. So its going to be func date picker value changed. And the sender is going to be UI Date Picker.
Now I am going to connect this function to this date picker. So for that in view did load I am going to say date picker dot add target. Target is self. Action is hash tag selector view controller dot date picker value changed. And for UI control events value changed.
Now I am going to write some code in here. Then I will explain to you in a minute. Alright so here is what I have written. So first I have created formatter of type date formatter. Then I set date style to medium. And time style to none. Because I just want to show the date. Then I am going to simply update the date label dot text.
To using this formatter. I am going to convert the sender dot date to string. So formatter dot string from this date. One thing I forgot to change was I am going to select the date picker. And set the mode to date. I don’t want to select the time. I just want to show the date. Alright so let’s just run this app in iPhone 5s.
Alright so as you can see when I update the date picker. Label automatically get’s updated. So now let’s talk about the challenge. So for the challenge change the date picker mode to count down timer. And now using count down timer update the label. So don’t look at the challenge solution before you try it yourself.
Make sure to try before you look at my solution. Alright so let’s look at my solution. So first I am going to close this project. And I am going to right click and duplicate. So one would be for date picker to label. And the copy is going to be count down timer. So I am going to change the mode to count down timer.
Then in the view controller I am going to write some code then I will explain it to you. Alright so here is what I have done. So first I have commented out the old date formatter. And instead of date formatter I have created new formatter called date components formatter. Then formatter dot allowed units.
So as you can see here there is only hours and minutes. So that’s why I have set allowed units to minute and hour. Then unit style I have set it to abbreviated. Then simply I am going to update date label dot text is equal to formatter using this formatter dot string from sender dot count down duration.
Now sender dot count down duration will give you time interval. And it is only available if your date picker mode is count down timer. If you date picker mode is date then you will not receive any value over here. So that only work with count down timer. So now let’s just run this app on iPhone 5s.
Alright so if I change the count down timer then automatically it get’s updated. Alright so that’s it for this video. And if you want to download both x code project files then just fill out the form below. And if you are interested in using date picker view as input view to the text field then check out the first link in the description box.
Alright like this video, leave a comment and I will see you in the next one.