https://ext.dcloud.net.cn/plugin?id=12562
日期选择组件
有四种模式:
简单的年月日弹窗选择(mode=“simple”)
日历弹窗选择多个日期(多选)(mode=“multiple”)
日历弹窗选择单个日期(单选)(mode=“single”)
日历弹窗选择区间日期(区间)(mode=“range”)
示例代码vue3
<template>
<view>
<next-date-picker
ref="nextDatePickerRef"
:mode="mode"
:isAbleSelectFutureDate="false"
:defaultDate="dateModel"
@finishSelectDate="finishSelectDate"
:defaultCheckedList="[]">
</next-date-picker>
<view style="margin-top: 48rpx;">
<view @click="show('simple')" class="btn">简单选择模式</view>
<view @click="show('range')" class="btn">日历区间模式</view>
<view @click="show('multiple')" class="btn">日历多选模式</view>
<view @click="show('single')" class="btn">日历单选模式</view>
</view>
</view>
</template>
<script>
import {ref, unref} from 'vue'
export default {
setup() {
const mode = ref('simple');
const nextDatePickerRef = ref();
function show(showType) {
mode.value = showType;
nextDatePickerRef.value.open();
}
function finishSelectDate(e) {
console.log("选择了日期:",e);
}
const dateModel = ref('2023-5-11')
return {
mode,
show,
finishSelectDate,
nextDatePickerRef,
dateModel
}
}
}
</script>
<style lang="scss">
.btn{
width: 600rpx;
margin-left: 74rpx;
margin-right: 74rpx;
text-align: center;
padding: 12rpx;
background-color: #e49a30;
color: aliceblue;
border-radius: 12rpx;
margin-top: 24rpx;
}
</style>