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