Swift: Как я могу сделать uipickerview, который показывает дату и время

Question

Я могу показать время и изменить временные интервалы, но я не знаю, как получить временной интервал с датами, подобными фотографии ниже, если я не напишу их жестко. Стараясь избегать использования кокапод, если мне не нужно. Прямо сейчас я жестко кодирую это, но только время, я не могу получить дату, не имея еще UIPicker.

Код, относящийся к UIPickerView, о котором идет речь:

private var deliveryTimesPicker = UIPickerView()
private var deliveryTimes = ["10 AM - 11 AM", "11 AM - 12 PM", "12 PM - 1 PM", "1 PM - 2 PM", "2 PM - 3 PM", "3 PM - 4 PM", "4 PM - 5 PM", "5 PM - 6 PM", "6 PM - 7 PM", "7 PM - 8 PM", "8 PM - 9 PM", "9 PM - 10 PM", "10 PM - 11 PM"]
private var selectedDeliveryTime = 0

override func viewDidLoad() {
    ...
    self.deliveryTimeTF.text = self.deliveryTimes.first!

    self.doneToolbar.barStyle = .default
    self.doneToolbar.isTranslucent = true
    self.doneToolbar.isUserInteractionEnabled = true
    self.doneToolbar.setItems([
        UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(self.dismissKeyboard)),
        UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
        UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(self.pickerViewDone))
        ], animated: true)
    self.doneToolbar.sizeToFit()

    self.deliveryTimesPicker.delegate = self
    self.deliveryTimesPicker.dataSource = self
    self.deliveryTimesPicker.tag = 0
    self.deliveryTimesPicker.selectRow(self.selectedDeliveryTime, inComponent: 0, animated: true)
    self.deliveryTimeTF.inputView = self.deliveryTimesPicker
    self.deliveryTimeTF.inputAccessoryView = self.doneToolbar
}


@objc func pickerViewDone() {
    if self.deliveryTimeTF.isEditing {
        self.deliveryTimeTF.text = self.deliveryTimes[self.selectedDeliveryTime]
    }
    dismissKeyboard()
}

extension RequestViewController: UIPickerViewDelegate {
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        if pickerView.tag == 0 {
            self.selectedDeliveryTime = row
            return self.deliveryTimes[self.selectedDeliveryTime]
        }
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        if pickerView.tag == 0 {
             self.selectedDeliveryTime = row
        }
    }

}

Как моя:

Как я хочу, чтобы это было (цветовая тема важна не только для ее функции):

Answer 1

Я не знаю, как получить временной интервал с датами, подобными фотографии ниже, если я не укажу код жестко.

Затем вы должны прочитать о Date, DateInterval, DateComponents и т. Д. Выберите дату начала и используйте ее для создания списка пар дат начала и окончания. Вот некоторый псевдокод:

let start = Date()
var timeframes = (Date,Date)[]
for i in (0..9) {
    let t1 = Date(timeInterval: (i * secondsBetweenStarts) since:start)
    let t2 = Date(timeInterval: timeFrameDuration since:t1)
    let timeframe = (t1, t2)
    timeframes.append(timeframe)
}

Вам, конечно, нужно будет ввести значения для secondsBetweenStarts и timeFrameDuration. И существует множество других способов построения дат - например, использование компонентов даты облегчит создание периодов, которые начинаются и заканчиваются на часовых границах. В любом случае, идея состоит в том, чтобы просто создать массив времени начала и окончания. Оттуда должно быть легко сгенерировать список строк, которые описывают эти временные рамки, и вы можете использовать этот список строк в средстве выбора.

Answer 2

Всегда избегайте использования тегов для идентификации вещей, подборщик будет правильным.

При таком подходе в палитре возвращаются два элемента, из которых пользователь может выбирать, вам нужно только откорректировать первую дату в соответствии с тем временем, с которого вы хотите, чтобы она начиналась. Пользователь сможет выбрать дату доставки и время доставки, когда значение средства выбора изменится, код предоставит вам выбранную дату с диапазоном времени доставки, вы также можете использовать логику didSelectRow в вашей функции pickerViewDone с помощью средства выбора var (deliveryTimesPicker) в качестве источника.

Единственное, что я не сделал, это проверил значения опций, и вам также нужно убедиться, что сборщик имеет как минимум два компонента (picker.numberOfComponents) и правильно ли сгенерированы даты.

let deliveryDateDayFormatter = DateFormatter()
let deliveryDateTimeFormatter = DateFormatter()

let deliveryDateDays: [String] = {
    deliveryDateDayFormatter.dateFormat = "E, d MMM y"
    deliveryDateTimeFormatter.dateFormat = "h:mm a"

    var deliveryDate = Date()
    var deliveryDateDaysArray: [String] = []
    deliveryDateDaysArray.append("Today")

    for dateIndex in 0 ... 8 {
        deliveryDate = Calendar.current.date(byAdding: .day, value: dateIndex, to: deliveryDate)!

        let deliveryDateDay = deliveryDateDayFormatter.string(from: deliveryDate)

        deliveryDateDaysArray.append("\(deliveryDateDay)")
    }
    return deliveryDateDaysArray
}()


