close

[Swift5]時間を設定できるtimePickerを作ろう[キーボード版]

公開日:

はじめに

StoryBoardでPickerを設置すると、画面に直接置かれます。

画像のような設定でtimePickerは作成することは可能です。

しかし、このままでは少々扱いづらいですよね?
したがって、今回は、textFieldをタップするとtimePickerがキーボードとして現れるようにして作成していきます。

以下のようなものを作ります

Code

@IBOutlet weak var timeTextField: UITextField!
override func viewDidLoad() {
    super.viewDidLoad()

    timeTextField.delegate = self
    
    //キーボードをtimePickerに変更
    timeTextField.inputView = timePicker
}
    //UIDatePickerをインスタンス化
    let timePicker: UIDatePicker = {
        let dp = UIDatePicker()
        dp.datePickerMode = UIDatePicker.Mode.time
        dp.timeZone = NSTimeZone.local
        //時間をJapanese(24時間表記)に変更
        dp.locale = Locale.init(identifier: "Japanese")
        dp.addTarget(self, action: #selector(dateChange), for: .valueChanged)
        //最小単位(分)を設定
        dp.minuteInterval = 10
        return dp
    }()
    @objc func dateChange(){
        let formatter = DateFormatter()
        formatter.dateFormat = "hh:mm"
        timeTextField.text = "\(formatter.string(from: timePicker.date))"
    }

まとめ

UIDatePicker.Mode.timeでtimePickerにしています

dp.locale = Locale.init(identifier: “Japanese”)で24時間表記にしています

dp.minuteInterval = 10で最小単位を設定しています

Comment

メールアドレスが公開されることはありません。