Search code examples
iosswiftuipickerviewuidatepicker

Synchronise DatePicker with an UIPickerView and use a Label to display the value selected from any of them


I need a little bit help because I'm stuck with my homework. I need to synchronise a PickerView with a DatePicker and also to show in a Label the value selected. When I change values on DatePicker are not reflected on my PickerView. Can anyone figure out why ? Here is a picture to show you where I am for the moment and also my code:

Screenshot import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var pickerView: UIPickerView!
    @IBOutlet weak var datePicker: UIDatePicker!
    @IBOutlet weak var labelDate: UILabel!

    var days = [String]()
    var months = Array<String>()
    var years = [String]()

    override func viewDidLoad() {
        super.viewDidLoad()

        let formatter = DateFormatter()
        formatter.dateFormat = "dd/MMM/yyyy"
        labelDate.text = formatter.string(from: datePicker.date)

        // Arrays for Picker View
        days = Array(1...31).map({ String($0) })
        months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
        years = Array(2000...2030).map({ String($0) })
    }

    // We set number of components in the Picker View (in our case 3 columns)
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 3
    }

    // Get the number of elements for each component (each column)
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

        switch(component) {
        case 0: return months.count
        case 1: return days.count
        case 2: return years.count
        default: return 0
        }
    }

    // Our ViewController will adopt the protocol "UIPickerViewDelegate" and after we display data for each element on a new Row
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {

        switch(component) {
        case 0: return months[row]
        case 1: return days[row]
        case 2: return years[row]
        default: return nil
        }
    }

      // Select a date from PickerView and show it in the DatePicker and also in the Label
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

        let monthSelected = months[pickerView.selectedRow(inComponent: 0)]
        let daySelected = days[pickerView.selectedRow(inComponent: 1)]
        let yearSelected = years[pickerView.selectedRow(inComponent: 2)]
        let dataString = "\(daySelected)/" + "\(monthSelected)/" + "\(yearSelected)"
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "d/MMM/yyyy"
        let date = dateFormatter.date(from: dataString)
        datePicker.setDate(date!, animated: true)
        labelDate.text = "\(daySelected)/" + "\(monthSelected)/" + "\(yearSelected)"


        // Here I need the logic for February to have 28 days always or if I know
        // how to do, then to implement some Logic for Leap Years

        /*

         if(yearSelected % 4 == 0 && (yearSelected % 100 != 0) || (yearSelected % 400 == 0)){
         february will return 29 days
         } else{
         february will return 28 days }
         }

         */


    }

    // Select a date from DatePicker and show it in the UIPickerView and also in the Label
    @IBAction func dateSelectedFromDatePicker(_ sender: UIDatePicker) {

        let calendar = Calendar.current
        let components = calendar.dateComponents([.day,.month,.year], from: self.datePicker.date)
        let day = components.day
        let month = components.month
        let year = components.year

       pickerView.selectRow(month!-1, inComponent: 0, animated: true)
       pickerView.selectRow(day!-1, inComponent: 1, animated: true)
       pickerView.selectRow(year!-1, inComponent: 2, animated: true)

        let formatter = DateFormatter()
        formatter.dateFormat = "d/MMM/yyyy"
        labelDate.text = formatter.string(from: datePicker.date)

    }
}

Thank you so much in advance !!!


Solution

  • component 0 --> months

    component 1 --> days

    component 2 --> years

    Change This code , make sure that day!-1 , month!-1 , year!-1 represent correct index in arrays days, months,years

    Here is code that should change:

        pickerView.selectRow(day!-1, inComponent: 1, animated: true)
        pickerView.selectRow(month!-1, inComponent: 0, animated: true)
        pickerView.selectRow(year!-1, inComponent: 2, animated: true)