How to customise UIDatePicker to achieve the following output?

Question

This is the picker that contains the day, date, and month as input, also, in one scroll, is there any way to achieve this kind of functionality from picker/datepicker in iOS?

Answer 1

Do below steps :-
1. You have to change date with applying DateFormatter().
2. Save all dates (string format) in your NSArray or NSMutableArray for your UIPickerView Datasource method.
3. Then call UIPickerView Datasource and Delegate methods for fetch your result.

For date conversion you can apply below code.

let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "EEE dd MMM"
let currentDate = NSDate()

let convertedDateString = dateFormatter.string(from:currentDate as Date)
print("convertedDate: ", convertedDateString)

Answer 2

For such a case, you should add it as a UIPickerView. Assuming that the issue would be: How to fill its values by the days of the current month? to make it more clear, I would mention it as steps:

• You should get the current month start and end dates. You could find how to achieve it by checking this answer.

• You will need to get all days -with the desired format- between the start and the end dates. You could find how to achieve it by checking this answer.

• After getting all days in the current month, you could fill the date picker datasource method easily.

Implementation:

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {

    var currentMonthDays: [String] {
        var array = [String]()

        var date = Date().startOfMonth() // first date
        let endDate = Date().endOfMonth()

        let fmt = DateFormatter()
        //fmt.dateFormat = "dd/MM/yyyy"
        fmt.dateFormat = "EEE dd MMM"

        while date <= endDate {
            date = Calendar.current.date(byAdding: .day, value: 1, to: date)!

            array.append(fmt.string(from: date))
        }

        return array
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        print(currentMonthDays)
    }

    // Picker View Data Soruce & delegate Methods

    // REMARK: make sure to connect pickerview datasource/delegate to your view controller,
    // I did it from the storyboard
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return currentMonthDays.count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return currentMonthDays[row]
    }
}


// Step #1:
extension Date {
    func startOfMonth() -> Date {
        return Calendar.current.date(from: Calendar.current.dateComponents([.year, .month], from: Calendar.current.startOfDay(for: self)))!
    }

    func endOfMonth() -> Date {
        return Calendar.current.date(byAdding: DateComponents(month: 1, day: -1), to: self.startOfMonth())!
    }
}