wxml:

<view class="section" >
<picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">
<view class="picker">
国家:{{objectArray[index]}}
</view>
</picker>
</view> <view class="section">
<picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
<view class="picker">
时间 : {{times}}
</view>
</picker>
</view>
<view class="section">
<picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange">
<view class="picker">
日期: {{dates}}
</view>
</picker>
</view>

js:

Page({
data: {
dates: '2016-11-08',
times: '12:00',
objectArray: ['中国', '英国', '美国'],
index: 0,
},
// 点击时间组件确定事件
bindTimeChange: function (e) {
console.log("谁哦按")
this.setData({
times: e.detail.value
})
},
// 点击日期组件确定事件
bindDateChange: function (e) {
console.log(e.detail.value)
this.setData({
dates: e.detail.value
})
},
// 点击城市组件确定事件
bindPickerChange: function (e) {
console.log(e.detail.value)
this.setData({
index: e.detail.value
})
}

微信小程序 选项 、时间日期选择器的更多相关文章

  1. mpvue开发微信小程序之时间+日期选择器

    最近在做微信小程序,技术栈为mpvue+iview weapp组件库. 因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间也是分开的,在简书上 ...

  2. 微信小程序开发之picker选择器组件用法

    picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...

  3. 微信小程序时间戳转为日期格式

    通常后台传递过来的都是时间戳,但是前台展示不能展示时间戳.就需要转化了. 功能说明: 微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项目utils/utils.js中,并注意在js中声明下: ...

  4. [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

    小程序 picker 多列选择器 数据动态获取 需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 t ...

  5. 微信小程序 A~Z城市选择器js文件

    微信小程序城市选择 [a~z] 的所有城市选择 city.js a~z排序的城市数据 addressChoose.js 其他js文件可引用 city.js /** * Created by yvded ...

  6. 小程序地区时间自定义选择器 picker

    进入微信公众平台小程序开发文档搜索 picker 点进去后下滑,点击在开发者工具中预览即可

  7. [BUG]微信小程序ios时间转换

    描述 小程序ios   new Date('2019-08-14T08:00:00.000+0000')   显示为  <Date: null>. '2019-08-14T08:00:00 ...

  8. picker-view、微信小程序自定义时间选择器(非官方)

    picker-view自定义时间选择器 官网的自定义时间选择器比较简陋.日期不准 下面是我自己写的一个demo <view class="baseList"> < ...

  9. 微信小程序中时间转化为时间戳(安卓和苹果兼容性)

    在IOS中时间显示NAN,后来才知道是由于安卓和IOS时间解析时间的时间格式不一致: 在安卓机中2018-06-21 16:00:21 IOS识别的格式是 2018/06/21: 所以在处理IOS机器 ...

随机推荐

  1. Code First 二 DataAnnotation 数据注解

    Code-First中配置域类 我们在前一节学习了默认的代码优先约定.Code-First使用默认约定从您的域类构建概念模型.Code-First利用称为约定而不是配置的编程模式.这意味着您可以通过配 ...

  2. qsort()与sort的用法(收藏)

    sort()函数是C++中的排序函数其头文件为:#include<algorithm>头文件: qsort()是C中的排序函数,其头文件为:#include<stdlib.h> ...

  3. python3爬虫编码问题

    使用爬虫爬取网页经常遇到各种编码问题,因此产生乱码今天折腾了一天,全部总结一遍环境:win10,pycharm,python3.41.首先先来网页编码是utf-8的:以百度首页为例:使用request ...

  4. Struts2+hibernate 结合,实现登陆校验

    完整的项目在github中,数据库使用postgresql,建表语句见项目文档. 下面我分块介绍一下struts2.hibernate.与页面部分的代码. Struts2 UserAction.jav ...

  5. LeetCode 简单 -二进制求和(105)

    给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...

  6. 2018 kali linux install tools

    1.VM setup https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html VMware-Wo ...

  7. BZOJ2298: [HAOI2011]problem a(带权区间覆盖DP)

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1747  Solved: 876[Submit][Status][Discuss] Descripti ...

  8. jQuery表单验证的几种方法

    1.jQuery的框架的验证:validate框架 Jquery Validate 验证规则 (1)required:true 必输字段(2)remote:”check.PHP” 使用ajax方法调用 ...

  9. tomcat安装、配置相关的几个点

    Connector port="8080"HTTP协议的默认端口号:8080 FTP协议的默认端口号:21 1.tomcat的安装目录要与Java jre的安装目录一致. bin: ...

  10. 深入理解@RequestBody注解

    我写文章历来追求通俗易懂,今天来深入探讨一下@RequestBody注解.提起这个,所有做过mvc开发的同学应该都不陌生,使用上面肯定也是信手拈来. 所以我这里就简单的提一下这个注解的使用: 1.当客 ...