Sunday, 5 February 2017

How to create UIDatePicker in swift - Tutorial




UIDatePicker Swift3 Tutorial

Introduction to UIDatePicker in Swift

In this tutorial we are going to learn about UIDatePickerView to select a date in swift i.e how to create and user UIDatePickerView in swift to allow user to select a date from the datepicker  in iOS app development.
                              UIDatepicker is the control provided by UIKit framework packaged with xcode IDE. It allows user to pick date from the spinning wheel that act same as drop down option in web. You can use UIDatePicker in your app where you want to allow user to enter or input
  • a Date
  • both Date and Time
  • only Time
  • Countdown timer

Steps to create UIDatePicker in swift

Step 1: Create a new xcode project and name it UIDatePicker-Swift, if you are not familiar with creating xcode project you can check here

Step 2: Open Main.storyboard and drag UIDatePicker on to the view.

UIDatePicker-added-to-the-view
UIDatePicker added to the view
Step 3: Add constraint to UIDatePicker. Shown in the image below

Add-constraints-to-UIDatePicker
Add constraints to UIDatePicker

Step 4: Open ViewController.swift and create an IBOutlet to UIDatePicker

  
  @IBOutlet weak var datePicker: UIDatePicker!


Step 5: Open Main.storyboard and connect our IBOutlet created in step 3 to the UIDatePicker placed on the view as shown in the image below

Connecting-IBOutlet-to-UIDatePicker
Connecting IBOutlet to UIDatePicker
Step 6: Set current date as our UIDatePicker date, so that when screen launches/shown to the user it display current date as selected date


  override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.datePicker.date = NSDate.init(timeIntervalSinceNow: 0) as Date
 }

Step 7: Run your code, you will see UIDatePicker showing current date as selected date.

Get selected date from UIDatePicker

Till now you created UIDatePicker successfully, now the question is  how can we get date selected by user. For this we can do two things

  • will add a button and add IBAction to it so that when user tap on button we will get our selected date. 
  • Add our IBAction to UIDatePicker and assign it to ValueChanged event, so that whenever UIDatePicker date changed it notifies us
Step 8: Open Main.storyboard and add UIButton to it. Add constraint to it as shown in below image

Adding constraints to UIButton
Adding constraints to UIButton
Step 9: Open ViewController.swift and create our IBActions, one for 
  • Button Tap event 
  • UIDatePicker value change event
Below is the code that solve our purpose in both ways


   @IBAction func doneWithDateSelection(_ sender :AnyObject) {
        print("Date Selected through button  == ", datePicker.date)
    }
    
    @IBAction func pickerDateSelectionChanged(_ sender :AnyObject) {
        print("Date Selected via UIDatePicker value change == ", datePicker.date)
    }


Step 10:  Open Main.storyboard and add IBaction to UIButton and UIDatePicker as shown below

Connecting IBAction to UIButton
Connecting IBAction to UIButton
Connecting IBAction to UIDatePicker
Connecting IBAction to UIDatePicker
Step 11: Run your app and you will see date in console when you tap on Button or change UIDatePicker value.

Step 12: If you see your date on console, you will get time also. In order to get only you have to get date with dateformatter class given by xcode. Below is the complete code that

Complete code which print date only when user tap on button or change date picker value

Complete Code


 //
//  ViewController.swift
//  UIDatePicker-Swift
//
//  Created by Aman Aggarwal on 12/21/16.
//  Copyright © 2016 iostutorialjunction. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var datePicker: UIDatePicker!
    var dateFormatter = DateFormatter()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.datePicker.date = NSDate.init(timeIntervalSinceNow: 0) as Date
        dateFormatter.dateFormat = "MM/dd/yyyy"
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func doneWithDateSelection(_ sender :AnyObject) {
        
        print("Date Selected through button  == ", dateFormatter.string(from: datePicker.date))
    }

    @IBAction func pickerDateSelectionChanged(_ sender :AnyObject) {
        print("Date Selected via UIDatePicker value change== ", dateFormatter.string(from: datePicker.date))
    }
    
}

Where to go from here

In this tutorial you learned about UIDatePicker in swift and how to print/select date form UIDatePicker without time using dateformatter. You can get the whole code sample from here .
If you have any concerns than you can comment here. Happy Coding :)






No comments:
Write comments