🔨

Swift - Pickerを使って生年月日入力フォームを作る方法

2022/05/13に公開約2,500字

Pickerを使って生年月日を入力できるTextFieldを実装します。

完成イメージ

完成コード

ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var textField: UITextField!
    var datePicker = UIDatePicker()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))
        let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))
        toolbar.setItems([spacelItem, doneItem], animated: true)
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy年 M月d日"
        datePicker.date = formatter.date(from: "2000年 1月1日")!
        datePicker.datePickerMode = .date
        datePicker.preferredDatePickerStyle = .wheels
        textField.inputView = datePicker
        textField.inputAccessoryView = toolbar
    }
    
    @objc func done() {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy年 M月d日"
        textField.text = formatter.string(from: datePicker.date)
        self.view.endEditing(true)
    }
}

ポイント

Pickerの生成

var datePicker = UIDatePicker()

これが下から出てくるPickerになります。

Pickerのdoneボタン

let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))
let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))
toolbar.setItems([spacelItem, doneItem], animated: true)

この箇所はPickerの「done」ボタンになります。
「spacelItem」はdoneボタンを右に寄せるためのもので、これを取り除いても実装できます。

ボタンのアクション

@objc func done() {
    let formatter = DateFormatter()
    formatter.dateFormat = "yyyy年 M月d日"
    textField.text = formatter.string(from: datePicker.date)
    self.view.endEditing(true)
}

ここが「done」ボタンが押されたときの処理です。
formatterで文字列を整えて、TextFieldに代入しています。

Pickerのカスタマイズ

datePicker.datePickerMode = .date
datePicker.preferredDatePickerStyle = .wheels

ここでPickerのスタイルを変更しています。
datePickerModeには時間まで選択できるものもあります。

初期値の設定

formatter.dateFormat = "yyyy年 M月d日"
datePicker.date = formatter.date(from: "2000年 1月1日")!

ここでPickerの初期値を変更しています。
ここを記述しないと現在日時が初期値になるので、生年月日を入力させたいときはある程度過去の時間に設定しておいた方が良いでしょう。

参考記事

https://www.youtube.com/watch?v=fhRJ5HQjBIE&t=143s

Discussion

ログインするとコメントできます