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

这篇具有很好参考价值的文章主要介绍了微信小程序使用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 包

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

 5.引入时间选择器组件

app.jsonindex.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时间选择器二次封装成自定义区间时间选择,微信小程序,小程序

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

 微信小程序使用vant时间选择器二次封装成自定义区间时间选择,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-583375.html

到了这里,关于微信小程序使用vant时间选择器二次封装成自定义区间时间选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序中vant-weapp时间选择使用方法

    一、选择单个时间点: wxml: json: js: 如图所示,时间只能选一天: 二、当选择两个时间点时 wxml: js部分: 如图所示,时间是呈现区间状态,两个时间点: 每天学一点,慢慢进步,不要浮躁!

    2024年02月15日
    浏览(57)
  • 微信小程序多列选择器实现日期+时间的选择

    2.实现原理   3.实现代码 自定义range数组:

    2024年02月16日
    浏览(55)
  • 微信小程序使用vant时报警告

     [Component] property \\\"value\\\" of \\\"miniprogram_npm/@vant/weapp/field/index\\\" received type-uncompatible value: expected String but get null value. Use empty string instead.  这个问题大概率是vant组自己的问题 降低微信开发者工具版本 降低到2.18.1之前的版本 这个问题是2.18.1时出现的    

    2024年02月12日
    浏览(52)
  • 微信小程序原生写法——24小时时间选择器组件

    使用picker-view来封装成的一个时间选择器 开始时间是当前时间的一个小时之后,秒默认是0秒 可能还有一些情况未处理,后续发现再更新 js文件 第一版:略繁琐 第二版js文件:根据当前时间的时间戳A与24小时之后的时间戳B两者来进行处理获取对应的列表 json文件 wxml文件 wxs

    2024年02月04日
    浏览(63)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(74)
  • 微信小程序Vant组件配置及使用

    Vant Weapp 官网文档:介绍 - Vant Weapp (gitee.io) Vant Weapp GitHub地址:youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com) 本教程使用下载代码方式引入vant组件 通过git下载vant源码 将vant源码路径下的 dist 文件夹复制到微信小程序项目中 将 app.json 下的 \\\"style\\\": \\\"v2\\\" 去除,微信小程序

    2024年02月13日
    浏览(78)
  • 微信小程序 - 日期时间选择器(年月日时分秒)

    您只需要跟着步骤一路复制粘贴,最后看一下使用示例即可。 由于微信官方的 picker 组件不支持同时选择年月日时分, 所以 在此官方组件上再次封装 ,可靠性毋庸置疑。 您将获得一个可选择 年月日时分 / 年月日时分秒 日期选择器组件, 您可以通过一个属性来自由切换要不

    2024年02月10日
    浏览(55)
  • 在微信小程序中怎么使用vant框架?

    Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所

    2024年02月10日
    浏览(65)
  • 微信小程序中使用vant组件库(超详细)

    Vant是一个轻量、可靠的移动端组件库,于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 微信小程序版本的Vant组件库是 Vant Weapp ,其官方文档是 https://youzan.github.io/vant-weapp/#/home 我们废话不多说,直

    2024年02月02日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包