การสร้าง Datepicker (เครื่องมือเลือกวันที่) ใน Vue.js มีหลายวิธี คุณสามารถใช้คอมโพเนนต์ที่มีอยู่หรือแพ็คเกจจากชุดคอมโพเนนต์ภายนอกเพื่อให้ง่ายต่อการสร้าง Datepicker และการจัดการวันที่ในแอปพลิเคชันของคุณ นี่คือตัวอย่างการใช้งาน Datepicker โดยใช้แพ็คเกจ vue-datepicker:
ติดตั้งแพ็คเกจ:
- เริ่มต้นด้วยการติดตั้งแพ็คเกจ
vue-datepickerโดยใช้ npm หรือ yarn:
1
npm install vue-datepicker --save
- เริ่มต้นด้วยการติดตั้งแพ็คเกจ
นำเข้าและใช้งาน Datepicker:
- นำเข้าแพ็คเกจ Datepicker ในคอมโพเนนต์ของคุณ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<template>
<div>
<datepicker v-model="selectedDate"></datepicker>
<p>วันที่ที่เลือก: {{ selectedDate }}</p>
</div>
</template>
<script>
import Datepicker from 'vue-datepicker';
export default {
components: {
Datepicker
},
data() {
return {
selectedDate: null
};
}
};
</script>ปรับแต่งตามความต้องการ:
- คุณสามารถปรับแต่ง Datepicker ตามความต้องการของคุณ ด้วยการใช้ props และอิเวนต์ต่างๆ ที่ Datepicker รองรับ โดยต้องดูคู่มือของแพ็คเกจเพิ่มเติมเพื่อเรียนรู้เพิ่มเติม.
นี่เป็นตัวอย่างการใช้งาน Datepicker ด้วยแพ็คเกจ vue-datepicker ใน Vue.js คุณสามารถค้นหาแพ็คเกจอื่นๆ หรือคอมโพเนนต์ Datepicker ที่เหมาะกับความต้องการของคุณและปรับแต่งตามความต้องการ.