Uniapp-小程序简单的时间选择组件-年月日时分

文章目录

• 前言
• 一、组件效果
• 二、组件代码
• • 使用
  • 总结

    ---

    前言

    uniapp小程序开发系列。本文实现一个简单时间选择控件。uniapp用个心仪时间控件真的麻烦。官方给得要么年月日，要么时分。产品只要年月日时分。这该怎么玩。旧项目没有引入ui框架，我也不想去引入，不然高低整一个vant 小程序版的。

    uniapp生态中，有个插件市场，找了一通，是有时间控件。但是引入也是麻烦。没必要。下文基于网友给的案例再稍微改了改。对了 这是vue2 的 。

    ---

    一、组件效果

    二、组件代码

    时间控件的实现代码，区分了闰年平年。需要秒的话，可以自行修改。

                            取消        确定                              {{item}}年                          {{item}}月                          {{item}}日                          {{item}}时                          {{item}}分                      export default {    data() {      return {        years: [],        year: null,        months: [],        month: null,        days: [],        day: null,        hours: [],        hour: null,        minutes: [],        minute: null,        value: [],        indicatorStyle: `height: 50px;`,        timeValue: ''      }    },    props: {      visible: {        type: Boolean,        default: false      },      themes: {        type: Object,        default() {          return {};        },      },      interviewTime: {        type: String,        default() {          return '';        },      }    },    mounted() {      this.init();    },    watch: {      visible: {        handler(newValue, oldValue) {          if (newValue) {            if (this.interviewTime) {              this.init(this.interviewTime);            }          }        },        immediate: false,        deep: true      }    },    methods: {      init(interviewTime) {        const date = interviewTime ? new Date(interviewTime) : new Date();        const years = []        const year = date.getFullYear()        const months = []        const month = date.getMonth() + 1        const days = []        const day = date.getDate()        const hours = []        const hour = date.getHours()        const minutes = []        const minute = date.getMinutes()        let isDay = 30;        if (month == 2) {          if((year%4==0 && year%100!=0)||(year%400==0)){            console.log('闰年')            isDay = 29;          }else {            isDay = 28;             console.log('平年')          }        } else if ([1,3,5,7,8,10,12].includes(month)) {          isDay = 31;        } else {          isDay = 30;        }        for (let i = date.getFullYear(); i           years.push(i)        }        for (let i = 1; i           months.push(i)        }        for (let i = 1; i           days.push(i)        }        for (let i = 0; i           if (i