Vue 문서에서 날짜 및 시간 선택 구성 요소 구현 방법

Vue는 풍부한 구성 요소 라이브러리를 제공하는 인기 있는 프런트 엔드 프레임워크입니다. 실제 프로젝트에서는 날짜 및 시간 선택 구성 요소를 사용해야 하는 경우가 많습니다. Vue는 이 구성 요소를 구현하는 데 편리한 여러 가지 방법을 제공하며, 가장 일반적으로 사용되는 방법은 vue-datepicker 및 vue-datetime-picker입니다.

1. vue-datepicker 사용

vue-datepicker는 Vue 기반 날짜 선택기 구성 요소입니다. NPM을 통해 설치할 수 있습니다.

npm install vue-datepicker --save

이 구성 요소를 사용하려면 Vue 구성 요소에서 가져와야 합니다.

import Datepicker from 'vue-datepicker'

Vue 구성 요소에서는 이 구성 요소를 사용하여 날짜를 선택할 수 있습니다.

<datepicker v-model="myDate"></datepicker>

사용자가 날짜를 선택하면 v-model을 통해 Vue 인스턴스의 myDate 속성에 바인딩됩니다. 또한 props를 설정하여 날짜 선택기를 구성할 수도 있습니다:

<datepicker v-model="myDate" language="zh" format="yyyy-MM-dd" :disabled-dates="disabledDates"></datepicker>

<script>
export default {
  data () {
    return {
      myDate: '',
      disabledDates: {
        to: new Date()
      }
    }
  }
}
</script>

위 코드에서 날짜 선택기를 중국어 간체로 설정하고 날짜 형식은 "yyyy-MM-dd"입니다. 또한 오늘 이후의 날짜를 선택할 수 없도록 만드는 비활성화된 날짜 속성을 설정합니다.

2. vue-datetime-picker 사용

vue-datetime-picker는 NPM을 통해 설치할 수 있는 Vue 기반 날짜/시간 선택기 구성 요소입니다.

npm install vue-datetime-picker --save

이 구성 요소의 사용은 vue-datepicker와 유사합니다. need Vue 구성 요소에 도입됨:

import DatetimePicker from 'vue-datetime-picker'

그런 다음 Vue 구성 요소에서 사용:

<datetime-picker v-model="myDatetime"></datetime-picker>

v-model 바인딩을 통해 사용자가 선택한 날짜와 시간을 Vue 인스턴스의 myDatetime 속성에 바인딩할 수 있습니다. props를 설정하여 날짜 및 시간 선택기를 구성할 수도 있습니다:

<datetime-picker v-model="myDatetime" language="zh" format="yyyy-MM-dd hh:mm" :disabled-dates="disabledDates"></datetime-picker>

<script>
export default {
  data () {
    return {
      myDatetime: '',
      disabledDates: {
        to: new Date()
      }
    }
  }
}
</script>

위 코드에서 날짜 및 시간 선택기를 중국어 간체로 설정하고 날짜 형식은 "yyyy-MM-dd hh:mm"입니다. 또한 오늘 이후의 날짜 시간을 선택할 수 없도록 만드는 비활성화된 날짜 속성을 설정합니다.

3. 요약

Vue는 날짜 및 시간 선택기 구성 요소를 구현하는 다양한 편리한 방법을 제공합니다. 이 기사에서는 일반적으로 사용되는 두 가지 구성 요소인 vue-datepicker와 vue-datetime-picker를 소개합니다. 이를 통해 날짜 및 시간 선택기 구성 요소를 신속하게 구현할 수 있어 사용자가 원하는 날짜와 시간을 쉽게 선택할 수 있습니다.

위 내용은 Vue 문서에서 날짜 및 시간 선택 구성 요소 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!