需求
- 1、默认当前时间
- 2、选择时间弹窗限制最大值、最小值
- 3、每次弹起更新最大值为当前时间,默认值为上次选中时间
- 4、==
minDate: new Date(2023, 10, 1).getTime()
,也可以传入时间字符串new Date('2023-10-1 12:22').getTime()
==
html
<view class="flex bb ptb-12">
<view><text class="red">* </text>处理时间:</view>
<view class="flex1 size-28" bindtap="chooseTime">
<view class="mr-8">{{ququ2?ququ2:'请选择'}}</view>
<van-icon name="arrow" />
</view>
</view>
<!-- 弹窗 -->
<van-popup show="{{ isShowPop }}" bind:close="onClosePop" position="bottom">
<van-datetime-picker title="处理时间" formatter="{{formatter}}" value="{{ currentDate }}" bind:confirm="confirmPop" bind:cancel="onClosePop" min-date="{{minDate}}" max-date="{{maxDate}}" />
</van-popup>
data
ququ2: '',
isShowPop: false,
currentDate: new Date().getTime(),
minDate: new Date(2023, 10, 1).getTime(), //也可以传入时间字符串new Date('2023-10-1 12:22').getTime()
maxDate: new Date().getTime(),
formatter: function (type, value) {
if (type === 'year') {
return `${value}年`;
} else if (type === 'month') {
return `${value}月`;
} else if (type === 'day') {
return `${value}日`;
} else if (type === 'hour') {
return `${value}时`;
} else if (type === 'minute') {
return `${value}分`;
}
return value;
},
方法
// -----------选择时间弹窗---------
chooseTime() {
this.setData({
maxDate: new Date().getTime(),
// new Date('2023-10-1 12:22').getTime() 回显当前选中的时间,否则显示当前时间
currentDate: this.data.ququ2 ? new Date(this.data.ququ2).getTime() : new Date().getTime(),
isShowPop: true
})
},
confirmPop(e) {
// console.log(e, 'e', this.formatTimestamp(e.detail))
this.setData({
ququ2: this.formatTimestamp(e.detail),
isShowPop: false
})
},
onClosePop() {
this.setData({
isShowPop: false
})
},
// 选中的时间戳处理成 2014-12-23 12:11 格式
formatTimestamp(timestamp) {
var date = new Date(timestamp);
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份是从0开始的,所以需要加1
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
// 格式化时间为字符串
// 确保月和日是两位数
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
return `${year}-${month}-${day} ${hour}:${minute}`;
},
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 微信小程序时间弹窗——年月日时分
发表评论 取消回复