vue+mint-ui 实现时间选择器包含年月日以及上下午

博主： zmx
发布时间：2021 年 11 月 12 日
705 次浏览
暂无评论
2363字数
分类：前端

# 引言

烦人的小傻瓜为了这个项目头疼了好几天，非要用原生的mt-datetime-picker，看了看官方的Demo，可以自定义这种联动选择，当年C++写的平闰年，自己开发一个组件也可以。

# 效果图

![1.png](https://www.zunmx.top/usr/uploads/2021/11/3148825215.png)
![2.png](https://www.zunmx.top/usr/uploads/2021/11/2247516257.png)

# 代码

# 组件代码

```html
<template>
  <div>
        <mt-picker 
          :slots="dataList"  
          style="touch-action: none" 
          @change="onValuesChange"
        ></mt-picker>
  </div>
</template>

}
  },
  computed: {
    dataList () {
      return [
        {
          flex: 1,
          values: this.calendar.year,
          className: 'slot1',
          textAlign: 'center'
        }, {
          flex: 1,
          values: this.calendar.month,
          className: 'slot2',
          textAlign: 'center'
        }, {
          flex: 1,
          values: this.calendar.day,
          className: 'slot3',
          textAlign: 'center'
        }, {
          flex: 1,
          values: this.calendar.apm,
          className: 'slot4',
          textAlign: 'center'
        }
      ]
    }
  },
  watch: {

},
  mounted () {
    for (let i = 0; i <= this.calendar.backYearNumber; i++) {
      this.calendar.year.push(Number(this.calendar.startYear) + i + ' 年')
    }
    for (let i = 1; i <= 12; i++) {
      this.calendar.month.push(String(i).padStart(2, '0') + ' 月')
    }
  },
  methods: {
    getResult () {
      this.$emit()
      return this.dateFormatResult
    },
    onValuesChange (picker, values) {
      if (values[0] === undefined) return
      if (values[0].indexOf(' 年') > 0) {
        this.calendar.currentYear = values[0].substr(0, 4)
      } else if (values[0].indexOf(' 月') > 0) {
        this.calendar.currentMonth = values[0].substr(0, 2)
      } else if (values[0].indexOf(' 日') > 0) {
        this.calendar.currentDay = values[0].substr(0, 2)
      } else if (this.calendar.apm.indexOf(values[0]) >= 0) {
        this.calendar.currentAPM = values[0]
      }
      if (!this.calendar.runFlag) {
        picker.setSlotValue(0, String(new Date().getFullYear()) + ' 年')
        picker.setSlotValue(1, String(new Date().getMonth() + 1) + ' 月')
        picker.setSlotValue(2, String(new Date().getDate()) + ' 日')
        picker.setSlotValue(3, this.calendar.currentAPM)
        this.calendar.runFlag = true
        return
      }
      if (this.calendar.bigMonth.indexOf(String(this.calendar.currentMonth) + ' 月') >= 0) {
        this.calendar.day = []
        for (let i = 1; i <= 31; i++) {
          this.calendar.day.push(String(i).padStart(2, '0') + ' 日')
        }
      }
      if (this.calendar.smallMonth.indexOf(String(this.calendar.currentMonth) + ' 月') >= 0) {
        this.calendar.day = []
        for (let i = 1; i <= 30; i++) {
          this.calendar.day.push(String(i).padStart(2, '0') + ' 日')
        }
      }
      if (this.calendar.currentMonth === '02') {
        let days = 0
        let year = Number(this.calendar.currentYear)
        if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0) {
          days = 29
        } else {
          days = 28
        }
        this.calendar.day = []
        for (let i = 1; i <= days; i++) {
          this.calendar.day.push(String(i).padStart(2, '0') + ' 日')
        }
      }
      this.dateFormatResult = this.calendar.currentYear + this.calendar.currentMonth + this.calendar.currentDay + '000000'
      this.$emit('getDateFormatResult', this.dateFormatResult, this.calendar.currentAPM)
    }
  }
}
</script>

<style>

</style>
```

# 父组件部分代码

首先引用这个组件，然后调用

```html
<calendarComp
      @getDateFormatResult="getStartDate"
      v-if="popupVisible1"
      ></calendarComp>
```

```javascript
getStartDate (result, apm) {
      this.applyInfo.startDate = result
      console.log(apm)
    }
```

# 总结

mint-ui头一次听说，我感觉和el那些也都差不多，只是一个组件库，主要还是实现和设计上，我相信有更简单的方法，因为这里的判断感觉很别扭，毕竟时间也不早了，不优化了，发篇文章记录一下，然后睡觉。

大概就是这样了，因为这个涉及到了公司项目，所以不会贴全部代码，最近疫情在家办公，时间也不太充裕，所以近期更新很慢。

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款了昂。

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

zunmx.fans
我 www.hao123.com实名申请友链OωO
zunmx.fans
作者小小骗人，我登陆了也看不到( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
zunmx.fans
please many update 算法 (´இ皿இ｀)boke
zunmx.fans
df1/df2 df1+df2 转置，累加----*。。。...
zunmx.fans
为何无人评论？OωO

vue+mint-ui 实现时间选择器包含年月日以及上下午

zmx • 2021 年 11 月 12 日

# 引言

# 效果图

![1.png](https://www.zunmx.top/usr/uploads/2021/11/3148825215.png)
![2.png](https://www.zunmx.top/usr/uploads/2021/11/2247516257.png)

# 代码

# 组件代码

```html
<template>
  <div>
        <mt-picker 
          :slots="dataList"  
          style="touch-action: none" 
          @change="onValuesChange"
        ></mt-picker>
  </div>
</template>

<style>

</style>
```

# 父组件部分代码

首先引用这个组件，然后调用

```html
<calendarComp
      @getDateFormatResult="getStartDate"
      v-if="popupVisible1"
      ></calendarComp>
```

```javascript
getStartDate (result, apm) {
      this.applyInfo.startDate = result
      console.log(apm)
    }
```

# 总结

大概就是这样了，因为这个涉及到了公司项目，所以不会贴全部代码，最近疫情在家办公，时间也不太充裕，所以近期更新很慢。

vue+mint-ui 实现时间选择器包含年月日以及上下午

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款了昂。

Typecho 插件开发 ZSecurity

个人空间使用规则[拟定] 23/3/9修订

企业微信-摸鱼必备，避免离开状态

基于Lively wallpaper的壁纸

中公教育CTS视频下载

如何搭建一个乌云镜像站

适用于windows的github hosts 切换工具

[暂时闭源] KMU-Counter 使用情况统计器

FreeMarker 基本技能

Springboot 启动时自动运行某个方法

vue+mint-ui 实现时间选择器包含年月日以及上下午

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款了昂。

vue+mint-ui 实现 时间选择器包含年月日以及上下午

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款了昂。

vue+mint-ui 实现时间选择器包含年月日以及上下午