Skip to content

Latest commit

 

History

History
365 lines (317 loc) · 10.2 KB

README.EN.md

File metadata and controls

365 lines (317 loc) · 10.2 KB
Raw

wx-datetime-picker

A Datetime Picker based on Wechat Miniprogram's native MultiSelector Picker. Used to select time, support date and time dimensions.

Install

npm

Before using npm, please checkout the npm surpport for Wechat Miniprogram.

# install via npm
npm i wx-datetime-picker -S --production

Build npm package

Click the menu bar in Weixin DevTools, and go to Tools > Build npm, then check the Use npm module option. The npm package can be used once built.

Usage

Declare Component

Declare at app.json for global usage

{
  "usingComponents": {
    "datetime-picker": "wx-datetime-picker/index"
  }
}

Declare at page.json for side usage

{
  "usingComponents": {
    "datetime-picker": "wx-datetime-picker/index"
  }
}

Using Component

<datetime-picker
  box-class="custom-class"
  min="{{min}}"
  max="{{max}}"
  fields="{{fields}}"
  value="{{value}}"
  disabled="{{disabled}}"
>
  <text>Choose Datetime</text>
</datetime-picker>

Example

Basic Usage

<datetime-picker
  box-class="cell"
  value="{{value}}"
  bindchange="setValue"
>
  <view class="cell-title">Choose Datetime</view>
  <view class="cell-value">{{value}}</view>
</datetime-picker>

Disabled Selection

<datetime-picker
  box-class="cell"
  value="{{value}}"
  bindchange="setValue"
  disabled
>
  <view class="cell-title">Choose Datetime</view>
  <view class="cell-value">{{value}}</view>
</datetime-picker>

Custom Valid Range

<datetime-picker
  box-class="cell"
  min="{{min}}"
  max="{{max}}"
  value="{{value}}"
  bindchange="setValue"
>
  <view class="cell-title">Choose Datetime</view>
  <view class="cell-value">{{value}}</view>
</datetime-picker>

Choose Year-Month-Day

<datetime-picker
  box-class="cell"
  value="{{value}}"
  bindchange="setValue"
  fields="day"
>
  <view class="cell-title">Choose Year-Month-Day</view>
  <view class="cell-value">{{value}}</view>
</datetime-picker>

Choose Year-Month

<datetime-picker
  box-class="cell"
  value="{{value}}"
  bindchange="setValue"
  fields="month"
>
  <view class="cell-title">Choose Year-Month</view>
  <view class="cell-value">{{value}}</view>
</datetime-picker>

Choose Year-Month-Day Hour

<datetime-picker
  box-class="cell"
  value="{{value}}"
  bindchange="setValue"
  fields="hour"
>
  <view class="cell-title">Choose Year-Month-Day Hour</view>
  <view class="cell-value">{{value}}</view>
</datetime-picker>

Choose Year-Month-Day Hour:Minute

<datetime-picker
  box-class="cell"
  value="{{value}}"
  bindchange="setValue"
  fields="minute"
>
  <view class="cell-title">Choose Year-Month-Day Hour:Minute</view>
  <view class="cell-value">{{value}}</view>
</datetime-picker>

Nested Style

<datetime-picker
  box-class="picker"
  value="{{value}}"
  mode="picker-view"
  bindchange="setValue"
/>

API

Props

Attribute Type Description Default
mode 'picker'|'picker-view' How the component place in page picker
min string The min of the valid date range, any valid Date string 1900-01-01 00:00:00
max string The max of the valid date range, any valid Date string 2099-12-31 23:59:59
value string The selected datetime, any valid Date string -
fields 'year'|'month'|'day'|'hour'|'minute'|'second' The granularity of the picker minute
disabled boolean Specifies whether to disable the component false
headerText string Selector Title, available for Android only 
  •                 |

Events

Event Description Arguments
column Triggered when the column changes (available when mode is picker only) Changed column and its value
change Triggered when the value is changed Changed value
cancel Triggered when selection is canceled (available when mode is picker only) -

External Classes

Class Description
box-class ClassName of the root node (<picker /> or <picker-view />)
indicator-class ClassName of the checkbox in the picker (available when mode is picker-view only)
mask-class ClassName of the mask in the picker (available when mode is picker-view only)
column-class ClassName of every column in the picker (available when mode is picker-view only)
unit-class ClassName of every unit in columns (available when mode is picker-view only)

Demo

Clone this repo, Run npm i & npm run dev. Import miniprogram_dev to Wechat Developer Tool.

Sample Preview

demo.png

Sample Code

