スクリーンショット_2018-08-27_22

Swift4年と月だけにカスタマイズDataPicker

業務で、年と月だけのDataPickerを作る必要があり、色々と調べた結果、
@ysk_1031様がありがたい情報を描き起こしてくれていました、本当に感謝ですorz自分が必要だった処理を加えて、Swift4で書いていこうと思います。詳しくは参考リンクとして貼っておきますので、そちらから確認いただけたらと思います^ ^

まずは実装イメージから!

下記で必要なデーターを定義していきます。

    var toolBar:UIToolbar!
    let years = (1900...3118).map { $0 }
    let months = (1...12).map { $0 }
 func setDate() {
        let pickerView = UIPickerView()
        pickerView.delegate = self
        
        yearMonthTextView.inputView = pickerView
        
        //datepicker上のtoolbarのdoneボタン
        toolBar = UIToolbar()
        toolBar.sizeToFit()
        let toolBarBtn = UIBarButtonItem(title: "決定", style: .plain, target: self, action: #selector(doneBtn))
        toolBar.items = [toolBarBtn]
        yearMonthTextView.inputAccessoryView = toolBar
        let datePickerView:UIDatePicker = UIDatePicker()
        datePickerView.datePickerMode = UIDatePickerMode.date
        datePickerView.locale = Locale(identifier: "ja_JP")
        // 年 初期値を設定
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat  = "yyyy"
        yearLabel.text = "\(dateFormatter.string(from: datePickerView.date))年"

        // 月 初期値を設定
        dateFormatter.dateFormat = "M"
        monthLabel.text = "\(dateFormatter.string(from: datePickerView.date))月"
        
        
        // 現在の年と同じようにする
        for (i,value) in years.enumerated() {
            if yearLabel.text == "\(value)年" {
                pickerView.selectRow(i, inComponent: 0, animated: false)
            }
        }
        // 現在の月と同じようにする
        for (i,value) in months.enumerated() {
            if monthLabel.text == "\(value)月" {
                pickerView.selectRow(i, inComponent: 1, animated: false)
            }
        }
    }

上記のコードで、各種データーピッカーなどの準備をしてあげています。

  // 現在の年と同じようにする
        for (i,value) in years.enumerated() {
            if yearLabel.text == "\(value)年" {
                pickerView.selectRow(i, inComponent: 0, animated: false)
            }
        }

この上記のコードですが、if文でラベルのテキストと配列として格納をしている、値を比較してもし一致すればその格納されている添字を元にピッカービューの初期値を決めてあげているものになります。もしこれがなければ、例えば現在2018年8月ですが、添字0番の値が最初スクロール位置(例では1900年1月)となってしまいますので、こちらで決めてあげています。

先ほどキーボードに追加をしたdoneボタンを押した時の処理です。

//toolbarのdoneボタン
    @objc func doneBtn(){
        yearMonthTextView.resignFirstResponder()
    }

必要な処理が整いましたので、Delegateメソッドを定義していきます。おそらく現段階ではエラーとなってしまうと思います!

extension ViewController: UIPickerViewDataSource,UIPickerViewDelegate {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 2
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        if component == 0 {
            return years.count
        } else if component == 1 {
            return months.count
        } else {
            return 0
        }
    }
    
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        if component == 0 {
            return "\(years[row])年"
        } else if component == 1 {
            return "\(months[row])月"
        } else {
            return nil
        }
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        
        let year = years[pickerView.selectedRow(inComponent: 0)]
        let month = months[pickerView.selectedRow(inComponent: 1)]
        yearLabel.text = "\(year)年"
        monthLabel.text = "\(month)月"
        
    }
}

これで、完成です!


参考)


この記事が気に入ったらサポートをしてみませんか?