小程序中年月日+日期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
    });
  },
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值