Month Year Picker

Month year picker ช่วยให้ผู้ใช้เลือกเดือนและปีจากอินเทอร์เฟซแบบปฏิทิน

การใช้งานพื้นฐาน

ค่าคุณสมบัติ:

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" display-helper />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');
</script>

เพิ่มป้ายกำกับ

ค่า: 09-1997

ค่าคุณสมบัติ: 09-1997

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" label="เลือกเดือนและปี" display-helper format="MM-YYYY" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');
</script>

คอมโพเนนต์ที่กำหนดเอง

คุณสามารถใช้ slot เริ่มต้นเพื่อใช้คอมโพเนนต์ใดก็ได้เป็นอินพุตของตัวเลือกเดือน-ปี หรือเพื่อเปลี่ยนรูปแบบการแสดงผลโดยไม่เปลี่ยนรูปแบบของโมเดลข้อมูล

monthYearPickerModel:
monthYearPickerInputModel:

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="อินพุตตัวเลือกเดือน-ปีที่กำหนดเอง"
    display-helper
    format="MMM-YYYY"
    @update:model-value="handleMonthYearPickerModelChange"
  >
    <template #default="{ handleClick }">
      <spr-input
        v-model="monthYearPickerInputModel"
        readonly
        class="spr-w-full spr-cursor-pointer"
        placeholder="MMM / YYYY"
        @click="handleClick"
      >
        <template #icon>
          <Icon icon="ph:calendar-blank" />
        </template>
      </spr-input>
    </template>
  </spr-month-year-picker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';

const monthYearPickerModel = ref('');
const monthYearPickerInputModel = ref('');

const handleMonthYearPickerModelChange = (newValue: string) => {
  monthYearPickerInputModel.value = dayjs(newValue).format('MMM / YYYY').toUpperCase();
};
</script>

ความกว้างที่กำหนดเอง

คุณสามารถกำหนดความกว้างของตัวเลือกเดือน-ปีด้วยตนเองได้โดยส่ง prop width

ค่าคุณสมบัติ:

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" width="400px" display-helper />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');
</script>

รูปแบบวันที่

คุณสามารถระบุรูปแบบของเดือน-ปีได้โดยส่ง prop format รูปแบบเริ่มต้นคือ MM-YYYY คอมโพเนนต์จะคืนค่าวันที่ในรูปแบบที่ระบุ

ค่า:

vue

<template>
  <spr-month-year-picker 
    id="monthyearpicker" 
    v-model="monthYearPickerModel" 
    label="เดือน-ปีในรูปแบบ YYYY-MM" 
    format="YYYY-MM" 
    display-helper 
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');
</script>

ค่า:

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="เดือน-ปีในรูปแบบ MMMM YYYY"
    format="MMMM YYYY"
    display-helper
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');
</script>

ปิดการใช้งาน

เพิ่ม prop disabled เพื่อปิดการใช้งานตัวเลือกเดือน-ปี

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" display-helper disabled />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');
</script>

อ่านอย่างเดียว

เพิ่ม prop readonly เพื่อทำให้ตัวเลือกเดือน-ปีอ่านได้อย่างเดียว

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" display-helper readonly />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('10-2025');
</script>

ข้อความช่วยเหลือ

ข้อความช่วยเหลือคือป้ายข้อความที่แสดงด้านล่างฟิลด์อินพุต เพื่อให้ข้อมูลเพิ่มเติม เช่น คำแนะนำ เคล็ดลับการจัดรูปแบบ หรือคำติชมการตรวจสอบความถูกต้อง

ในการแสดงข้อความช่วยเหลือ ให้ตั้งค่า prop display-helper เป็น true และเพิ่ม prop helper-text พร้อมเนื้อหาข้อความ คุณยังสามารถใส่ไอคอนได้โดยใช้ prop helper-icon ซึ่งใช้ไลบรารีไอคอน Iconify

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props

นี่คือข้อความช่วยเหลือ

ค่าคุณสมบัติ:

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    class="[&>p]:spr-m-0"
    v-model="monthYearPickerModel"
    label="ตัวเลือกเดือน-ปี"
    helper-icon="ph:warning-circle-fill"
    helper-text="นี่คือข้อความช่วยเหลือ"
    display-helper
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import { Icon } from '@iconify/vue';

