📝

textFieldをタップして、下からPickerを表示させる方法

2022/07/04に公開

実現したいこと

タイトルの通りtextField内をタップすることで画面下からPickerを表示させたい。日付の入力を行いたいため、ここでは、「yyyy年 M月d日(EEE)」をフォーマットとしたPickerを表示させる実装を行う。

実装方法

コードは以下の通りである。

var datePicker = UIDatePicker()
let formatter = DateFormatter()

func configurePicker() {
    let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0,    width:view.frame.size.width, height: 50))
    let spaceItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
    let doneItem = UIBarButtonItem(title: "完了", style: .done, target: self, action: #selector(doneDatePicker))
    toolBar.setItems([spaceItem,doneItem], animated: true)
    formatter.dateFormat = "yyyy年 M月d日(EEE)"
    dateTextField?.text = formatter.string(from: Date())
    datePicker.datePickerMode = .date
    datePicker.preferredDatePickerStyle = .wheels
    dateTextField?.inputView = datePicker
    dateTextField?.inputAccessoryView = toolBar
}
    
@objc func doneDatePicker() {
    formatter.dateFormat = "yyyy年 M月d日(EEE)"
    dateTextField.text = formatter.string(from: datePicker.date)
    self.view.endEditing(true)
}

NG

ちなみにdoneボタン押下時のアクションについてだが、下のようにしてしまうとdoneボタンを押しても選択した日付がtextField内に反映されないので、上のようにしなければいけないみたいだ。

@objc func doneDatePicker() {
    self.view.endEditing(true)
}

補足

Pickerに対して誕生日などの過去のことを入力したい場合、Pickerの初期値をユーザーの年齢層に合わせてある程度戻しておくことが、ユーザーの使用感の向上に繋がるだろう。
その場合には、configurePicker()内の下記の部分を、

dateTextField?.text = formatter.string(from: Date())

下のように変えればよい。

dateTextField?.text = formatter.string(from: "1990年 1月1日")!

Discussion