📝
textFieldをタップして、下からPickerを表示させる方法
実現したいこと
タイトルの通り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