ionic6-vue ionicUI组件 简易年月日选择组件

<template>
    <ion-page>
        <ion-header :translucent="true">
            <ion-toolbar>
                <ion-title>Schedule</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content :fullscreen="true">
            <ion-header collapse="condense">
                <ion-toolbar>
                    <ion-title size="large">Schedule</ion-title>
                </ion-toolbar>
            </ion-header>
            <div id="container">
                <strong>Ready to create an app?</strong>
                <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
                <div>
                    <ion-item button="true" id="open-date-input">
                        <ion-label>Date</ion-label>
                        <ion-text slot="end">{{ date1 }}</ion-text>
                    </ion-item>
                </div>
                <div>
                    <ion-button @click="isOpenRef = true">Open Datetime Modal</ion-button>
                    <ion-modal :is-open="isOpenRef" :initialBreakpoint="0.4" @didDismiss="isOpenRef = false">
                        <ion-header :translucent="true">
                            <ion-toolbar>
                                <ion-title>Date Pick</ion-title>
                                <ion-button color="dark" fill="clear" slot="end" @click="triggerModal(false)">Confirm</ion-button>
                            </ion-toolbar>
                        </ion-header>
                        <ion-content :fullscreen="true">
                            <div class="hacking-datetime">
                                <ion-datetime locale="en-US" v-model="selectedDate" presentation="year" :yearValues="dateValues"/>
                                <ion-datetime locale="en-US" v-model="selectedYear" presentation="month-year" @ionChange="getDate"/>
                            </div>
                        </ion-content>
                    </ion-modal>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButton,
    IonModal,
    IonDatetime,
    IonItem,
    IonPopover,
    IonText,
    IonLabel,
} from "@ionic/vue";
import {format, parseISO} from 'date-fns'

export default defineComponent({
    components: {
        IonPage,
        IonHeader,
        IonToolbar,
        IonTitle,
        IonContent,
        IonButton,
        IonModal,
        IonDatetime,
        IonItem,
        IonPopover,
        IonText,
        IonLabel,
    },
    setup() {
        const dateSatsuki = [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];
        const dateOtsuki = [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];
        const dateFebruary = [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];
        const dateLeapYear = [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];
        const dateValues = ref([] as Number[]);
        const selectedYear = ref(new Date().toISOString());
        const selectedDate = ref('00' + format(new Date(),'dd'));
        const isOpenRef = ref(false);
        const date1 = ref(format(new Date(),'yyyy-MM-dd'));
        const formatDate = (value:string) => {
            return format(parseISO(value), 'yyyy-MM');
        };
        const getDate = (event:any) => {
            const date = formatDate(event.detail.value);
            checkDate(date);
        };
        const checkDate = (date:string) => {
            const yearMonth = date.split('-');
            const year = Number(yearMonth[0]);
            const month = yearMonth[1];
            if (month === '02') {
                if ((year % 4 === 0 && year % 100 != 0) || year % 400 === 0){
                    dateValues.value = dateLeapYear;
                } else {
                    dateValues.value = dateFebruary;
                }
            } else if (month === '04' || month === '06' || month === '09' || month === '11') {
                dateValues.value = dateSatsuki;
            } else {
                dateValues.value = dateOtsuki;
            }
        };
        //判断当前月份有几天
        checkDate(format(new Date(),'yyyy-MM'));
        const triggerModal = (flag:boolean) => {
            const yearAndMonth = format(parseISO(selectedYear.value), 'yyyy-MM');
            const date = selectedDate.value.split('-')[0].substring(2,4);
            date1.value = yearAndMonth + '-' + date;
            isOpenRef.value = flag;
        };
        return {
            dateValues,
            isOpenRef,
            date1,
            formatDate,
            getDate,
            triggerModal,
            selectedYear,
            selectedDate,
        }
    }
})
</script>

<style scoped>
#container {
    text-align: center;
}

#container strong {
    font-size: 20px;
    line-height: 26px;
}

#container p {
    font-size: 16px;
    line-height: 22px;

    color: #8c8c8c;

    margin: 0;
}

#container a {
    text-decoration: none;
}

.hacking-datetime {
    display: grid;
    grid-template-columns: 1fr 2fr;
    position: absolute;
    width: 100%;
}
</style>