date range

pages/home/importFile.vue

@@ -6,22 +6,81 @@
 		<view class="jisuanqi" @click="exportExcel" style="margin-top:100rpx;">
 			 导出
 		</view>
+		<view class="jisuanqi" @click="showCalendar=true" style="margin-top:100rpx;">
+			 选择日期
+		</view>
+		
+		  <view class="content-confirm" style="margin-top:100rpx;">
+		        日期选择{{searchDate}}
+		       <!-- <calendar-select v-model="showCalendar"
+		        maxDate="2021-6-20"
+		        :addOrRemoveData="addOrRemoveData"
+		        mode="range"
+		        :altPrice="dataPrice"
+		        @change="changeDate"></calendar-select>
+				 
+				 -->
+				 
+				 <button @click="open">打开弹窗</button>
+				 		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
+							<miku-calendar
+							         :calendarBg="'#fff'"
+							         :dateRange="[new Date('2024/02/01').getTime(),new Date('2024/02/27').getTime()]"
+							         :dateRangeMax="365"
+							         @dateRangeMaxDeal="dateRangeMaxDeal"
+							         mode='dateRange'
+							         :showArrow="true"
+							         themeColor="rgb(100,124,203)"
+							         arrowColor="rgb(100,124,203)"
+							         @confirm = "calendarConfirm"
+							     ></miku-calendar>
+							
+							
+						</uni-popup>
+				 
+				  
+		    </view>
+			
 		<!-- <web-view :src="localUrl" @message="handlePostMessage"></web-view> -->
 	</view>
 </template>
 <script>
 	import * as XLSX from '@/common/excel.js'
+	  import CalendarSelect from '@/components/calendar-select/calendar-select.vue'
+	  import mikuCalendar from "@/components/miku-calendar/mikuCalendar.vue"
 	var that;
 	export default {
+	    components: {
+			CalendarSelect,
+			mikuCalendar
+		},
 		data() {
 			return {
+				searchDate: '',
+				 date: new Date('2023/09/20').getTime(),
 				title: "app端导出excel",
 				successTip: "",
 				// localUrl: '../../hybrid/html/local.html' // 本地页面的 URL
 				localUrl: 'http://www.minestar.cn/index.html', // 本地页面的 URL
 				excelList:[{
 					'ctime':22, 'payname':22, 'remark':22,'typename':22,'type':22,'money':22
-				}]  //接口提供数据
+				}],  //接口提供数据
+				 showCalendar: false,
+				dataPrice: [ // 日历上的价格
+					{
+						date: '2021-4-23',
+						price: 98
+					},
+					{
+						date: '2021-4-28',
+						price: 108
+					},
+					{
+						date: '2021-4-29',
+						price: 98
+					}
+				],
+				addOrRemoveData: ['2021-04-23', '2021-04-27']
 			}
 		},
 		onLoad() {
@@ -29,6 +88,27 @@
 			    // this.localUrl = `/hybrid/html/local.html`;
 		},
 		methods: {
+			open(){
+			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
+			        this.$refs.popup.open('center')
+			      },
+			 calendarConfirm(e){
+			            console.log(e)
+						const formattedDates = e.map(date => date.split(' ')[0]);
+						this.searchDate = formattedDates
+						 this.$refs.popup.close()
+			        },
+			        dateRangeMaxDeal(e){
+			            console.log('超过最大连选天数：',e)
+			        },
+			        dateChange(day){
+			            this.date = day
+			        },
+			// 获取选中的日期
+			changeDate(data) {
+				console.log(data)
+				
+			},
 			uploadExcel(){
 				// wx.miniapp.chooseFile({
 				//     success(res) {
@@ -136,4 +216,11 @@
 			},
 		}
 	}
-</script>
\ No newline at end of file
+</script>
+<style>
+	::v-deep .uni-popup .uni-popup__wrapper{
+	    display: block;
+	    position: relative;
+	    width: 80vw;
+	}
+</style>
\ No newline at end of file