<!-- index.html -->
<view class="container">
  <view class="label">基础用法</view>
  <datetime-picker
    box-class="cell"
    value="{{value}}"
    bindchange="setValue"
    data-field="value"
  >
    <view class="cell-title">选择时间日期</view>
    <view class="cell-value">{{value}}</view>
  </datetime-picker>
  <datetime-picker
    box-class="cell cell-disabled"
    value="{{now}}"
    bindchange="setValue"
    data-field="now"
    disabled
  >
    <view class="cell-title">禁用状态</view>
    <view class="cell-value">{{now}}</view>
  </datetime-picker>
  <datetime-picker
    box-class="cell"
    min="{{min}}"
    max="{{max}}"
    value="{{customize}}"
    bindchange="setValue"
    data-field="customize"
  >
    <view class="cell-title">自定可选范围</view>
    <view class="cell-value">{{customize}}</view>
  </datetime-picker>
  <view class="label">自定义选择器粒度</view>
  <datetime-picker
    box-class="cell"
    value="{{year}}"
    bindchange="setValue"
    data-field="year"
    fields="year"
  >
    <view class="cell-title">年为粒度</view>
    <view class="cell-value">{{year}}</view>
  </datetime-picker>
  <datetime-picker
    box-class="cell"
    value="{{month}}"
    bindchange="setValue"
    data-field="month"
    fields="month"
  >
    <view class="cell-title">月为粒度</view>
    <view class="cell-value">{{month}}</view>
  </datetime-picker>
  <datetime-picker
    box-class="cell"
    value="{{day}}"
    bindchange="setValue"
    data-field="day"
    fields="day"
  >
    <view class="cell-title">日为粒度</view>
    <view class="cell-value">{{day}}</view>
  </datetime-picker>
  <datetime-picker
    box-class="cell"
    value="{{hour}}"
    bindchange="setValue"
    data-field="hour"
    fields="hour"
  >
    <view class="cell-title">时为粒度</view>
    <view class="cell-value">{{hour}}</view>
  </datetime-picker>
  <datetime-picker
    box-class="cell"
    value="{{minute}}"
    bindchange="setValue"
    data-field="minute"
    fields="minute"
  >
    <view class="cell-title">分为粒度</view>
    <view class="cell-value">{{minute}}</view>
  </datetime-picker>
  <datetime-picker
    box-class="cell"
    value="{{second}}"
    bindchange="setValue"
    data-field="second"
    fields="second"
  >
    <view class="cell-title">秒为粒度</view>
    <view class="cell-value">{{second}}</view>
  </datetime-picker>
  <view class="label">嵌入式选择器</view>
  <view class="cell">
    <view class="cell-title">下方选中时间日期</view>
    <view class="cell-value">{{view}}</view>
  </view>
  <datetime-picker
    box-class="cell-picker"
    value="{{view}}"
    mode="picker-view"
    bindchange="setValue"
    data-field="view"
  />
</view>
/* index.js */
const formatNumber = (n) => (
  n = n.toString(),
  n[1] ? n : 0 + n
);

const now = new Date();
const nowYear = now.getFullYear();
const nowMonth = formatNumber(now.getMonth() + 1);
const nowDay = formatNumber(now.getDate());
const nowHour = formatNumber(now.getHours());
const nowMinute = formatNumber(now.getMinutes());
const nowSecond = formatNumber(now.getSeconds());
const nowDatetime = `${nowYear}-${nowMonth}-${nowDay} ${nowHour}:${nowMinute}:${nowSecond}`;

Page({
  data: {
    min: '2010-01-01 00:00:00',
    max: '2030-12-31 23:59:59',
    now: nowDatetime.slice(0, nowDatetime.lastIndexOf(':')),
    value: nowDatetime.slice(0, nowDatetime.lastIndexOf(':')),
    customize: nowDatetime.slice(0, nowDatetime.lastIndexOf(':')),
    year: nowDatetime.slice(0, nowDatetime.indexOf('-')),
    month: nowDatetime.slice(0, nowDatetime.lastIndexOf('-')),
    date: nowDatetime.slice(0, nowDatetime.indexOf(' ')),
    hour: nowDatetime.slice(0, nowDatetime.indexOf(':')),
    minute: nowDatetime.slice(0, nowDatetime.lastIndexOf(':')),
    second: nowDatetime,
    view: nowDatetime.slice(0, nowDatetime.lastIndexOf(':')),
  },
  setValue(e) {
    const { field } = e.currentTarget.dataset;
    this.setData({
      [`${field}`]: e.detail.value,
    });
  },
});

License

MIT