vue-scroll-picker@vue2

ios 스타일의 timepicker를 알아보던 중 발견한 라이브러리입니다.

단일 scrollpicker를 여러개 이어 붙여서 하나의 timepicker를 만들었습니다.

 

라이브러리 설치

npm i --save vue-scroll-picker@vue2

 

실제 사용 코드

<div id="commonTimeScrollPicker">
    <ScrollPicker v-model="current.ampm" :options="ampm" />
    <ScrollPicker v-model="current.hours" :options="computedHours" />
    <ScrollPicker v-model="current.minutes" :options="computedMinutes" />
</div>

---

import { ScrollPicker } from 'vue-scroll-picker'
import 'vue-scroll-picker/dist/style.css'
const AMPM = [
  { value: '오전', name: '오전' },
  { value: '오후', name: '오후' }
]
export default {
  name: 'CommonTimeScrollPicker',
  components: {
    ScrollPicker
  },
  data() {
    return {
      ampm: AMPM,
      current: {
        ampm: '',
        hours: '',
        minutes: ''
      },
      time: {
        hour: '',
        minute: ''
      }
    }
  },
  watch: {
    'current.ampm': {
      deep: true,
      handler() {
        this.setHour()
      }
    },
    'current.hours': {
      deep: true,
      handler() {
        this.setHour()
      }
    },
    'current.minutes': {
      deep: true,
      handler() {
        this.time.minute = this.current.minutes
      }
    }
  },
  computed: {
    computedHours() {
      return this.initData(1, 12)
    },
    computedMinutes() {
      return this.initData(0, 59)
    }
  },
  methods: {
    initData(start, end) {
      let res = []
      for (let i = start; i <= end; i++) {
        res.push({
          value: this.fillZero(2, i.toString()),
          name: i
        })
      }
      return res
    },
    fillZero(width, str) {
      return str.length >= width
        ? str
        : new Array(width - str.length + 1).join('0') + str
    },
    setHour() {
      let hour = Number(this.current.hours)
      if (this.current.ampm === '오전') {
        if (hour > 12) {
          hour -= 12
        }
      } else {
        hour += 12
      }
      this.time.hour = this.fillZero(2, hour.toString())
    }
  }
}

---

#commonTimeScrollPicker {
  display: flex;
}

 

기능

- 오전, 오후 선택 가능

- 시간 1 ~ 12 선택 가능

- 분 1 ~ 59 선택 가능 (1분단위)

- 실제 결과 데이터 값은 24시 기준으로 ( ex. 오후 3시 50분 선택 시 => 실제 데이터 값은 15:50)