uni-calendar uniapp日历组件使用

大吉大利的卦象

已于 2023-02-27 15:05:19 修改

阅读量3k

点赞数 1

分类专栏：小程序文章标签： uni-app javascript 前端

于 2023-02-20 09:54:13 首次发布

本文链接：https://blog.csdn.net/weixin_44949068/article/details/129118795

版权

小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

下载地址：uni-calendar

<template>
  <view class="popcont">
    <uni-calendar 
      :insert="true"
      :selected="dateArr"
      @change="change"
      :clearDate="true"
    />
    <view class="button"  @click="getSelectDate">请选择时间</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        dateArr: [{date: '2023-02-18', info: '320个'}],
        currentDate: ''
      }
		},
		onLoad() {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      this.currentDate = yy + "-" + mm + "-" + dd
    },
		methods: {
      open(){
          this.$refs.calendar.open();
      },
      confirm(e) {
          console.log(e);
      },
      change(e){
        this.currentDate = e.fulldate
        console.log(e)
      },
      getSelectDate(){
        console.log(this.currentDate);
      }
    }
	}
</script>

<style>
.btn {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid #ccc;
}
.uni-calendar-item__weeks-box-circle {
  display: none;
}
.uni-calendar-item__weeks-lunar-text {
  font-size: 10px !important;
  color: #2471d3 !important;
}
.uni-calendar-item--checked,.uni-calendar-item--isDay {
  color: #ffffff !important;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  margin: 0 5px;
  border-radius: 5px;
  background-color: #2471d3;
  color: #fff;
  font-size: 12px;
}
</style>