@wines/date-picker-view

@wines/date-picker-view

DatePickerView 日期选择器

嵌入页面的日期选择器。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "DatePickerView",
  "usingComponents": {
    "wux-segmented-control": "@wines/segmented-control",
    "wux-date-picker-view": "@wines/date-picker-view"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">DatePickerView</view>
		<view class="page__desc">日期选择器</view>
	</view>
	<view class="page__bd">
		<wux-segmented-control values="{{ ['zh_CN', 'zh_TW', 'en'] }}" bind:change="onChange" />
		<view class="sub-title">Default {{ displayValue1 }}</view>
		<wux-date-picker-view
		 lang="{{ lang }}"
		 value="{{ value1 }}"
		 data-index="1"
		 bind:valueChange="onValueChange"
		/>
		<view class="sub-title">Mode = date {{ displayValue2 }}</view>
		<wux-date-picker-view
		 mode="date"
		 lang="{{ lang }}"
		 value="{{ value2 }}"
		 data-index="2"
		 bind:valueChange="onValueChange"
		/>
		<view class="sub-title">Mode = year {{ displayValue3 }}</view>
		<wux-date-picker-view
		 mode="year"
		 lang="{{ lang }}"
		 value="{{ value3 }}"
		 data-index="3"
		 bind:valueChange="onValueChange"
		/>
		<view class="sub-title">Mode = month {{ displayValue4 }}</view>
		<wux-date-picker-view
		 mode="month"
		 lang="{{ lang }}"
		 value="{{ value4 }}"
		 data-index="4"
		 bind:valueChange="onValueChange"
		/>
		<view class="sub-title">Mode = time {{ displayValue5 }}</view>
		<wux-date-picker-view
		 mode="time"
		 lang="{{ lang }}"
		 value="{{ value5 }}"
		 data-index="5"
		 bind:valueChange="onValueChange"
		/>
		<view class="sub-title">Use12Hours & datetime {{ displayValue6 }}</view>
		<wux-date-picker-view
		 use12Hours
		 mode="datetime"
		 lang="{{ lang }}"
		 value="{{ value6 }}"
		 data-index="6"
		 bind:valueChange="onValueChange"
		/>
		<view class="sub-title">Use12Hours & time {{ displayValue7 }}</view>
		<wux-date-picker-view
		 use12Hours
		 mode="time"
		 lang="{{ lang }}"
		 value="{{ value7 }}"
		 data-index="7"
		 bind:valueChange="onValueChange"
		/>
	</view>
</view>

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

function getDateString(date = new Date()) {
  return {
    year: String(date.getFullYear()),
    month: String(date.getMonth()),
    day: String(date.getDate()),
    hour: String(date.getHours()),
    minute: String(date.getMinutes()),
  };
}

const { year, month, day, hour, minute } = getDateString();

Page({
  data: {
    value1: [year, month, day, hour, minute],
    value2: [year, month, day],
    value3: [year, month],
    value4: [year],
    value5: [hour, minute],
    value6: [year, month, day, hour, minute, '1'],
    value7: [hour, minute, '1'],
    lang: 'zh_CN',
  },
  onChange(e) {
    console.log(e);
    const { key, values } = e.detail;
    const lang = values[key];

    this.setData({
      lang,
    });
  },
  setValue(values: DatePickerViewGetValue, key: number) {
    this.setData({
      [`value${key}`]: values.value,
      [`displayValue${key}`]: values.displayValue.join(' '),
    });
  },
  onValueChange(e) {
    const { index } = e.currentTarget.dataset;
    this.setValue(e.detail, index);
    console.log(`onValueChange${index as number}`, e.detail);
  },
});

API

DatePickerView props