小程序中年月日+日期vant组件弹窗

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
    });
  },