let deliveryDateTimes: [String] = {
    deliveryDateDayFormatter.dateFormat = "E, d MMM y"
    deliveryDateTimeFormatter.dateFormat = "h:mm a"

    var deliveryDate = Date()
    var deliveryDateTimesArray: [String] = []
    deliveryDateTimesArray.append("ASAP")

    for _ in 0 ... 8 {
        let deliveryDateTimeFrom = deliveryDateTimeFormatter.string(from: deliveryDate)

        deliveryDate = Calendar.current.date(byAdding: .minute, value: 30, to: deliveryDate)!

        let deliveryDateTimeTo = deliveryDateTimeFormatter.string(from: deliveryDate)

        deliveryDateTimesArray.append("\(deliveryDateTimeFrom) - \(deliveryDateTimeTo)")
    }
    return deliveryDateTimesArray
}()

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 2
}

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    var pickerComponents: [[String]] = []

    pickerComponents.append(deliveryDateDays)
    pickerComponents.append(deliveryDateTimes)

    return pickerComponents[component].count
}

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "E, d MMM y h:mm a"

    let selectedDeliveryDayIndex = pickerView.selectedRow(inComponent: 0)
    let selectedDeliveryTimeIndex = pickerView.selectedRow(inComponent: 1)

    let selectedDeliveryDay = deliveryDateDays[selectedDeliveryDayIndex]
    let selectedDeliveryTime = deliveryDateTimes[selectedDeliveryTimeIndex]

    let fullTimeRange = selectedDeliveryTime.components(separatedBy: " - ")

    let timeFrom   = fullTimeRange[0]
    let timeTo = fullTimeRange[1]

    let selectedDateStringFrom = "\(selectedDeliveryDay) \(timeFrom)"
    let selectedDateStringTo = "\(selectedDeliveryDay) \(timeTo)"

    //Delivery date from
    let selectedDateTimeFrom = dateFormatter.date(from: selectedDateStringFrom)!

    //Delivery date to
    let selectedDateTimeTo = dateFormatter.date(from: selectedDateStringTo)!

    //Delivery range
    var deliveryDate = (selectedDateTimeFrom,selectedDateTimeTo)

    print(selectedDateTimeFrom)
    print(selectedDateTimeTo)

    print(deliveryDateDays)
    print(deliveryDateTimes)
}

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    var pickerComponents: [[String]] = []

    pickerComponents.append(deliveryDateDays)
    pickerComponents.append(deliveryDateTimes)

    return pickerComponents[component][row]
}

Answer 3

На основе вашего кода вы можете использовать вид клавиатуры следующим образом:

protocol DeliveryTimeKeyboardDelegate  {
    func closeKeyboard()
    func validate(deliveryTime: (Date, Int)?)
}

class DeliveryTimeKeyboard: UIStackView {
    let datePickerView = UIDatePicker()
    let hourPickerView = UIPickerView()
    var delegate: DeliveryTimeKeyboardDelegate?
    private var deliveryTimes = ["10 AM - 11 AM", "11 AM - 12 PM", "12 PM - 1 PM", "1 PM - 2 PM", "2 PM - 3 PM", "3 PM - 4 PM", "4 PM - 5 PM", "5 PM - 6 PM", "6 PM - 7 PM", "7 PM - 8 PM", "8 PM - 9 PM", "9 PM - 10 PM", "10 PM - 11 PM"]

    var cancelButton: UIBarButtonItem?
    var clearButton: UIBarButtonItem?
    var doneButton: UIBarButtonItem?

    var deliveryTime: (Date, Int) {
        let day = datePickerView.date
        let period = hourPickerView.selectedRow(inComponent: 0)
        return (day, period)
    }

    var toolbar: UIToolbar {
        let toolBar = UIToolbar()

        toolBar.barStyle = UIBarStyle.default
        toolBar.isTranslucent = true
        toolBar.tintColor = UIColor.black
        toolBar.sizeToFit()

        let cancelButton = UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.plain, target: self, action: #selector(self.cancelAction))
        let clearButton = UIBarButtonItem(barButtonSystemItem: .trash, target: self, action: #selector(self.clearAction))
        let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.plain, target: self, action: #selector(self.doneAction))
        let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil)
        self.cancelButton = cancelButton
        self.clearButton = clearButton
        self.doneButton = doneButton

        toolBar.setItems([cancelButton, spaceButton, clearButton, spaceButton, doneButton], animated: false)
        toolBar.isUserInteractionEnabled = true
        return toolBar
    }

    convenience init() {
        self.init(frame:  CGRect(x: 0, y: 0, width: 1, height: 216))
        addArrangedSubview(datePickerView)
        addArrangedSubview(hourPickerView)
        datePickerView.datePickerMode = .date
        hourPickerView.delegate = self
        hourPickerView.dataSource = self

        axis = .horizontal
    }


    @objc func cancelAction() {
        delegate?.closeKeyboard()
    }

    @objc func clearAction() {
        delegate?.validate(deliveryTime: nil)
    }

    @objc func doneAction() {
        delegate?.validate(deliveryTime: deliveryTime)
    }
}

extension DeliveryTimeKeyboard: UIPickerViewDelegate {
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        guard row < deliveryTimes.count else { return nil }
        return deliveryTimes[row]
    }
}
extension DeliveryTimeKeyboard: UIPickerViewDataSource {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

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

class ViewController: UIViewController {

    @IBOutlet weak var inputDeliveryTime: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        let deliveryTimeKeyboard = DeliveryTimeKeyboard()
        inputDeliveryTime.inputView = deliveryTimeKeyboard
        inputDeliveryTime.inputAccessoryView = deliveryTimeKeyboard.toolbar
    }
}