const monthYearPickerModel = ref('');
</script>

การใช้ Slot ข้อความช่วยเหลือ

นี่คือข้อความช่วยเหลือ

vue

<template>
  <spr-month-year-picker id="monthyearpicker" class="[&>p]:spr-m-0" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" display-helper>
    <template #helperMessage>
      <span>นี่คือข้อความช่วยเหลือ</span>
    </template>
  </spr-month-year-picker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import { Icon } from '@iconify/vue';

const monthYearPickerModel = ref('');
</script>

สถานะข้อผิดพลาด

เพื่อจัดการสถานะข้อผิดพลาด ให้เพิ่ม prop error ลงในตัวเลือกเดือน-ปี คุณยังสามารถใส่ไอคอนได้โดยใช้ prop helper-icon ซึ่งใช้ไลบรารีไอคอน Iconify

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props

นี่คือข้อความช่วยเหลือ

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="ตัวเลือกเดือน-ปี"
    helper-icon="ph:warning-circle-fill"
    helper-text="นี่คือข้อความช่วยเหลือ"
    display-helper
    error
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import { Icon } from '@iconify/vue';

const monthYearPickerModel = ref('');
</script>

การใช้ Slot ข้อความช่วยเหลือ

นี่คือข้อความช่วยเหลือ

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" display-helper error>
    <template #helperMessage>
      <Icon icon="ph:warning-circle-fill" width="20px" height="20px" />
      <span>นี่คือข้อความช่วยเหลือ</span>
    </template>
  </spr-month-year-picker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import { Icon } from '@iconify/vue';

const monthYearPickerModel = ref('');
</script>

กำหนดปีปัจจุบันด้วยตนเอง

คุณสามารถกำหนดปีปัจจุบันที่จะแสดงในตัวเลือกได้ด้วยตนเอง ปีปัจจุบันเริ่มต้นคือปีปัจจุบัน ส่ง prop current-year เพื่อกำหนดปีปัจจุบัน

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" current-year="2000" display-helper />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import { Icon } from '@iconify/vue';

const monthYearPickerModel = ref('');
</script>

กำหนดปีขั้นต่ำ-สูงสุดด้วยตนเอง

คุณยังสามารถกำหนดปีขั้นต่ำและสูงสุดที่จะแสดงในตัวเลือกได้ด้วยตนเอง ปีขั้นต่ำเริ่มต้นตั้งไว้ที่ 1900 และปีสูงสุดคือปีปัจจุบัน

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="ตัวเลือกเดือน-ปี"
    :min-max-year="minMaxYear"
    display-helper
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');

const minMaxYear = ref({
  min: 2000,
  max: 2025,
});
</script>

เดือน-ปีที่เลือกไว้ล่วงหน้า

คุณสามารถเลือกเดือน-ปีล่วงหน้าได้โดยเพียงแค่เพิ่มค่าใน v-model ของคุณ ค่าควรอยู่ในรูปแบบ MM-YYYY หรือรูปแบบที่คุณระบุ

vue

<template>
  <spr-month-year-picker id="monthyearpicker" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" display-helper />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('09-1997');
</script>

รับรูปแบบวันที่

เพื่อรับรูปแบบวันที่ คุณสามารถใช้ emits @get-date-formats เมื่อเดือน-ปีถูกต้อง มันจะคืนค่ารูปแบบที่แตกต่างกัน

ผลลัพธ์:

{}

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="ตัวเลือกเดือน-ปี"
    @get-date-formats="getMonthYearDateFormats"
    display-helper
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');

const getMonthYearDateFormats = (date) => {
  console.log(date);
};
</script>

รับรายการเดือน

เพื่อรับรายการเดือนที่ใช้ คุณสามารถใช้ emits @get-month-list

ผลลัพธ์:

[]

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="ตัวเลือกเดือน-ปี"
    @get-month-list="getMonthYearMonthList"
    display-helper
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');

const getMonthYearMonthList = (date) => {
  console.log(date);
};
</script>

