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 중국어 웹사이트의 기타 관련 기사를 참조하세요!