微信控件使用文档

飞道科技

van-datetime-picker

  1. 1. 使用效果
  2. 2. 使用方法
  3. 3. 属性
  4. 4.方法
    1. getValues()
    2. getColumnValue()
    3. setColumnValue()
    4. getColumnValues()
    5. setColumnValues()
    6. setValues()
  5. 5.事件
    1. confirm
    2. cancel
    3. change
    4. input

小程序自定义组件

使用此组件需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

1. 使用效果

使用示例

2. 使用方法

  1. 安装 小程序控件widgets-wxapp

     npm install @dfeidao/widgets-wxapp

  2. 在需要使用 van-datetime-picker 的页面 page.json 中添加 van-datetime-picker 自定义组件配置

     {
     "usingComponents": {
         "van-datetime-picker": "@dfeidao/widgets-wxapp/fd-wx000008/index"
     }
 }

  3. WXML 文件中引用 van-datetime-picker

     // 选择完整时间
 <van-datetime-picker type="datetime" value="2019-03-18" bind:change="onChange" />
 // 选择日期（年月日）
 <van-datetime-picker type="date" value="2019-03-18" bind:change="onChange" />
 // 选择日期（年月）
 <van-datetime-picker type="year-month" value="2019-03-18" bind:change="onChange" />
 // 选择时间
 <van-datetime-picker type="time" value="2019-03-18" bind:change="onChange" />

3. 属性

属性名 类型 默认值 是否必须 说明  
value String Number 无 否 当前选中值
type String datetime 是 类型，可选值为 date time year-month 不建议动态修改  
min-date Number 十年前 否 可选的最小时间，精确到分钟  
max-date Number 十年后 否 可选的最大时间，精确到分钟  
min-hour Number 0 否 可选的最小小时，针对 time 类型  
max-hour Number 23 否 可选的最大小时，针对 time 类型  
min-minute Number 0 否 可选的最小分钟，针对 time 类型  
max-minute Number 59 否 可选的最大分钟，针对 time 类型  
title String ’’ 否 顶部栏标题  
show-toolbar Boolean false 否 是否显示顶部栏  
loading Boolean false 否 是否显示加载状态  
item-height Number 44 否 选项高度  
confirm-button-text String 确认 否 确认按钮文字  
cancel-button-text String 取消 否 取消按钮文字  
visible-item-count Number 5 否 可见的选项个数  

4.方法

getValues()

获取所有列中被选中的值，返回一个数组

返回值 string[]

使用示例：

wxml

<van-datetime-picker class="class_name" type="datetime" bind:change="onChange" />

ts

import select_component from '@dfeidao/atom-wxapp/api/xml/select-component';

const widget = select_component(fd, '.class_name');
// const widget = select_component(fd, '#id');
const value = widget.getValues();

getColumnValue()

获取对应列中选中的值

参数:

  1. index 第几列的索引

使用示例:

wxml

<van-datetime-picker class="class_name" type="datetime" bind:change="onChange" />

ts

import select_component from '@dfeidao/atom-wxapp/api/xml/select-component';

const widget = select_component(fd, '.class_name');
// const widget = select_component(fd, '#id');
widget.getColumnValue(1);

setColumnValue()

获取所有列选中值对应的索引

参数:

  1. index 要选中的列

  2. value 要选中的内容

getColumnValues()

设置所有列选中值对应的索引

参数:

  1. indexes 要获取的列

setColumnValues()

获取对应列选中的值

参数:

  1. index 要修改的列

  2. values 修改后的所有值

setValues()

设置对应列选中的值

参数:

  1. values 所有列要选中的值

5.事件

confirm

点击完成按钮时触发的事件

const time = args.detail; time 当前选中的时间戳

cancel

点击取消按钮时触发的事件

change

当值变化时触发的事件

const picker = args.detail; picker 方法集合

input

当值变化时触发的事件

const time = args.detail; time 当前选中的时间戳