รับรายการปี

เพื่อรับรายการปีที่ใช้ คุณสามารถใช้ emits @get-year-list

ผลลัพธ์:

[]

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="ตัวเลือกเดือน-ปี"
    @get-year-list="getMonthYearYearList"
    display-helper
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');

const getMonthYearYearList = (date) => {
  console.log(date);
};
</script>

การจัดการข้อผิดพลาด

เนื่องจากมีการจัดการข้อผิดพลาดที่มีอยู่สำหรับตัวเลือกเดือน-ปี คุณสามารถใช้ emit @get-date-errors เพื่อรับรายการการตรวจสอบข้อผิดพลาดระดับคอมโพเนนต์

รายการการตรวจสอบข้อผิดพลาดระดับคอมโพเนนต์:

ตรวจสอบเดือน-ปีว่าถูกต้อง MM/YYYY
ตรวจสอบปีว่าอยู่ระหว่างปีขั้นต่ำและสูงสุด

ผลลัพธ์:

[]

vue

<template>
  <spr-month-year-picker
    id="monthyearpicker"
    v-model="monthYearPickerModel"
    label="ตัวเลือกเดือน-ปี"
    @get-date-errors="getMonthYearDateErrors"
    display-helper
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const monthYearPickerModel = ref('');

const getMonthYearDateErrors = (errors) => {
  console.log(errors);
};
</script>

กลยุทธ์ Popper

กลยุทธ์ Popper ใช้หลักๆ เมื่อทำงานกับองค์ประกอบเช่น modal ช่วยควบคุมพฤติกรรมการวางตำแหน่งของ popper กลยุทธ์จะทำให้แน่ใจว่าองค์ประกอบ popper ถูกวางตำแหน่งแบบไดนามิกตามวิวพอร์ต องค์ประกอบอ้างอิง หรือปัจจัยอื่นๆ เช่น การเลื่อนหรือการปรับขนาด

โดยค่าเริ่มต้น กลยุทธ์ Popper ถูกตั้งเป็น absolute ซึ่งวางตำแหน่งองค์ประกอบ popper สัมพันธ์กับบรรพบุรุษที่วางตำแหน่งที่ใกล้ที่สุด (มักเป็นองค์ประกอบ body) อย่างไรก็ตาม คุณสามารถเปลี่ยน strategy เป็น fixed ซึ่งวางตำแหน่งองค์ประกอบ popper สัมพันธ์กับวิวพอร์ต ทำให้มั่นใจได้ว่ามันจะอยู่ในตำแหน่งเดิมแม้เมื่อเลื่อนหน้า

ส่ง prop popper-strategy เพื่อเปลี่ยนพฤติกรรมตำแหน่งของ popper

สิ่งสำคัญที่ต้องทราบ:

อย่าลืมส่ง prop wrapperPosition เพื่อเขียนทับตำแหน่ง relative เป็น initial

vue

<template>
  <spr-button tone="success" @click="modalModel = true">เปิด Modal</spr-button>

  <spr-modal v-model="modalModel" title="ตัวเลือกเดือน-ปีกับ Modal">
    <spr-month-year-picker
      id="monthyearpicker"
      v-model="monthYearPickerModel"
      label="ตัวเลือกเดือน-ปี"
      popper-strategy="fixed"
      wrapper-position="initial"
      display-helper
    />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </spr-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const modalModel = ref(false);

const monthYearPickerModel = ref('');
</script>

คุณยังสามารถใช้ prop popper-container เพื่อระบุคอนเทนเนอร์ที่กำหนดเองสำหรับองค์ประกอบ popper ซึ่งมีประโยชน์เมื่อคุณต้องการจำกัดบริบทการวางตำแหน่งของ popper ให้เฉพาะองค์ประกอบที่เฉพาะเจาะจงภายในแอปพลิเคชันของคุณ

เนื่องจาก popper กำลังถูก teleport ไปยังคอนเทนเนอร์อื่น prop popper-width จะไม่ทำงานตามที่คาดหวัง เพื่อกำหนดความกว้างที่กำหนดเองสำหรับ popper ในกรณีนี้ คุณสามารถใช้สไตล์ที่กำหนดเองหรือคลาส CSS เพื่อกำหนดความกว้างที่ต้องการ

