当前位置: 首页 > article >正文

微信小程序date picker的一些说明

微信小程序的picker是一个功能强大的组件,它可以是一个普通选择器,也可以是多项选择器,也可以是时间、日期、省市区选择器。

官方文档在这里

这里讲一下date picker的用法。

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
bindDateChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  }

这里的mode选择为“date”,这个时间格式一般是“2025-01-24”这样的格式。
实际从bindDateChange中拿到的“e.detail.value”的值包含了年月日,但是具体的格式跟收集系统设置相关。
"start"和"end"指定了时间限定的日期。

date picker

这里还有一个参数"fields",可以选择year, month和day。

如果选择"day", 那么选择框里面可以选择年、月和日了,而且从bindDateChange中拿到的“e.detail.value”的值包含了年月日,跟默认是一样的。

如果选择"year", 那么选择框里面只能选择年份了,而且从bindDateChange中拿到的“e.detail.value”的值只包含了年,没有其他信息了。

<view class="container">
  <picker mode="date" fields="year" value="{{date}}" bindchange="bindDateChange">
    {{date}}
  </picker>
</view>

year

如果选择"month", 那么选择框里面可以选择年和月份了,而且从bindDateChange中拿到的“e.detail.value”的值包含了年和月。

<view class="container">
  <picker mode="date" fields="month" value="{{date}}" bindchange="bindDateChange">
    {{date}}
  </picker>
</view>

month


http://www.kler.cn/a/517515.html

相关文章:

  • 侧边导航(Semi Design)
  • (Halcon)轮廓等分切割(项目分析)
  • 关于 SR-IOV 架构论文的总结文章
  • kotlin 简介
  • 【前端SEO】使用Vue.js + Nuxt 框架构建服务端渲染 (SSR) 应用满足SEO需求
  • Linux 常用命令——系统设置篇(保姆级说明)
  • C++实现设计模式---职责链模式 (Chain of Responsibility)
  • Python结构
  • CMake函数参数
  • 前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表 (To-Do List)
  • MUSE: PARALLEL MULTI-SCALE ATTENTION FOR SEQUENCE TO SEQUENCE LEARNING 笔记
  • Go语言中变量在栈和堆上分配情况分析
  • 论文:深度可分离神经网络存内计算处理芯片
  • [MySQL]数据库表内容的增删查改操作大全
  • Word 中实现方框内点击自动打 √ ☑
  • -bash: ./uninstall.command: /bin/sh^M: 坏的解释器: 没有那个文件或目录
  • Kotlin泛型学习篇
  • 机器学习-线性回归(参数估计之经验风险最小化)
  • Hive之加载csv格式数据到hive
  • 设计模式的艺术-命令模式
  • 嵌入式知识点总结 ARM体系与架构 专题提升(四)-编程
  • 【Java】阿里云OSS上传、删除文件
  • git基础使用命令
  • YOLOv10-1.1部分代码阅读笔记-val.py
  • 《罗宾逊-旅途VR》Build2108907官方学习版
  • Oracle 机器宕机之后启动数据库