@wines/date-picker v1.5.1

@wines/date-picker

DatePicker 日期选择器

用于选择日期或者时间。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "DatePicker",
  "usingComponents": {
    "wux-segmented-control": "@wines/segmented-control",
    "wux-date-picker": "@wines/date-picker",
    "wux-cell-group": "@wines/cell-group",
    "wux-cell": "@wines/cell",
    "wux-button": "@wines/button"
  }
}

示例

<wux-date-picker
 visible="{{ visible }}"
 controlled
 mode="datetime"
 value="{{ value1 }}"
 lang="{{ lang }}"
 data-index="1"
 data-mode="datetime"
 bind:confirm="onConfirm"
 bind:visibleChange="onVisibleChange"
/>

<view class="page">
	<view class="page__hd">
		<view class="page__title">DatePicker</view>
		<view class="page__desc">日期选择器</view>
	</view>
	<view class="page__bd">
		<wux-segmented-control values="{{ ['zh_CN', 'zh_TW', 'en'] }}" bind:change="onChange" />
		<wux-cell-group title="Default">
			<wux-date-picker
			 mode="datetime"
			 value="{{ value1 }}"
			 lang="{{ lang }}"
			 data-index="1"
			 data-mode="datetime"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Datetime" is-link extra="{{ displayValue1 }}" />
			</wux-date-picker>
			<wux-date-picker
			 mode="date"
			 value="{{ value2 }}"
			 lang="{{ lang }}"
			 data-index="2"
			 data-mode="date"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Date" is-link extra="{{ displayValue2 }}" />
			</wux-date-picker>
			<wux-date-picker
			 mode="year"
			 value="{{ value3 }}"
			 lang="{{ lang }}"
			 data-index="3"
			 data-mode="year"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Year" is-link extra="{{ displayValue3 }}" />
			</wux-date-picker>
			<wux-date-picker
			 mode="month"
			 value="{{ value4 }}"
			 lang="{{ lang }}"
			 data-index="4"
			 data-mode="month"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Month" is-link extra="{{ displayValue4 }}" />
			</wux-date-picker>
			<wux-date-picker
			 mode="time"
			 value="{{ value5 }}"
			 lang="{{ lang }}"
			 data-index="5"
			 data-mode="time"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Time" is-link extra="{{ displayValue5 }}" />
			</wux-date-picker>
		</wux-cell-group>
		<wux-cell-group title="Use12Hours">
			<wux-date-picker
			 mode="datetime"
			 value="{{ value6 }}"
			 lang="{{ lang }}"
			 use12Hours
			 data-index="6"
			 data-mode="datetime"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Datetime" is-link extra="{{ displayValue6 }}" />
			</wux-date-picker>
			<wux-date-picker
			 mode="time"
			 value="{{ value7 }}"
			 lang="{{ lang }}"
			 use12Hours
			 data-index="7"
			 data-mode="time"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Time" is-link extra="{{ displayValue7 }}" />
			</wux-date-picker>
		</wux-cell-group>
		<wux-cell-group title="MinuteStep">
			<wux-date-picker
			 mode="datetime"
			 value="{{ value8 }}"
			 lang="{{ lang }}"
			 minuteStep="10"
			 data-index="8"
			 data-mode="datetime"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Datetime" is-link extra="{{ displayValue8 }}" />
			</wux-date-picker>
			<wux-date-picker
			 mode="time"
			 value="{{ value9 }}"
			 lang="{{ lang }}"
			 minuteStep="10"
			 data-index="9"
			 data-mode="time"
			 bind:confirm="onConfirm"
			>
				<wux-cell title="Time" is-link extra="{{ displayValue9 }}" />
			</wux-date-picker>
		</wux-cell-group>
		<view class="button-sp-area">
			<wux-button block type="light" bind:click="onClick">Button click - {{ displayValue1 }}</wux-button>
		</view>
	</view>
</view>

import './index.less';
import { DatePickerGetValue } from '@wines/date-picker';

Page({
  data: {
    value1: [],
    value2: [],
    value3: [],
    value4: [],
    value5: [],
    value6: [],
    value7: [],
    value8: [],
    value9: [],
    displayValue1: '请选择',
    displayValue2: '请选择',
    displayValue3: '请选择',
    displayValue4: '请选择',
    displayValue5: '请选择',
    displayValue6: '请选择',
    displayValue7: '请选择',
    displayValue8: '请选择',
    displayValue9: '请选择',
    lang: 'zh_CN',
  },
  onChange(e) {
    console.log(e);
    const { key, values } = e.detail;
    const lang = values[key];

    this.setData({
      lang,
    });
  },
  setValue(values: DatePickerGetValue, key: number, mode) {
    console.log(mode);
    this.setData({
      [`value${key}`]: values.value,
      [`displayValue${key}`]: values.label,
    });
  },
  onConfirm(e) {
    const { index, mode } = e.currentTarget.dataset;
    this.setValue(e.detail, index, mode);
    console.log(`onConfirm${index as number}`, e.detail);
  },
  onVisibleChange(e) {
    this.setData({ visible: e.detail.visible });
  },
  onClick() {
    this.setData({ visible: true });
  },
});

API

DatePicker props

DatePicker slot