vue

<template>
  <div>
    <spr-dropdown
      id="sample-dropdownCustomPopperMonthYear"
      width="300px"
      :triggers="['hover', 'click']"
      :popper-triggers="['hover', 'click']"
      popper-width="500px"
      :auto-hide="false"
    >
      <spr-button class="spr-w-full" tone="success" has-icon>
        <span>Popper ที่กำหนดเองกับ Dropdown</span>
        <Icon icon="ph:caret-down" />
      </spr-button>
      <template #popper>
        <spr-month-year-picker
          id="monthyearpicker"
          v-model="monthYearPickerModel"
          label="ตัวเลือกเดือน-ปี"
          popper-strategy="fixed"
          popper-container="#sample-dropdownCustomPopperMonthYear"
          wrapper-position="initial"
          display-helper
        />
      </template>
    </spr-dropdown>
  </div>
</template>

การดำเนินการ

vue

<template>
  <div class="spr-space-y-2">
    <spr-button tone="success" @click="clearMonthYear()">ล้างเดือน-ปี</spr-button>
    <spr-month-year-picker ref="monthYearPickerRef" id="monthyearpicker" v-model="monthYearPickerModel" label="ตัวเลือกเดือน-ปี" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Icon } from '@iconify/vue';

const monthYearPickerModel = ref('');
const monthYearPickerRef = ref(null);

const clearMonthYear = () => {
  monthYearPickerRef.value.clear();
};
</script>

การอ้างอิง API

Props

คุณสมบัติ	คำอธิบาย	ชนิด	ค่าเริ่มต้น
id	จำเป็นต้องใช้เพื่อผูก popper ภายในตัวเลือกเดือน-ปี	String	-
v-model	ผูกค่าเดือน-ปีที่เลือก	String	-
label	ข้อความป้ายกำกับสำหรับฟิลด์อินพุต	String	-
width	กำหนดความกว้างของอินพุต	String	100%
format	รูปแบบสำหรับเดือน-ปีที่เลือก (เช่น 'MM-YYYY', 'YYYY-MM', 'MMMM YYYY')	String	MM-YYYY
disabled	ปิดการใช้งานตัวเลือกเดือน-ปี	Boolean	false
readonly	ทำให้ตัวเลือกเดือน-ปีอ่านได้อย่างเดียว	Boolean	false
helper-text	แสดงข้อความช่วยเหลือด้านล่างอินพุต	String	-
helper-icon	ไอคอนที่จะแสดงควบคู่กับข้อความช่วยเหลือ	String	-
display-helper	แสดงข้อความช่วยเหลือ	Boolean	false
error	ระบุว่ามีข้อผิดพลาดกับอินพุต	Boolean	false
current-year	กำหนดปีปัจจุบันในมุมมองตัวเลือก	String	2026
min-max-year	กำหนดปีขั้นต่ำและสูงสุดในตัวเลือก	Object	{ min: 1900, max: 2026 }
placement	เปลี่ยนตำแหน่งของ dropdown popper (เช่น `bottom`, `top`, `left`, `right`)	string	`bottom`
wrapper-position	ตำแหน่ง CSS ของ wrapper ตัวเลือกเดือน-ปี	String	relative
popper-strategy	กลยุทธ์การวางตำแหน่ง Popper ('absolute' หรือ 'fixed')	String	`absolute`
popper-container	ตัวเลือก CSS หรือ HTMLElement เพื่อระบุคอนเทนเนอร์ที่กำหนดเองสำหรับองค์ประกอบ popper	String \| HTMLElement	''

Events

