UITextField에서 클릭시 DatePicker 나오게 구현하기

오늘은 TextField 클릭시 밑에서 DatePicker이 나오게 구현해 보겠습니다.

이런식으로 나오게 하였습니다.

• Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

extension UITextField {               func setDatePicker(target: Any, selector: Selector) {         let SCwidth = self.bounds.width         let datePicker = UIDatePicker(frame: CGRect(x: 0, y: 0, width: SCwidth, height: 216))         datePicker.datePickerMode = .date         self.inputView = datePicker                  let toolBar = UIToolbar(frame: CGRect(x: 0.0, y: 0.0, width: SCwidth, height: 44.0))         let flexible = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)         let cancel = UIBarButtonItem(title: "Cancel", style: .plain, target: nil, action: #selector(tapCancel))         let barButton = UIBarButtonItem(title: "Done", style: .plain, target: target, action: selector)         toolBar.setItems([cancel, flexible, barButton], animated: false)         self.inputAccessoryView = toolBar              }     @objc func tapCancel() {         self.resignFirstResponder()     } }   Colored by Color Scripter

cs

저는 UITextField에서 extension하며 메소드로 구현했습니다. 전체를 코드로 구현하였고 먼저 UIDatePicker을 생서해줍니다. 넓이는 화면 넓이와 같게 해주었고 높이는 각자 원하는 설정으로 하시면 됩니다. 그리고 datePicker설정을 해주시고 inputview로 설정해주시면 됩니다. 그리고 datePicker위에 Toolbar을 만들어주어 cancel버튼과 done버튼을 구현해줍니다. 그리고 cancel버튼의 action함수인 tapCancel()함수를 구현해서 터치할경우 내려가게 설정해줍니다, _이 resignFirstResponder()함수는 터치할경우 화면을 내려주는 기능을 하는 함수입니다. 그리고 inputAccessoryView로 설정해주면 위와 같이 만들어집니다. _