Download address: 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>
corresponding api
