The function logic of the pop-up time selection box of the applet

train of thought

1 , first go to the vant applet library to find the pop-up layer--Popup pop-up layer (link)

Then set up the basic structure

<van-popup show="{
   
   { show }}">内容</van-popup>

Two commonly used properties

Where show is: the property that controls opening and closing,

bind:close is: an event that occurs when it is closed

2. Go to the vant applet library to find the time selection --DatetimePicker time selection (time selection)

Then put the structure of the time selection into the pop-up layer so that the pop-up layer wraps the time selection when it pops up

这是弹出层
<van-popup show="{
   
   { show }}">
这是时间选择
<van-datetime-picker
  type="datetime"
  value="{
   
   { currentDate }}"
  min-date="{
   
   { minDate }}"
  max-date="{
   
   { maxDate }}"
  bind:input="onInput"
/>
</van-popup>

common attributes

(1) value The currently selected value

(2) type is the type displayed when opening the time selection. For example, if you want to display the year, month, and day, let type=" date "

(3) Event: bind:confirm (triggered when click complete)

(4) Event: bind:cancel (triggered when cancel is clicked)

bind:confirm="dateConfirm"  完成事件

dateConfirm(ev) { 这是点击确定的点击事件它里面有参数包括你在事件选择中选中了什么什么时间

    this.setData({将我们选中的数据保存到data中方便后期渲染

      visitDate: wx.utils.formatDate(ev.detail),  转换后的年月日

      currentDate: ev.detail,  

      dateLayerVisible: false, 弹出层控制
    })
  },

Among them, detail is the time, but it needs to be converted into year, month and day

The conversion method can be encapsulated and called directly when used globally

写在utils文件夹中的 utils.js文件中的全局 转换时间
只需要调用时 将值传入其中就可以实现 年月日转换

/* 封装了一个 时间转换的方法 */
  formatDate(timestamp) {
    const date = new Date(timestamp)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    return [year, month, day].map((item) => item.toString().padStart(2, '0')).join('/')
  },

 

How to display the time in the corresponding frame after clicking Confirm

There is a value in van-cell, so the value of value is equal to the value of visitData saved in data.

Remember to close the pop-up layer display after clicking OK! !