TableViewCell クリックで別ファイルで指定している DatePicker を立ち上げたい

Question

初めて利用させていただきます。
2ヶ月前からネットの情報を頼りにSwiftを触りはじめました。
質問に至らぬ点があるかもしれませんが、どうぞよろしくお願いいたします。

前提・実現したいこと

一番上の「日時」のTableViewCellをクリックしたら、別ファイルで指定しているDatePickerを立ち上げて日時を入力し、セルに表示したい。
現在はTextFieldに出力していますが、枠線が気になるのでこれを非表示にするか、セルに直接表示する方法があれば合わせて教えていただきたいです。

DatePickerはこちらのサイトを参考に記述しました。

発生している問題

現在はTableViewCell内のTextFieldをクリックするとDatePickerが立ち上がり、日時を指定してDoneでTextFieldに出力されます。

ViewControllerとは別のTableViewCellのファイルでDatePickerを指定しており、どのようなコードを書けばいいのかわからなくなってしまいました。
そもそも、コードのどの部分がDatePickerの立ち上がりを指定しているのかも把握できておりません。

該当のソースコード

AddPlanViewController.Swift

import UIKit

class AddPlanViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    // キャンセルボタン
    @IBAction func cancelButton(_ sender: Any) {
        self.dismiss(animated: true, completion: nil)
    }

    var planItem = ["日時","参加者","場所","共有開始","通知"]

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // タイトル文字列の設定
        self.navigationItem.title = "予定を追加"
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath:IndexPath) -> UITableViewCell {
        var cell: UITableViewCell
        if indexPath.row == 0 {
            cell = tableView.dequeueReusableCell(withIdentifier: "DateAndTimeCell", for:indexPath) as UITableViewCell

        } else {
            cell = tableView.dequeueReusableCell(withIdentifier: "ParticipantCell", for:indexPath) as UITableViewCell
        }
        cell.textLabel?.text = planItem[indexPath.row]
        return cell
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section:Int) -> Int {
        return planItem.count
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("(indexPath.row)番セルをタップ")
        tableView.deselectRow(at: indexPath, animated: true) // セルの選択を解除
        
        if indexPath.row == 0 {
            // 0番セル（日時）クリックで DatePicker を表示したい
        }
    }
}

DateAndTimeCell.Swift

こちらでセル内のTextFieldを紐付け、Datepickerの指定もしています。

import UIKit

class DateAndTimeCell: UITableViewCell {
    @IBOutlet weak var displayDateAndTime: UITextField!
    var datePicker: UIDatePicker = UIDatePicker()
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        // ピッカー設定
        datePicker.datePickerMode = UIDatePicker.Mode.dateAndTime
        datePicker.timeZone = NSTimeZone.local
        datePicker.locale = Locale.current
        displayDateAndTime.inputView = datePicker
            
        // 決定バーの生成
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 40))
        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)

        // インプットビュー設定(紐づいているUITextfieldへ代入)
        displayDateAndTime.inputView = datePicker
        displayDateAndTime.inputAccessoryView = toolbar
    }
    
    @objc func done() {
        displayDateAndTime.endEditing(true)
        
        // 日付のフォーマット
        let formatter = DateFormatter()
        
        //日本仕様で日付の出力
        formatter.timeStyle = .short
        formatter.dateStyle = .full
        formatter.locale = Locale(identifier: "ja_JP")

        //datePickerで指定した日付が表示される
        displayDateAndTime.text = "(formatter.string(from: datePicker.date))"
    }
    
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

試したこと

didSelectRowAt部分をいじってみましたが、何をすればいいかわからず断念しました。

補足情報（FW/ツールのバージョンなど）

Xcode Version 10.1

Answer 1

0番セルをクリックされた場合の条件分けまでは済んでいるので、そこで該当するセルに乗せられているTextView を firstResponder にすれば、セルをクリックした場合も TextField で入力できるようになります。

• becomeFirstResponder()

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("(indexPath.row)番セルをタップ")
        tableView.deselectRow(at: indexPath, animated: true) // セルの選択を解除

        if indexPath.row == 0 {
            // 0番セル（日時）クリックで DatePicker を表示したい
            if let cell = tableView.cellForRow(at: indexPath) as? DateAndTimeCell{
                cell.displayDateAndTime.becomeFirstResponder()
            }
        } else {
            // 0番セル以外をクリックしたらキーボードを閉じる
            view.endEditing(true)
        }
    }

ただし、tableView(_:didSelectRowAt:)が呼ばれた段階では、indexPathは分かっても具体的なインスタンスはわからないので、cellForRow(at:)を使って具体的なインスタンスを調べます。

そのとき、クラスDateAndTimeCellでダウンキャストを行い、成功したら具体的にテキストフィールドに該当するプロパティ（displayDateAndTime）のメソッド（becomeFirstResponder()）を呼び出しています。

また、0番セル以外がクリックした場合には、キーボードを閉じるような処理を追加してみました。この処理は他のセルでも入力処理を行うようになった場合には記述も変わってくると思いますので、必要に応じて調整していただけますでしょうか。

また、TextFiledの枠線を消したい場合には

class DateAndTimeCell: UITableViewCell {
    @IBOutlet weak var displayDateAndTime: UITextField!
    // 中略

    override func awakeFromNib() {
        // 中略
        
        // MARK:
        displayDateAndTime.borderStyle = .none
    }

という具合に該当するプロパティに.noneを指定するか、あるいはStoryBoard上のAttributes Inspectorにも同じような設定項目がありますから、そちらで設定すると消すことが可能です。

そもそも、コードのどの部分がDatePickerの立ち上がりを指定しているのかも把握できておりません。

       // インプットビュー設定(紐づいているUITextfieldへ代入)
        displayDateAndTime.inputView = datePicker

この部分ですね。

Comments

[unagimochimochi]

ご回答ありがとうございます。

無事、セルをクリックしたらDatePickerが立ち上がるようになりました。
詳しい解説までしてくださり助かりました。
TextFieldの枠線はStoryBoardの設定項目でも消せたのですね。確認すべきでした。

本当にありがとうございました！