UIDatePicker is nice UI component which is used for visually date manipulation in application. Like UIPickerView component explained in previous tutorial Using UIPickerView component into your iOS App this component is return selected date by giving us possibility for selecting. We can find this component implemented in applications where we need to select date of birth, expiration date etc.

In this tutorial we will develop very basic example just to have an idea how this component can be implemented.

Like in previous tutorials we are starting from beginning.

 

We are starting with creating the Single View Application in our Xcode IDE.

Screen Shot 2016-07-11 at 11.09.50

 

Next we are setting Product Name, Organisation Name, Identifier, Language ( Objective-C or Swift ) and Device.

Screen Shot 2016-08-08 at 21.00.15

 

Your project should look like this after finishing previous step:

Screen Shot 2016-08-08 at 21.00.50

 

Next we are setting the size of the view and we are choosing compact, portrait for all iPhones.

Screen Shot 2016-08-08 at 21.01.12

 

We are dropping from the Object Library one UIDatePicker and one UILabel components.

Screen Shot 2016-08-08 at 21.03.59

 

Next from the InterfaceBuilder in Assistant Editor we are creating IBOutlet for label which will be used for displaying selected value in our example.

Screen Shot 2016-08-08 at 21.12.25 Screen Shot 2016-08-08 at 21.13.01

Screen Shot 2016-08-08 at 21.13.49

With dragging from the InterfaceBuilder to Assistant Editor we are making one action method which will be executed by changing the value on our UIDatePicker component with picking the date.

Screen Shot 2016-08-08 at 21.19.18

Screen Shot 2016-08-08 at 21.20.45

After that in this method we are writing some basic date to string conversation logic so can we display returned date object from UIDatePicker component as string in our label.

Screen Shot 2016-08-08 at 22.32.35

When we compile and run the application in the simulator we can try selecting different dates in our component so we can see if everything we have implemented correctly how its working.

Screen Shot 2016-08-08 at 22.33.49

 

Complete source code can be found on my GitHub ready for testing.

Print Friendly, PDF & Email

Leave a Comment

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