目錄

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是控制時間選擇器顯示隱藏的，通過事件改變

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

效果

?

?文章來源地址http://www.zghlxwxcb.cn/news/detail-583375.html

到了這里，關于微信小程序使用vant時間選擇器二次封裝成自定義區(qū)間時間選擇的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！