iOS14でのUIDatePickerの挙動について(UIKit)

# iOS14でのUIDatePickerの挙動について

今回は業務でiOS14対応を任されまして、
UIDatePickerについてを改修するにあたりいろいろ調べたので、記事として残せればと思いこちらに書かせていただきました。

### 環境
macOS Catalina 10.15.6
Xcode Version 12.0
Simulator Version 12.0 iOS14 iPhone 11pro

## 何が変わった？
iOS13以下では、DatePickerには UIDatePickerStyleに

```swift
.inline
```
がありませんでしたが、iOS14で新たに追加されました。

```swift
public enum UIDatePickerStyle : Int {
    case automatic = 0
    case wheels = 1
    case compact = 2

    @available(iOS 14.0, *)
    case inline = 3
}
```
ざっと見る限り他の追加や変更などはなさそうです。

## 挙動
iOS14だと挙動がかなり変わったようなので、実際に動かして確認してみました。

### Style
⚠︎automaticは省略します

- compact　(Timeなし）

``` swift
@IBOutlet weak var datePicker: UIDatePicker!

 /// ...
datePicker.preferredDatePickerStyle = .compact
datePicker.datePickerMode = .date
```
<img width="300" alt="compact.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/c9c9d048-089f-8ad6-e344-3e41f523cb00.gif">

- compact　(Timeあり）

```swift
datePicker.preferredDatePickerStyle = .compact
datePicker.datePickerMode = .dateAndTime
```
<img width="300" alt="compact.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/7368e4ea-1e0d-c01c-6c43-acd6d6c7a213.gif">

- inline (Timeなし）

```swift
datePicker.preferredDatePickerStyle = .inline
datePicker.datePickerMode = .date
```

<img width="300" alt="inline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/4078ce3b-ab95-53d2-06fa-efc0d08a1da1.png">

- inline (Timeあり）

```swift
datePicker.preferredDatePickerStyle = .inline
datePicker.datePickerMode = .dateAndTime
```
<img width="330" alt="inline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/34b99df7-07d5-8741-899c-f510eebab6ab.png">

datePickerModeを指定することでTimeありなしができます。

```swift
datePicker.preferredDatePickerStyle = .wheels
```
<img width="330" alt="inline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/3df10f4a-ca75-7ddc-677c-64232dbd8861.png">

こちらは従来の物と変わりません。

### Mode

```swift
datePicker.datePickerMode = .countDownTimer
```
<img width="330" alt="inline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/05da3cf3-9e54-e043-61a1-472e3a3ddafa.png">

```swift
datePicker.datePickerMode = .date
```
<img width="330" alt="inline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/1b400ce3-ccb5-e9b3-9f7c-42e450017d7b.png">
タップするとカレンダーがポップアップされます

```swift
datePicker.datePickerMode = .dateAndTime
```

<img width="330" alt="inline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/194e2055-0863-86b3-ef43-da47db0df783.png">

<img width="290" alt="inline.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/0a9a7aca-48a6-075c-91e7-f394088c19ac.gif">


```swift
datePicker.datePickerMode = .time
```
<img width="290" alt="time.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/42ee14d4-108c-a981-3ec8-91beb59749a3.gif">

### TextFieldと組み合わせ

```swift
textFieldInputDatePicker.preferredDatePickerStyle = .automatic
```
<img width="290" alt="time.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/00595aaf-590c-0c10-efc1-ca6a9a262007.gif">

だいぶ見辛いですね。
バグっぽいです。

```swift
textFieldInputDatePicker.preferredDatePickerStyle = .inline
```
<img width="290" alt="time.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/6bee341f-1786-8f4c-fe05-48ecf4100984.gif">

これも潰れてしまいます。
いろいろ調べましたが、バグっぽいです。
おそらく対応してないっぽいです。
stack overflowにも外国人が質問してました。

```swift
textFieldInputDatePicker.preferredDatePickerStyle = .wheels
```
<img width="290" alt="time.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403613/223abff7-d83f-d9f5-f3c1-9cfffb4fa25b.gif">

wheelsが無難な気がします。

## まとめ

今回はiOS14で変更されたUIDatePickerについていろいろ調べでみました。
iOSで調べましたが、Mac Catalyst 14.0でも同じです。
ちなみにサイズも任意に変更できます。
Apple公式文章から
> You should integrate date pickers in your layout using Auto Layout. Although date pickers can be resized, they should be used at their intrinsic content size.

>日付ピッカーは自動レイアウトを使用してレイアウトに統合する必要があります。日付ピッカーはサイズを変更することができますが、本来のコンテンツサイズで使用する必要があります。

とのことなので、おそらくKeyboardサイズにぶち込むと圧縮されてしまうのだと思います。
今後どのようになるのかわかりませんが、組み合わせ次第では今までとは違った使い方できるな〜と思いました。
次回はSwiftUIでも試してみます。

読んでいただきましてありがとうございます。
コメント書いてくれると泣いて喜びます。


SwiftUI版も書きました。
[iOS14でのDatePickerの挙動について（SwiftUI)](https://qiita.com/kj_trsm/items/774bd24f3b2723b9f7dc)