2023.06.08 | admin | 182次围观
小程序使用的UI组件库是uview,刚开始就是使用的是uview中日历组件,但这个组件有一个缺点,无法选择当前日期之前的日期,百度了一下,说设置 minDate 和 maxDate ,再设置 monthNum 就可以达到效果。但是设置之后第一次打开是正常的,第二次打开就不正常了,要么会闪一下,然后可选日期才可以选历史日期,要么就只能选未来日期。后面就直接去 hbuilder 插件市场下了一个插件,蛮好用的,分享一下:
方法一:uview组件中的日历
<u-calendar
:show="show"
mode="range"
@confirm="confirm"
@close="close"
rowHeight='120'
:minDate="minDate"
:maxDate="maxDate"
:defaultDate="defaultDates"
:monthNum="12"
:round="20"
allowSameDay
></u-calendar>
虽然选择历史日期有点坑,但是如果没有这个需求,用它选择日期还是蛮舒服的,选择历史日期就算了,还是自己封装或者下载插件吧。
方法二:下载插件
首先 hbuilder 插件市场去下载插件,下载插件的位置会自动在这里小程序地区选择,如图
页面中引用插件
代码:
<template>
<view class="body">
<view class="search">
<view class="date" @click="getDate">
<view class="text">
<text class="date_text" v-if="!start">开始日期</text>
<text v-if="start">{{start}}</text>
<text class="zhi">至</text>
<text class="date_text" v-if="!end">结束日期</text>
<text v-if="end">{{end}}</text>
</view>
<img src="@/static/image/add/icon-date.png">
</view>
<view class="but" @click="submit()">
<text>查询</text>
</view>
</view>
</view>
<date-range
:mode="viewMode"
:showMutibleDate="showMutibleDate"
:startDate="startDate"
:endDate="endDate" @onSelected="dateSelected"></date-range>
</view>
</template>
<script>
import moment from "moment"
import dateRange from '@/components/zxp-datepickerRange/zxp-datepickerRange.vue'
export default {
components: {
dateRange
},
data() {
return {
endDate:moment().format('YYYY/MM/DD'), // 默认结束时间 YYYY/MM/DD
startDate:moment().format('YYYY/MM/DD'), // 默认开始时间 YYYY/MM/DD
showMutibleDate: false,
viewMode: 'date',
dateValue: '',
timeValue: ''
};
},
mounted() {
},
methods: {
dateSelected(e) {
if (e) {
let start = e.start
let end = e.end
this.startDate = start,
this.endDate = end
this.start = moment(start).format('YYYY/MM/DD');
this.end = moment(end).format('YYYY/MM/DD');
}
this.showMutibleDate = false
},
// 打开时间选择器
getDate(){
this.viewMode = 'date'
this.showMutibleDate = true
},
// 查询
submit(){
console.log('查询结果')
}
},
}
</script>
<
效果图:
插件里我调了一些样式和判断小程序地区选择,如z-index、弹出框的高度、开始日期和结束日期比较大小的校验。这个可根据自己的需求进行一些小改动。
插件地址:
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论