[Swift 5] Select a date with the IDate Picker on iOS14

Overview

I tried to implement date selection coolly and easily with DatePicker Keep a memorandum of trial and error when the design is not good. Please feel light because it is mounted by pushing.

Finished product of this article

You can select the date from the calendar by pressing the date label part When the selection is completed, the screen closes while animating and the date is applied to the label part.

What I wanted to do

When you tap the date displayed as --- year-month-day, the calendar type date selection screen of iOS14 is displayed. The design looks like this

Before unselected After selection

Since iOS14, the behavior of DatePicker has become cooler, so I thought it would be easy to use it.

Click here for articles related to DatePicker for iOS14 https://qiita.com/kj_trsm/items/a53b0b3f7e1bc7c06106

Try & Error

1: I put the UIButton without thinking

I put a button and matched the design, but no, I couldn't call DatePicker (I thought I would use it like ColorPicker) Click here for color picker https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204184/3ebb806c-59bf-6dd3-adb9-335026e7101d.jpeg

2: Put a DatePicker

As you can see in the article I wrote above, there are some Styles It will be close to this design

Hoge.swift

datePicker.preferredDatePickerStyle = .compact
datePicker.datePickerMode = .date

It looks like this

!

The behavior is as desired, so the rest is design adjustment! It makes me feel like ... I can't change the design well

――What is the background color gray? -> datePicker.backgroundColor = .clear does not change --I want to align the characters to the left-> I can't find a setting like UILabel --- How do you display it in the format ---- year-month-day?

Solutions

`What is the background color gray? ``

Hoge.swift

datePicker.subviews[0].subviews[0].subviews[0].backgroundColor = .clear

The background color was changed with

I want to align the characters to the left -> I don't know, it was impossible

I couldn't align the characters to the left, so I decided to overlay the UI Label on the UI Label by pushing it. After stacking

Hoge.swift

datePicker.subviews.forEach({ $0.subviews.forEach({ $0.removeFromSuperview() }) })

By deleting SubViews of datePicker with, the mysterious gray background and date characters disappear. Display the UILabel characters underneath as if they were UIDatePicker characters By doing so, the UIDatePicker works when tapped, the date to be displayed is UILabel, and you can easily create the desired behavior.

--- How do you display it in the format ---- year-month-day? -> I decided to display it on UILabel, so I have not investigated it

Completed form

Overlay UILabel and UIDatePicker in Storyboard and set UILabel to --- year-month-day

HogeViewController.swift

import UIKit
import RxSwift
import RxCocoa

class HogeViewController: UIViewController {

    @IBOutlet var datePicker: UIDatePicker!
    @IBOutlet var dateLabel: UILabel!

    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        datePicker.rx.value.changed.asObservable()
            .subscribe({ event in
                if let date = event.element{
                    self.dateLabel.text = date.toDisplayString()
                }
            })
            .disposed(by: disposeBag)
    }

    override func viewDidLayoutSubviews() {
        //Make datePicker transparent
        datePicker.subviews.forEach({ $0.subviews.forEach({ $0.removeFromSuperview() }) })
    }
}

Appropriately monitor the change of the value of datePicker and let UILabel set it as a date and it will be completed When you tap it, the value is set, and the animation when closing is done by DatePicker without permission.

in conclusion

In the end, I ended up with a punch line of stacking. I'm sure there is a better solution, but I'll leave it as a memorandum.