微信小程序使用vant时间选择器二次封装成自定义区间时间选择

1.引入vant组件库

1.安装vant

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

2.将 app.json 中的 "style": "v2" 去除

3.在 project.config.json 里面的 "setting":{ } 里面添加下面的代码
"packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],
4.构建 npm 包

5.引入时间选择器组件

在app.json或index.json中引入组件，
"usingComponents": {
  "van-datetime-picker": "@vant/weapp/datetime-picker/index"
}

2.wxml页面

showtime是控制时间选择器显示隐藏的，通过事件改变

<van-popup show="{
   
   { showtime }}" position="bottom" custom-style="height: 60%" bind:close="hidetime" >
  <van-datetime-picker wx:if="{
   
   {times}}" type="date" title="开始时间" confirm-button-text="下一步" value="{
   
   { currentDate }}" bind:confirm="startconfirm" bind:cancel="startcancel" />
  <van-datetime-picker wx:else type="date" title="结束时间" value="{
   
   { currentDate }}" bind:confirm="endconfirm" min-date="{
   
   {mindate}}" bind:cancel="endtcancel" />
</van-popup>

3.js页面

引入时间转换方法

const util = require('../../utils/util.js')

时间转换方法在utils里面写的

// 这里的date是传入的中国标准时间格式进行转换
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  formatTime
}

js页面

// 初始值
data: {
    // 今天日期
    currentDate: new Date().getTime(),
    结束日期的开始时间
    mindate: "",
    //自定义时间开始/结束切换
    times: true, 
    // 打开自定义时间
    showtime: false,
    // 开始时间
    start_time: "",
    // 结束时间
    end_time: "",
    }

// 方法
// 关闭自定义时间
  hidetime(e) {
    this.setData({
      showtime: false
    })
  },
  // 选择自定义开始时间
  // 确认
  startconfirm(e) {
    // console.log(util.formatTime(new Date(e.detail)).split(" ")[0]);
    this.setData({
      start_time: util.formatTime(new Date(e.detail)).split(" ")[0],
      currentDate: e.detail,
      mindate: e.detail,
      times: false,
    })
  },
  // 取消
  startcancel() {
    this.setData({
      currentDate: new Date().getTime(),
      showcustomtime: false
    })
  },
  // 选择自定义结束时间
  // 确认
  endconfirm(e) {
    // console.log(util.formatTime(new Date(e.detail)).split(" ")[0]);
    this.setData({
      currentDate: new Date().getTime(),
      end_time: util.formatTime(new Date(e.detail)).split(" ")[0],
      showcustomtime: false,
      times: true
    })
    this.getindexList(this.data.branchid, this.data.staffid, this.data.start_time, this.data.end_time)
  },
  // 取消
  endtcancel() {
    this.setData({
      times: true
    })
  },

效果

微信小程序使用vant时间选择器二次封装成自定义区间时间选择

1.引入vant组件库

2.wxml页面

3.js页面

猜你喜欢