UI Date Picker For UI Text Field With UI Tool Bar (Swift 3 + Xcode 8)

UI Date Picker For UI Text Field With UI Tool Bar In iOS

Hi, In this post, I'll show you how to use UI Date Picker for UI Text Field in iOS using Swift 3 and Xcode 8. During this, you'll also get to know about UI tab bar and how to use UITabBar to fetch the details from any picker and set them in desired textfields in your iOS application.

FYI, You can also watch this tutorial on my YouTube Channel. You may get a better representation of this swift tutorial over there. Here's the video: 

             

So, let's start and see how to do it.. :)

First of all fire up your Xcode and create a new project. Select Single View Application and click Next. 

Now, Give some name to your project and choose Swift as language, click Next.

Go to Main.storyboard and drag a textfield on the storyboard. Add some constraints on this textfield as shown in the picture below.

 After adding these constraints, our storyboard will look like this.

Now, create its outlet in viewcontroller.swift file. Give some name to this outlet, for example datePickerTF. Connect it and close the storyboard. 

Now, open viewcontroller.swift file and create a constant for our datepicker like this:

let datePicker = UIDatePicker()

Now, we need to create a function where we will setup or create our date picker.  

Under this function, first of all assign date picker to our datePickerTF. 

func createDatePicker(){

        

        //assign datepicker to our textfield

        datePickerTF.inputView = datePicker

}

Now, add this function name in viewDidLoad() method. So, our code till now will look like this:

Now, you can run this app and see the date picker populating when you click on your textfield. 

After this, we will now add a toolbar on this date picker and place a button on that toolbar so that whenever user click on that done button, it fetches the date or time from our picker and display it in our textfield. For that, here's the code:

func createDatePicker(){

        //assign datepicker to our textfield

        datePickerTF.inputView = datePicker

        

        //create a toolbar

        let toolbar = UIToolbar()

        toolbar.sizeToFit()

        

        //add a done button on this toolbar

        let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: #selector(doneClicked))

        

        toolbar.setItems([doneButton], animated: true)

        

        datePickerTF.inputAccessoryView = toolbar

    }

    

    func doneClicked(){

        

        datePickerTF.text = "\(datePicker.date)"

        self.view.endEditing(true)

    }

When you run this code, our app will look like this:

But as you may notice, we're getting both date and time in our UIDatePicker view, so we'll now format the display of our picker view and will display only the date here. (You can also choose time only depending upon your requirements.) To do this, just add one more line to your createDatePicker() function:

     //format for datepicker display

        datePicker.datePickerMode = .date

And also, we will format the display of date and time in our textfield. For that just use this code in your doneClicked() function:

func doneClicked(){

        //format for displaying the date in our textfield

        let dateFormatter = DateFormatter()

        dateFormatter.dateStyle = .medium

        dateFormatter.timeStyle = .none

        

        datePickerTF.text = dateFormatter.string(from: datePicker.date)

        self.view.endEditing(true)

    }

Now, run the app again and you'll get this screen for your date picker application:

Looking nice, right? So, that's all about this post. Here's the full code for your reference:

_____________________________________________________________________________

import UIKit

class ViewController: UIViewController {

    @IBOutlet var datePickerTF: UITextField!

    

    let datePicker = UIDatePicker()

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        createDatePicker()

    }

    func createDatePicker(){

        //format for datepicker display

        datePicker.datePickerMode = .date

        

        //assign datepicker to our textfield

        datePickerTF.inputView = datePicker

        

        //create a toolbar

        let toolbar = UIToolbar()

        toolbar.sizeToFit()

        

        //add a done button on this toolbar

        let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: #selector(doneClicked))

        

        toolbar.setItems([doneButton], animated: true)

        

        datePickerTF.inputAccessoryView = toolbar

    }

    func doneClicked(){

        //format for displaying the date in our textfield

        let dateFormatter = DateFormatter()

        dateFormatter.dateStyle = .medium

        dateFormatter.timeStyle = .none

        

        datePickerTF.text = dateFormatter.string(from: datePicker.date)

        self.view.endEditing(true)

    }

}

_________________________________________________________________________________

I hope this post may help someone, somehow! :)

If you've any doubts or need any further help, do message me in comments section below and I'll try to respond you as soon as possible. 

Thanks for your time! Keep Coding..