เหตุการณ์	คำอธิบาย	พารามิเตอร์
@update:model-value	ส่งออกเมื่อค่าเดือน-ปีที่เลือกเปลี่ยนแปลง	String (เดือน-ปีที่จัดรูปแบบ)
@get-input-value	ส่งออกเดือน-ปีจริงที่กำลังพิมพ์หรือเลือกในตัวเลือก	String \| null
@get-date-formats	ส่งออกรูปแบบวันที่ที่มีให้เมื่อเลือกเดือน-ปีที่ถูกต้อง	Object (สตริงรูปแบบเดือน-ปีต่างๆ)
@get-month-list	ส่งออกรายการเดือนที่มีในคอมโพเนนต์	Array (ออบเจ็กต์เดือน)
@get-year-list	ส่งออกรายการปีที่มีในคอมโพเนนต์	Array (ตัวเลขปี)
@get-date-errors	ส่งออกข้อผิดพลาดการตรวจสอบจากตัวเลือกเดือน-ปี	Array (ออบเจ็กต์ข้อผิดพลาดที่มี title และ message)

การใช้งานผลิตภัณฑ์

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

เครื่องมือเลือกวันที่

ช่องป้อนข้อมูล

เรดิโอ

เลือก

Month Year Picker

การใช้งานพื้นฐาน

เพิ่มป้ายกำกับ

คอมโพเนนต์ที่กำหนดเอง

ความกว้างที่กำหนดเอง

รูปแบบวันที่

ปิดการใช้งาน

อ่านอย่างเดียว

ข้อความช่วยเหลือ

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props

การใช้ Slot ข้อความช่วยเหลือ

สถานะข้อผิดพลาด

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props

การใช้ Slot ข้อความช่วยเหลือ

กำหนดปีปัจจุบันด้วยตนเอง

กำหนดปีขั้นต่ำ-สูงสุดด้วยตนเอง

เดือน-ปีที่เลือกไว้ล่วงหน้า

รับรูปแบบวันที่

ผลลัพธ์:

รับรายการเดือน

ผลลัพธ์:

รับรายการปี

ผลลัพธ์:

การจัดการข้อผิดพลาด

ผลลัพธ์:

กลยุทธ์ Popper

การดำเนินการ

การอ้างอิง API

Props

Events

การใช้งานผลิตภัณฑ์

Month Year Picker ​

การใช้งานพื้นฐาน ​

เพิ่มป้ายกำกับ ​

คอมโพเนนต์ที่กำหนดเอง ​

ความกว้างที่กำหนดเอง ​

รูปแบบวันที่ ​

ปิดการใช้งาน ​

อ่านอย่างเดียว ​

ข้อความช่วยเหลือ ​

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props ​

การใช้ Slot ข้อความช่วยเหลือ ​

สถานะข้อผิดพลาด ​

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props ​

การใช้ Slot ข้อความช่วยเหลือ ​

กำหนดปีปัจจุบันด้วยตนเอง ​

กำหนดปีขั้นต่ำ-สูงสุดด้วยตนเอง ​

เดือน-ปีที่เลือกไว้ล่วงหน้า ​

รับรูปแบบวันที่ ​

ผลลัพธ์:

รับรายการเดือน ​

ผลลัพธ์:

รับรายการปี ​

ผลลัพธ์:

การจัดการข้อผิดพลาด ​

ผลลัพธ์:

กลยุทธ์ Popper ​

การดำเนินการ ​

การอ้างอิง API ​

Props ​

Events ​

การใช้งานผลิตภัณฑ์ ​

Month Year Picker

การใช้งานพื้นฐาน

เพิ่มป้ายกำกับ

คอมโพเนนต์ที่กำหนดเอง

ความกว้างที่กำหนดเอง

รูปแบบวันที่

ปิดการใช้งาน

อ่านอย่างเดียว

ข้อความช่วยเหลือ

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props

การใช้ Slot ข้อความช่วยเหลือ

สถานะข้อผิดพลาด

การใช้ข้อความช่วยเหลือโดยตรงผ่าน Props

การใช้ Slot ข้อความช่วยเหลือ

กำหนดปีปัจจุบันด้วยตนเอง

กำหนดปีขั้นต่ำ-สูงสุดด้วยตนเอง

เดือน-ปีที่เลือกไว้ล่วงหน้า

รับรูปแบบวันที่

รับรายการเดือน

รับรายการปี

การจัดการข้อผิดพลาด

กลยุทธ์ Popper

การดำเนินการ

การอ้างอิง API

Props

Events

การใช้งานผลิตภัณฑ์