[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.

Recommended Posts

[Swift 5] Select a date with the IDate Picker on iOS14
Come out with a suffix on the method
Come out with a suffix on the method 2
How to create a form to select a date from the calendar
Logic to draw a circle with ASCII art on the console
Run a simple model made with Keras on iOS using CoreML
[Android] Get the date on Monday
Make a Christmas tree with swift
Programming with ruby (on the way)
Using a local network on iOS 14
[iOS] I tried to make a processing application like Instagram with Swift
Create a jar file with the command
A note on the libGDX Utils class
[Swift5] Round the acquired image with UIImagePicker
Run a DMN with the Camunda DMN Engine
A rudimentary note on the Fibonacci sequence
[Java] Get the date with the LocalDateTime class
How to get the ID of a user authenticated with Firebase in Swift
[Rails] When transitioning to a page with link_to, move to the specified location on the page
Hello World, a cross-platform GUI app with Groovy running on the Java platform
A quick note on using jshell with the official Docker image of the JDK