更新记录

1.0.1（2023-02-08）

修改utils文件，去除无用js

1.0.0（2023-02-08）

初始化

平台兼容性

使用示例

// 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },

        // 占位符
        placeholder: {
            type: String,
            default: '请选择日期时间'
        },

        // 表示有效日期时间范围的开始，
        // 字符串格式为 "YYYY-MM-DD hh:mm"
        start: {
            type: String,
            default: '2022-1-1 00:00'
        },

        // 表示有效日期时间范围的结束
        // 字符串格式为 "YYYY-MM-DD hh:mm"
        end: {
            type: String,
            default: '2300-1-1 00:00'
        },

        // 表示选择器的粒度，有效值：year | month | day | hour | minute
        fields: {
            type: String,
            default: 'minute'
        },

        // 默认值
        // 字符串格式为 "YYYY-MM-DD hh:mm"
        defaultValue: {
            type: String,
            default: ''
        },
        // 只显示年月日
        showTime: {
            type: Boolean,
            default: true
        },
        // 只显示年月
        showMonth: {
            type: Boolean,
            default: true
        },
        // 只显示年
        showYear: {
            type: Boolean,
            default: true
        },
    theme: String
    },

<style lang="scss" scoped>
    .data-picker{
        font-size: 28rpx;
        font-weight: 700;
        justify-content: flex-end;
        padding: 40rpx 32rpx 0;
        color: #6477F4 ;
    }
</style>
<template>
    <view class="wrap">
        <view class="dis-flex align-center data-picker" @click="showDatePicker=true">
            <text class="ml40">{{searchYear ? `${searchYear}年` : '请选择缴费年份'}}</text>
            <i class="iconfont icon-angle-down fw700"></i>
            <text class="iconfont icon-bottom f22 ml15"></text>
        </view>
        <gy-popup
            header
            title="请选择年份" 
            :show.sync="showDatePicker" >
            <gy-datetime-picker
                :showTime="false"
                :showMonth="false"
                :showYear="false"
                :defaultValue="defaultDate"
                :end="defaultDate"
                @confirm="confirmDate">
            </gy-datetime-picker>
        </gy-popup>
        <gy-popup-mask v-if="showDatePicker" @tap="showDatePicker = false" />
    </view>
</template>

<script>
import gyPopupMask from '@/components/gy-popup-mask/gy-popup-mask.vue'
import gyPopup from '@/components/gy-popup/gy-popup.vue'
import gyDatetimePicker from '@/components/gy-datetime-picker/gy-datetime-picker.vue'
import { getCurrentTime } from '@/utils/utils.js'
export default {
    components: {
        gyDatetimePicker,
        gyPopup,
        gyPopupMask
    },
    data() {
        return {
            showDatePicker: false,
            searchYear:'',
            defaultDate:getCurrentTime().slice(0,10),
            selectDate:getCurrentTime().slice(0,4),
        };
    },
    methods: {
        // 筛选日期选择
        confirmDate(result) {
            this.showDatePicker = false
            this.searchYear = result.slice(0,4)
            this.selectDate = result.slice(0,4)
        },
    }
};
</script>