Date Calendar Picker
Date calendar picker ช่วยให้ผู้ใช้เลือกวันที่จากปฏิทินแบบสแตนด์อโลน
การใช้งานพื้นฐาน
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
ค่าคุณสมบัติ:
vue
<template>
<spr-date-calendar-picker id="date-calendar-basic" v-model="calendarModel" display-helper />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>โหมดปฏิทิน
คอมโพเนนต์นี้มีโหมดปฏิทินที่แตกต่างกันสามแบบ:
- full: แสดงปฏิทินแบบเต็มพร้อมวัน เดือน และปี
- month-year: แสดงเฉพาะเดือนและปี
- year-only: แสดงเฉพาะปี
โหมดเต็ม
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker id="date-calendar-full" v-model="calendarModel" mode="full" display-helper />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>โหมดเดือน-ปี
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
vue
<template>
<spr-date-calendar-picker id="date-calendar-month-year" v-model="calendarModel" mode="month-year" display-helper />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>โหมดปีเท่านั้น
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
vue
<template>
<spr-date-calendar-picker id="date-calendar-year-only" v-model="calendarModel" mode="year-only" display-helper />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>เพิ่มป้ายกำกับ
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
ค่า:
vue
<template>
<spr-date-calendar-picker
id="date-calendar-label"
v-model="calendarModel"
label="ปฏิทินวันที่"
display-helper
format="YYYY-MM-DD"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>ความกว้างที่กำหนดเอง
คุณสามารถกำหนดความกว้างของปฏิทินวันที่ด้วยตนเองได้โดยส่ง prop width
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
ค่าคุณสมบัติ:
vue
<template>
<spr-date-calendar-picker
id="date-calendar-width"
v-model="calendarModel"
label="ปฏิทินวันที่"
width="400px"
display-helper
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>รูปแบบวันที่
คุณสามารถกำหนดรูปแบบของวันที่ได้โดยส่ง prop format รูปแบบเริ่มต้นคือ MM-DD-YYYY คอมโพเนนต์จะส่งคืนวันที่ในรูปแบบที่กำหนด
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
ค่า:
vue
<template>
<spr-date-calendar-picker
id="date-calendar-format"
v-model="calendarModel"
label="ปฏิทินวันที่"
format="YYYY-MM-DD"
display-helper
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>ปิดใช้งาน
เพิ่ม prop disabled เพื่อปิดใช้งานปฏิทินวันที่
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker
id="date-calendar-disabled"
v-model="calendarModel"
label="ปฏิทินวันที่"
display-helper
disabled
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>อ่านได้อย่างเดียว
เพิ่ม prop readonly เพื่อทำให้ปฏิทินวันที่อ่านได้อย่างเดียว
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker
id="date-calendar-readonly"
v-model="calendarModel"
label="ปฏิทินวันที่"
display-helper
readonly
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>ข้อความช่วยเหลือ
ข้อความช่วยเหลือคือป้ายข้อความที่แสดงอยู่ด้านล่างช่องอินพุต ให้ข้อมูลเพิ่มเติม เช่น คำแนะนำ เคล็ดลับการจัดรูปแบบ หรือข้อเสนอแนะการตรวจสอบ
ในการแสดงข้อความช่วยเหลือ ให้ตั้งค่า prop display-helper เป็น true และเพิ่ม prop helper-text พร้อมเนื้อหาข้อความ คุณยังสามารถรวมไอคอนได้โดยใช้ prop helper-icon
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker
id="date-calendar-helper-text"
v-model="calendarModel"
label="ปฏิทินวันที่"
helper-text="เลือกวันที่"
display-helper
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>สถานะข้อผิดพลาด
ในการจัดการสถานะข้อผิดพลาด ให้เพิ่ม prop error ในปฏิทินวันที่ คุณยังสามารถรวมไอคอนได้โดยใช้ prop helper-icon
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker
id="date-calendar-error-state"
v-model="calendarModel"
label="ปฏิทินวันที่"
helper-icon="ph:warning-circle-fill"
helper-text="นี่คือข้อความช่วยเหลือ"
display-helper
error
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>ปีต่ำสุด/สูงสุด
คุณสามารถกำหนดปีต่ำสุดและสูงสุดที่จะแสดงในปฏิทินด้วยตนเองได้ ปีต่ำสุดเริ่มต้นคือ 1900 และสูงสุดคือปีปัจจุบัน
Su
Mo
Tu
We
Th
Fr
Sa
vue
<template>
<spr-date-calendar-picker
id="date-calendar-min-max-year"
v-model="calendarModel"
label="ปฏิทินวันที่"
:min-max-year="{ min: 2000, max: 2025 }"
display-helper
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>วันหยุด
คุณสามารถตั้งค่าวันหยุดในสัปดาห์ได้โดยส่ง prop rest-days
js
const restDays = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker
id="date-calendar-rest-days"
v-model="calendarModel"
label="ปฏิทินวันที่"
:rest-days="['mo', 'we', 'fr', 'sa']"
display-helper
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>วันที่ที่ปิดใช้งาน
คุณสามารถปิดใช้งานวันที่เฉพาะได้โดยส่ง prop disabled-dates มีหลายวิธีในการปิดใช้งานวันที่:
- ปิดใช้งานวันที่โดยใช้ From และ To
- ปิดใช้งานวันที่ในอดีตหรืออนาคต
- ปิดใช้งานวันที่ในอดีตหรืออนาคตพร้อมวันที่ที่เลือก
- ปิดใช้งานวันที่ที่เลือก
- ปิดใช้งานวันหยุดสุดสัปดาห์
- ปิดใช้งานวันธรรมดา
- ปิดใช้งานวันที่ที่เลือก
js
const disabledDates = { from: '02-12-2025', to: '05-15-2025' };Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker
id="date-calendar-disabled-dates"
v-model="calendarModel"
label="ปฏิทินวันที่"
:disabled-dates="{ from: '02-12-2025', to: '05-15-2025' }"
display-helper
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('');
</script>วันที่ที่เลือกไว้ล่วงหน้า
คุณสามารถเลือกวันที่ล่วงหน้าได้โดยเพียงแค่เพิ่มค่าใน v-model ของคุณ ค่าควรอยู่ในรูปแบบ MM-DD-YYYY
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
vue
<template>
<spr-date-calendar-picker
id="date-calendar-pre-selected-date"
v-model="calendarModel"
label="ปฏิทินวันที่"
display-helper
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const calendarModel = ref('09-11-2022');
</script>Emits
@get-input-value- ส่งออกวันที่จริงที่กำลังพิมพ์หรือเลือก@get-date-formats- ส่งออกรูปแบบวันที่ที่มีอยู่สำหรับวันที่ที่เลือก@get-month-list- ส่งออกรายชื่อเดือน@get-year-list- ส่งออกรายชื่อปี@get-date-errors- ส่งออกข้อผิดพลาดวันที่ที่มีอยู่@date-change- ส่งออกเมื่อวันที่เปลี่ยน
API Reference
| คุณสมบัติ | คำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| id | จำเป็นสำหรับการผูก popper ภายในปฏิทิน | String | - |
| v-model | ผูกค่าที่เลือกของวันที่ | String | '' |
| label | ข้อความป้ายกำกับสำหรับช่องอินพุต | String | - |
| width | กำหนดความกว้างของอินพุต | String | 400px |
| format | รูปแบบสำหรับวันที่ที่เลือก (เช่น 'MM-DD-YYYY') | String | MM-DD-YYYY |
| mode | โหมดการแสดงผลของปฏิทิน | String | 'full' |
| disabled | ปิดใช้งานปฏิทินวันที่ | Boolean | false |
| readonly | ทำให้ปฏิทินวันที่อ่านได้อย่างเดียว | Boolean | false |
| helper-text | แสดงข้อความช่วยเหลือด้านล่างอินพุต | String | - |
| helper-icon | ไอคอนที่จะแสดงควบคู่กับข้อความช่วยเหลือ | String | - |
| display-helper | แสดงข้อความช่วยเหลือ | Boolean | false |
| error | ระบุว่ามีข้อผิดพลาดกับอินพุต | Boolean | false |
| current-year | กำหนดปีปัจจุบันในมุมมองปฏิทิน | String | { new Date().getFullYear() } |
| min-max-year | กำหนดปีต่ำสุดและสูงสุดในปฏิทิน | Object | { min: 1900, max: { new Date().getFullYear() } } |
| rest-days | อาร์เรย์ของวันที่จะถูกถือว่าเป็นวันหยุด | Array | [] |
| disabled-dates | ปิดใช้งานวันที่หรือช่วงวันที่เฉพาะ | Object | {} |
การใช้งานในผลิตภัณฑ์
