1、wxml中
日期和时间分别获得
<!-- 截止时间 -->
<view class="release_subtitle">截止时间</view>
<view class="releasView">
<input class="release_input" disabled placeholder="选择年月日" bindtap="showModal" value="{{checkedDate}}" data-modalType="dateShow" />
<input class="release_input" disabled placeholder="选择时间" bindtap="showModal" value="{{checkedTime}}" data-modalType="timeShow" />
</view>
日历弹窗
<!-- ====== 年月日弹窗 start====== -->
<van-action-sheet show="{{dateShow}}" bind:click-overlay="closeModal" data-modalType="dateShow">
<view class="modal-content">
<!-- 日期选择 -->
<van-datetime-picker type="date" title="选择年月日" value="" bind:cancel="closeDateModal" bind:confirm="selectDate" formatter="{{ formatter }}" />
</view>
</van-action-sheet>
<!-- ====== 年月日弹窗 end====== -->
<!-- ====== 时间弹窗 start====== -->
<van-action-sheet show="{{timeShow}}" bind:click-overlay="closeModal" data-modalType="timeShow">
<view class="modal-content">
<!-- 时间选择 -->
<van-datetime-picker type="time" title="选择时间" value="{{checkedTime}}" bind:cancel="closeTimeModal" bind:confirm="selectTime" formatter="{{ formatter }}" />
</view>
</van-action-sheet>
<!-- ====== 时间弹窗 end====== -->
2、data中数据
//年月日
checkedDate: '',//选中的年月日
//时间
checkedTime: '',//选中的时间
formatter(type, value) {//日历弹窗中日历和时间的格式
if (type === 'year') {
return `${value}年`;
}
if (type === 'month') {
return `${value}月`;
}
if (type === 'day') {
return `${value}日`;
}
if (type === 'hour') {
return `${value}时`;
}
if (type === 'minute') {
return `${value}秒`;
}
return value;
},
3、js中
js中引入格式化方法文件
const utils = require('../../utils/util.js')
/*
*@Description: 选择年月日
*@MethodAuthor: LiJuncai
*@Date: 2022-06-10 18:08:23
*/
selectDate(val) {
let date = utils.formatDate(val.detail)//调用公用js中的formatDate方法把日期格式话
this.setData({
checkedDate: date,
dateShow: false
});
},
/*
*@Description: 关闭年月日弹窗
*@MethodAuthor: LiJuncai
*@Date: 2022-06-10 18:36:59
*/
closeDateModal() {
this.setData({
dateShow: false
});
},
/*
*@Description: 选择时间
*@MethodAuthor: LiJuncai
*@Date: 2022-06-10 18:08:23
*/
selectTime(val) {
console.log(val.detail);
this.setData({
checkedTime: val.detail,
timeShow: false
});
},
/*
*@Description: 关闭时间弹窗
*@MethodAuthor: LiJuncai
*@Date: 2022-06-10 18:57:51
*/
closeTimeModal() {
this.setData({
timeShow: false
});
},