切换日期选择，可按月/按日

最新推荐文章于 2024-04-22 16:56:50 发布

金啊琦啊

最新推荐文章于 2024-04-22 16:56:50 发布

阅读量226

点赞数

分类专栏： js vue 日期时间

本文链接：https://blog.csdn.net/jinjina_/article/details/120045329

版权

Vue.js 日期选择器组件交互事件处理动态显示

关键词由CSDN通过智能技术生成

js 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

日期时间

2 篇文章 0 订阅

订阅专栏

切换日期选择，可按月/按日，根据自身修改

如下图所示
在这里插入图片描述
代码如下：
父页面

//html
<view class="content_row_next">
		<text @click="getTime(1)">{{StatisticsCurrent==0?SStartSearchDate.substr(0,7):SStartSearchDate}}</text>
		<image src="/static/ic_showOther_contat.png" v-if="StatisticsCurrent==1"></image>
		<text @click="getTime(2)" v-if="StatisticsCurrent==1">{{SEndSearchDate}}</text>
</view>
//使用一个子组件的话，防止日期串，可设置不同的ref,进行区别
<cwDatePicker :current="current" @sonFlagMsg="sonPipkerFlag" @onCancel="onCancel" @onConfirm="onStartConfirm"
			:startDate="from_startDefaultDate" :endDate="from_endDefaultDate" :defaultValue="startSearchDate"
			ref="cwDatePicker">
		</cwDatePicker>
		<cwDatePicker :current="current" @sonTFlagMsg="sonTPipkerFlag" @onCancel="onCancel" @onConfirm="onEndConfirm"
			:startDate="to_startDefaultDate" :endDate="to_endDefaultDate" :defaultValue="endSearchDate"
			v-if="current==1" ref="dyptDatePicker">
		</cwDatePicker>
//js
getTime: function(e) {
    if (e == 1) {
			this.$refs.cwDatePicker.show();
	} else if (e == 2) {
			this.$refs.dyptDatePicker.show();
	} 
},

日期子组件，参考另一篇
https://blog.csdn.net/jinjina_/article/details/120045499