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

目录

1.引入vant组件库

2.wxml页面

3.js页面

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是控制时间选择器显示隐藏的，通过事件改变

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

效果