最近在做微信小程序,技术栈为mpvue+iview weapp组件库。

因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间也是分开的,在简书上看到一位老哥用小程序官方的多列选择器在小程序上实现了日期+时间选择。

于是借鉴老哥的代码,换成了vue的写法,简单粗暴,用mpvue的小伙伴可以了解一下。闰年平年等细节问题有精力的小伙伴自己去搞。

<template>
<div>
<picker mode="multiSelector" @change="bindMultiPickerChange" :value="multiIndex" :range="newMultiArray">
<span>当前时间:{{time}}</span>
</picker>
</div>
</template> <script>
export default {
data() {
return {
time: "",
multiArray: [],
multiIndex: [0, 0, 0, 0, 0]
};
},
computed: {
newMultiArray: () => {
let array = [];
const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = []; for (let i = 2018; i <= date.getFullYear() + 10; i++) {
years.push("" + i);
}
array.push(years); for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i);
}
array.push(months); for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i);
}
array.push(days); for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
}
array.push(hours); for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i);
}
array.push(minutes);
return array;
}
},
methods: {
//获取时间日期
bindMultiPickerChange(e) {
this.multiIndex = e.target.value;
console.log("当前选择的时间", this.multiIndex);
const index = this.multiIndex;
const year = this.newMultiArray[0][index[0]];
const month = this.newMultiArray[1][index[1]];
const day = this.newMultiArray[2][index[2]];
const hour = this.newMultiArray[3][index[3]];
const minute = this.newMultiArray[4][index[4]];
this.time = year + "-" + month + "-" + day + " " + hour + ":" + minute;
}
}
};
</script> <style lang="less" scoped>
</style>

原文链接:微信小程序之picker选择器实现时间日期的选择

这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头


那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~

扫二维码加为好友就完事了!安排~

mpvue开发微信小程序之时间+日期选择器的更多相关文章

  1. mpvue开发微信小程序,分享按钮报错:`Cannot read property 'apply' of null`

    用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...

  2. 使用mpvue开发微信小程序

    更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程 ...

  3. 利用mpvue开发微信小程序

    最近公司部门负责人提出需求需要开发一款微信小程序,由于本人之前是做前端开发的,对于小程序开发一窍不通,但是很多时候我们都是把不会做变成我会学.于是便在网上寻找小程序开发教程,相比于相生的小程序开发,本 ...

  4. mpvue开发微信小程序

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  5. mpvue 开发微信小程序搭建项目

    首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...

  6. mpvue开发微信小程序之picker

    微信使用picker组件,bingchange 换成@change即可使用监听函数和方法 此处注意与微信多了一个mp的信息才能获取到选中的值. 获取当前日期+时间 function formatTim ...

  7. mpvue 应用 Vant Weapp框架开发微信小程序

    今天在使用mpvue开发微信小程序的过程中需要实现一个底部上拉选择列表的功能,因为之前做过H5微信公众号的开发,使用的就是有赞的Vant-ui,所以第一时间就想到了有赞的Vant Weapp UI框架 ...

  8. mpvue体验微信小程序开发

    微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用 ...

  9. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

随机推荐

  1. php的 '1' == 1, 返回true,到底是谁变成了谁?

    此过程为字符串的 '1' 隐含的编程了数字类型1,所以是true

  2. Flask 入门(八)

    flask操作数据库:操作数据: 承接上文: 修改main.py中的代码如下: #encoding:utf-8 from flask_sqlalchemy import SQLAlchemy from ...

  3. 【django基础】django接口 异步ajax请求 导出数据库成excel表(包裹前端后端)

    py文件: from django.utils.http import urlquote from rest_framework.views import APIView from django.sh ...

  4. 微信小程序页面通信

    目录 微信小程序页面通信 方式一:通过URL 方式二:通过全局变量 方式三:通过本地存储 方式四:通过路由栈 微信小程序页面通信 方式一:通过URL // A 页面 wx.navigateTo({ u ...

  5. Fiddler实战之拟2G、3G、4G网络进行弱网测试

    至于fidder网络代理设置就不多说了 模拟网速: 1.启动Fiddler,打开菜单栏Rules---Performances---Simulate Modem Speeds这里打开了模拟调节速度 2 ...

  6. C++_编程前奏

    计算机硬件系统 计算机操作系统的五大组成部分 计算机操作系统的组成部分 构成 控制器 指令寄存器(IR)/程序计数器(PC)/操作控制器(OC) 运算器 算数逻辑单元/累加器/状态寄存器/通用寄存器 ...

  7. 【python实现卷积神经网络】激活层实现

    代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...

  8. input相关

    input相关 在ios中输入英文首字母默认大写取消方法 <input autocapitalize="off" autocorrect="off" /& ...

  9. CSS两种盒子模型:cntent-box和border-box

    cntent-box 平时普通盒子模型,padding,border盒子会变大,向外扩展border-box 特殊盒子模型,padding,border盒子会变大,向内扩展

  10. unity使用Animator做一个简单的动画

    1.在unity的物体上添加Animator组件 2.在Project下的Assets下添加Animator Controller 3.在Animator Controller添加动作 4.在动作之间 ...