@cloudbase/weda-ui-mp 0.2.20

package/components/wd-checkbox-list/wd-checkbox-list.wxss

@@ -0,0 +1,259 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-checkbox-group,
+.wd-checkbox-wrap {
+  --wd-checkbox-wrap-margin-btm: 0.75rem;
+  --wd-checkbox-wrap-mg-lf: calc(var(--wd-space-base) * 4);
+  --wd-checkbox-inner-border: var(--wd-color-gray-4);
+  --wd-checkbox-inner-border-hover: var(--wd-color-brand);
+  --wd-checkbox-inner-bg: var(--wd-font-white-1);
+  --wd-checkbox-inner-bg-disabled: var(--wd-color-gray-2);
+  --wd-checkbox-inner-after-width: calc(var(--wd-space-base) * 2);
+  --wd-checkbox-inner-after-height: calc(var(--wd-space-base) * 2);
+  --wd-checkbox-inner-border-color: var(--wd-font-white-1);
+  --wd-checkbox-inner-after-bg: var(--wd-white);
+  --wd-checkbox-inner-after-bg-checked: var(--wd-color-brand);
+  --wd-checkbox-inner-after-bg-checked-disabled: var(--wd-color-text-disabled);
+  --wd-checkbox-label-pd-lf: calc(var(--wd-space-base) * 2);
+  --wd-checkbox-label-font-weight: var(--wd-font-weight-regular);
+  --wd-checkbox-label-bg: transparent;
+  --wd-checkbox-label-font-color: var(--wd-color-text-default);
+  --wd-checkbox-label-font-color-disabled: var(--wd-color-text-disabled);
+  --wd-checkbox-height-sm: 0.875rem;
+  --wd-checkbox-width-sm: 0.875rem;
+  --wd-checkbox-inner-border-radius-sm: 0.109375rem;
+  --wd-checkbox-label-font-size-sm: var(--wd-font-size-2);
+  --wd-checkbox-inner-after-checked-width-sm: 0.27375rem;
+  --wd-checkbox-inner-after-checked-hight-sm: 0.491875rem;
+  --wd-checkbox-inner-after-checked-border-width-sm: 0.125rem;
+  --wd-checkbox-inner-after-top-sm: 0.3125rem;
+  --wd-checkbox-inner-after-left-sm: 0.16625rem;
+  --wd-checkbox-inner-after-all-width-sm: 0.4375rem;
+  --wd-checkbox-inner-after-all-hight-sm: 0.109375rem;
+  --wd-checkbox-height-md: calc(var(--wd-space-base) * 4);
+  --wd-checkbox-width-md: calc(var(--wd-space-base) * 4);
+  --wd-checkbox-inner-border-radius-md: 0.125rem;
+  --wd-checkbox-label-font-size-md: var(--wd-font-size-3);
+  --wd-checkbox-inner-after-checked-width-md: 0.3125rem;
+  --wd-checkbox-inner-after-checked-hight-md: 0.5625rem;
+  --wd-checkbox-inner-after-checked-border-width-md: 0.125rem;
+  --wd-checkbox-inner-after-top-md: 0.375rem;
+  --wd-checkbox-inner-after-left-md: 0.1875rem;
+  --wd-checkbox-inner-after-all-width-md: 0.5rem;
+  --wd-checkbox-inner-after-all-hight-md: 0.125rem;
+  --wd-checkbox-height-lg: calc(var(--wd-space-base) * 5);
+  --wd-checkbox-width-lg: calc(var(--wd-space-base) * 5);
+  --wd-checkbox-inner-border-radius-lg: 0.15625rem;
+  --wd-checkbox-label-font-size-lg: var(--wd-font-size-4);
+  --wd-checkbox-inner-after-checked-width-lg: 0.3725rem;
+  --wd-checkbox-inner-after-checked-hight-lg: 0.71875rem;
+  --wd-checkbox-inner-after-checked-border-width-lg: 0.15625rem;
+  --wd-checkbox-inner-after-top-lg: 0.484375rem;
+  --wd-checkbox-inner-after-left-lg: var(--wd-space-base);
+  --wd-checkbox-inner-after-all-width-lg: 0.625rem;
+  --wd-checkbox-inner-after-all-hight-lg: 0.15625rem;
+}
+
+.wd-checkbox {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.wd-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.wd-checkbox-group--inline {
+  flex-direction: flow;
+  flex-flow: wrap;
+}
+.wd-checkbox-group--inline .wd-checkbox-wrap {
+  width: auto;
+  margin-inline-start: 0;
+  margin-bottom: 0px;
+  margin-inline-end: var(--wd-checkbox-wrap-mg-lf);
+}
+.wd-checkbox-group--inline .wd-checkbox-wrap + .wd-checkbox-wrap {
+  margin-top: 0px;
+}
+.wd-checkbox-wrap {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 0;
+}
+.wd-checkbox-wrap + .wd-checkbox-wrap {
+  margin-top: var(--wd-checkbox-wrap-margin-btm);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-inner {
+  cursor: not-allowed;
+  border: 1px solid var(--wd-checkbox-inner-border);
+  background-color: var(--wd-checkbox-inner-bg-disabled);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-inner:hover:not(.is-disabled) {
+  border-color: var(--wd-checkbox-inner-border);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-inner::after {
+  background-color: var(--wd-checkbox-inner-bg-disabled);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-label {
+  cursor: not-allowed;
+}
+.wd-checkbox-wrap.is-checked .wd-checkbox-inner {
+  border: 1px solid var(--wd-checkbox-inner-after-bg-checked);
+  background-color: var(--wd-checkbox-inner-after-bg-checked);
+}
+.wd-checkbox-wrap.is-checked .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-checked-width-md);
+  height: var(--wd-checkbox-inner-after-checked-hight-md);
+  border: var(--wd-checkbox-inner-after-checked-border-width-md) solid var(--wd-checkbox-inner-border-color);
+  border-radius: 0 0 1px;
+  border-top: 0;
+  border-left: 0;
+  -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
+  transform: rotate(45deg) scale(1) translate(-50%, -50%);
+  background: transparent;
+}
+.wd-checkbox-wrap.is-checked.is-disabled .wd-checkbox-inner {
+  cursor: not-allowed;
+  border: 1px solid var(--wd-checkbox-inner-border);
+  background-color: var(--wd-checkbox-inner-bg-disabled);
+}
+.wd-checkbox-wrap.is-checked.is-disabled .wd-checkbox-inner:hover:not(.is-disabled) {
+  border-color: var(--wd-checkbox-inner-border);
+}
+.wd-checkbox-wrap.is-checked.is-disabled .wd-checkbox-inner::after {
+  border-color: var(--wd-checkbox-inner-after-bg-checked-disabled);
+}
+.wd-checkbox-wrap.is-indeterminate .wd-checkbox-inner {
+  border: 1px solid var(--wd-checkbox-inner-after-bg-checked);
+  background-color: var(--wd-checkbox-inner-after-bg-checked);
+}
+.wd-checkbox-wrap.is-indeterminate .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-all-width-md);
+  background: var(--wd-checkbox-inner-border-color);
+  height: var(--wd-checkbox-inner-after-all-hight-md);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-wrap.is-checked .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-checked-width-md);
+  height: var(--wd-checkbox-inner-after-checked-hight-md);
+  border: var(--wd-checkbox-inner-after-checked-border-width-md) solid var(--wd-checkbox-inner-border-color);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-wrap.is-indeterminate .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-all-width-md);
+  height: var(--wd-checkbox-inner-after-all-hight-md);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-inner {
+  width: var(--wd-checkbox-width-md);
+  height: var(--wd-checkbox-height-md);
+  border-radius: var(--wd-checkbox-inner-border-radius-md);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-label {
+  font-size: var(--wd-checkbox-label-font-size-md);
+  line-height: var(--wd-checkbox-width-md);
+}
+.wd-checkbox-wrap.size-sm .wd-checkbox-inner {
+  width: var(--wd-checkbox-width-sm);
+  height: var(--wd-checkbox-height-sm);
+  border-radius: var(--wd-checkbox-inner-border-radius-sm);
+}
+.wd-checkbox-wrap.size-sm .wd-checkbox-label {
+  font-size: var(--wd-checkbox-label-font-size-sm);
+  line-height: var(--wd-checkbox-width-sm);
+}
+.wd-checkbox-wrap.size-sm.is-checked .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-sm);
+  left: var(--wd-checkbox-inner-after-left-sm);
+  width: var(--wd-checkbox-inner-after-checked-width-sm);
+  height: var(--wd-checkbox-inner-after-checked-hight-sm);
+  border-width: var(--wd-checkbox-inner-after-checked-border-width-sm);
+}
+.wd-checkbox-wrap.size-sm.is-indeterminate .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-sm);
+  left: var(--wd-checkbox-inner-after-left-sm);
+  width: var(--wd-checkbox-inner-after-all-width-sm);
+  height: var(--wd-checkbox-inner-after-all-hight-sm);
+}
+.wd-checkbox-wrap.size-lg .wd-checkbox-inner {
+  width: var(--wd-checkbox-width-lg);
+  height: var(--wd-checkbox-height-lg);
+  border-radius: var(--wd-checkbox-inner-border-radius-lg);
+}
+.wd-checkbox-wrap.size-lg .wd-checkbox-label {
+  font-size: var(--wd-checkbox-label-font-size-lg);
+  line-height: var(--wd-checkbox-height-lg);
+}
+.wd-checkbox-wrap.size-lg.is-checked .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-lg);
+  left: var(--wd-checkbox-inner-after-left-lg);
+  width: var(--wd-checkbox-inner-after-checked-width-lg);
+  height: var(--wd-checkbox-inner-after-checked-hight-lg);
+  border-width: var(--wd-checkbox-inner-after-checked-border-width-lg);
+}
+.wd-checkbox-wrap.size-lg.is-indeterminate .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-lg);
+  left: var(--wd-checkbox-inner-after-left-lg);
+  width: var(--wd-checkbox-inner-after-all-width-lg);
+  height: var(--wd-checkbox-inner-after-all-hight-lg);
+}
+.wd-checkbox-input, .wd-checkbox-input[type=checkbox][disabled] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.wd-checkbox-inner {
+  flex: none;
+  margin-right: var(--wd-checkbox-label-pd-lf);
+  width: var(--wd-checkbox-width-md);
+  height: var(--wd-checkbox-height-md);
+  display: inline-block;
+  border: 1px solid var(--wd-checkbox-inner-border);
+  border-radius: var(--wd-checkbox-inner-border-radius-md);
+  position: relative;
+  background-color: var(--wd-checkbox-inner-bg);
+  cursor: pointer;
+}
+.wd-checkbox-inner:hover:not(.is-disabled) {
+  border-color: var(--wd-checkbox-inner-border-hover);
+}
+.wd-checkbox-inner::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.wd-checkbox-label {
+  cursor: pointer;
+  background: var(--wd-checkbox-label-bg);
+  color: var(--wd-checkbox-label-font-color);
+  font-size: var(--wd-checkbox-label-font-size-md);
+  font-weight: var(--wd-checkbox-label-font-weight);
+  line-height: var(--wd-checkbox-height-md);
+}

package/components/wd-date/calendar/index.js

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {
+  convertValueToDateItem,
+  convertYearMonthToWeeks,
+  convertDayjs,
+  convertDateItemToValue,
+  getYMD,
+  getStartMoment,
+} from '../../../utils/getFormLegacy.js';
+import { WD_PREFIX, WEEKS } from '../../../utils/constant';
+
+/**
+ * 日历组件
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    value: {
+      type: null,
+    },
+    start: {
+      type: null,
+    },
+    end: {
+      type: null,
+    },
+    mode: {
+      type: String,
+      value: 'day',
+    },
+    isWheelChange: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    WEEKS,
+
+    currentValue: null, // 当前选中值，默认当天
+    yearMonthDisplay: '', // 年月展示
+    yearMonthValue: null, // 当前年月值
+    showMode: 'day', // day|month
+    weeks: [],
+    ymd: '',
+  },
+  methods: {
+    // 切换模式
+    handleClickMode: function () {
+      const showMode = this.data.showMode === 'day' ? 'month' : 'day';
+      this.setData({ showMode });
+    },
+    // 选年月
+    handleSelectYearMonth: function (e) {
+      const value = e.detail.value;
+      this.setData({ yearMonthValue: value });
+      if (this.properties.isWheelChange) {
+        this.setData({ currentValue: value });
+        this.triggerEvent('onChange', { value });
+      }
+    },
+    // 选月
+    handleSelectMonth: function (diff = 0) {
+      const dateItem = convertValueToDateItem(this.data.yearMonthValue);
+      const month = dateItem.month + diff;
+      const value = convertDateItemToValue({ ...dateItem, month });
+      this.setData({ yearMonthValue: value });
+    },
+    // 选天
+    handleSelectDay: function (e) {
+      const item = e.currentTarget.dataset.item;
+      if (item.disabled) return;
+      const { yearMonthValue } = this.data;
+      const dateItem = convertValueToDateItem(yearMonthValue);
+      const currentValue = convertDateItemToValue({
+        ...dateItem,
+        day: item.day,
+      });
+      this.setData({ currentValue });
+      this.triggerEvent('onChange', { value: currentValue });
+    },
+    handlePreMonth: function () {
+      this.handleSelectMonth(-1);
+    },
+    handletNextMonth: function () {
+      this.handleSelectMonth(1);
+    },
+  },
+  observers: {
+    'value,mode': function (value, mode) {
+      if (this.data.currentValue && value === this.data.currentValue) return;
+      const m = convertDayjs(value) || getStartMoment(mode);
+      const currentValue = m.valueOf();
+      this.setData({ currentValue });
+    },
+    currentValue: function (currentValue) {
+      const m = convertDayjs(currentValue);
+      const dateItem = convertValueToDateItem(m);
+      const ymd = getYMD(dateItem);
+      const yearMonthDisplay = m.format('YYYY年MM月');
+      this.setData({ yearMonthDisplay, ymd, yearMonthValue: currentValue });
+    },
+    'yearMonthValue, start, end': function (yearMonthValue, start, end) {
+      const m = convertDayjs(yearMonthValue);
+      const yearMonthDisplay = m?.format('YYYY年MM月');
+      const { year, month } = convertValueToDateItem(yearMonthValue);
+      const weeks = convertYearMonthToWeeks(year, month, [start, end]);
+      this.setData({ weeks, yearMonthDisplay });
+    },
+  },
+});

package/components/wd-date/calendar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "year-month-picker": "../year-month-picker"
+  }
+}

package/components/wd-date/calendar/index.wxml

@@ -0,0 +1,38 @@
+<block>
+  <view class="{{classPrefix}}-custom-calendar-op">
+    <view class="{{classPrefix}}-custom-calendar-op__start">
+      <view class="{{classPrefix}}-custom-calendar-op__select {{showMode === 'month' ? 'is-active' : ''}}" bind:tap="handleClickMode">
+        <block>{{yearMonthDisplay}}</block>
+        <i class="{{classPrefix}}-icon-arrow-right"></i>
+      </view>
+    </view>
+    <view class="{{classPrefix}}-custom-calendar-op__end" style="{{showMode === 'month' ? ' visibility:hidden' : ''}}">
+      <text class="{{classPrefix}}-icon-turn-pre" bind:tap="handlePreMonth"></text>
+      <text class="{{classPrefix}}-icon-turn-next" bind:tap="handletNextMonth"></text>
+    </view>
+  </view>
+
+  <view class="{{classPrefix}}-custom-picker__box{{showMode === 'day' ? '' : '--month'}}">
+    <block wx:if="{{showMode === 'day'}}">
+      <view class="{{classPrefix}}-custom-calendar">
+        <view class="{{classPrefix}}-custom-calendar__weeks">
+          <block wx:for="{{WEEKS}}" wx:key="*this">
+            <text class="{{classPrefix}}-custom-calendar__weeks-item">{{item}}</text>
+          </block>
+        </view>
+        <view class="{{classPrefix}}-custom-calendar__days">
+          <block wx:for="{{weeks}}" wx:for-item="week" wx:key="*this">
+            <view class="{{classPrefix}}-custom-calendar__days-row">
+              <block wx:for="{{week}}" wx:key="ymd">
+                <text class="{{classPrefix}}-custom-calendar__days-item {{item.ymd === ymd ? 'is-current' : ''}} {{item.disabled ? 'no-select' : ''}}" bind:tap="handleSelectDay" data-item="{{item}}">{{item.day}}</text>
+              </block>
+            </view>
+          </block>
+        </view>
+      </view>
+    </block>
+    <block wx:if="{{showMode === 'month'}}">
+      <year-month-picker value="{{yearMonthValue}}" start="{{start}}" end="{{end}}" bind:onChange="handleSelectYearMonth" />
+    </block>
+  </view>
+</block>

package/components/wd-date/date-picker/index.js

@@ -0,0 +1,101 @@
+import { convertDayjs, getStartMoment } from '../../../utils/getFormLegacy.js';
+import { WD_PREFIX } from '../../../utils/constant';
+
+/**
+ * 日期时间弹窗选择器
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    value: {
+      type: null,
+    },
+    start: {
+      type: null,
+    },
+    end: {
+      type: null,
+    },
+    mode: {
+      type: String,
+      value: 'day',
+    },
+    okText: {
+      type: String,
+      value: '确定',
+    },
+    cancelText: {
+      type: String,
+      value: '取消',
+    },
+    maskClosable: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    dateOrTime: 'date',
+    dateDisplay: '',
+    timeDisplay: '',
+    currentValue: null, // 当前值，默认当天
+  },
+  methods: {
+    setDate: function () {
+      this.setData({ dateOrTime: 'date' });
+    },
+    setTime: function () {
+      this.setData({ dateOrTime: 'time' });
+    },
+
+    handleChange: function (e) {
+      const value = e.detail.value;
+      this.setData({ currentValue: value });
+    },
+
+    // 取消
+    handleClose: function () {
+      this.triggerEvent('onClose', { value: this.data.currentValue });
+    },
+
+    // 取消空白处
+    handleCloseMask: function () {
+      if (this.properties.maskClosable) {
+        this.handleClose;
+      }
+    },
+
+    // 确认
+    handleOk: function () {
+      try {
+        const calendarRef = this.selectComponent('#wd-date-day');
+        if (
+          this.properties.mode === 'day' &&
+          calendarRef?.data?.showMode === 'month' &&
+          calendarRef?.handleClickMode
+        ) {
+          calendarRef.handleClickMode();
+          return;
+        }
+        this.triggerEvent('onOk', { value: this.data.currentValue });
+      } catch (e) {}
+    },
+  },
+  observers: {
+    'value,mode': function (value, mode) {
+      if (this.data.currentValue && value === this.data.currentValue) return;
+      const m = convertDayjs(value) || getStartMoment(mode);
+      const currentValue = m.valueOf();
+      this.setData({ currentValue });
+    },
+    currentValue: function (currentValue) {
+      const m = convertDayjs(currentValue);
+      const timeFormat =
+        this.properties.mode === 'datetimeMinute' ? 'HH:mm' : 'HH:mm:ss';
+      const dateDisplay = m.format('YYYY-MM-DD');
+      const timeDisplay = m.format(timeFormat);
+      this.setData({ dateDisplay, timeDisplay });
+    },
+  },
+  lifetimes: {},
+});

package/components/wd-date/date-picker/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "calendar": "../calendar",
+    "year-month-picker": "../year-month-picker/index",
+    "time-picker": "../time-picker/index"
+  }
+}

package/components/wd-date/date-picker/index.wxml

@@ -0,0 +1,41 @@
+<view class="{{classPrefix}}-custom-picker">
+  <view class="{{classPrefix}}-custom-backdrop" bind:tap="handleCloseMask"></view>
+
+  <view class="{{classPrefix}}-custom-picker__inner">
+    <view class="{{classPrefix}}-custom-picker__header">
+      <view class="{{classPrefix}}-custom-picker__header-cancle" bindtap="handleClose">{{cancelText}} </view>
+      <view class="{{classPrefix}}-custom-picker__header-confirm" bindtap="handleOk">{{okText}} </view>
+    </view>
+
+    <view class="{{classPrefix}}-custom-picker__body">
+      <block wx:if="{{mode === 'datetime' || mode === 'datetimeMinute'}}">
+        <view class="{{classPrefix}}-custom-picker__select">
+          <text class="{{classPrefix}}-custom-picker__select-item {{classPrefix}}-custom-picker__select-item-date {{dateOrTime === 'date' ? 'is-current' : ''}}" bind:tap="setDate">{{dateDisplay}}</text>
+          <text class="{{classPrefix}}-custom-picker__select-item {{classPrefix}}-custom-picker__select-item-time {{dateOrTime === 'time' ? 'is-current' : ''}}" bind:tap="setTime">{{timeDisplay}}</text>
+        </view>
+        <block wx:if="{{dateOrTime === 'date'}}">
+          <view class="{{classPrefix}}-custom-picker__select-date">
+            <calendar value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" isWheelChange="{{true}}" />
+          </view>
+        </block>
+        <block wx:else>
+          <view class="{{classPrefix}}-custom-picker__select-time">
+            <time-picker value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" />
+          </view>
+        </block>
+      </block>
+
+      <block wx:elif="{{mode === 'year'}}">
+        <year-month-picker value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" />
+      </block>
+
+      <block wx:elif="{{mode === 'month'}}">
+        <year-month-picker value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" />
+      </block>
+
+      <block wx:elif="{{mode === 'day'}}">
+        <calendar id="wd-date-day" value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" isWheelChange="{{true}}" />
+      </block>
+    </view>
+  </view>
+</view>

package/components/wd-date/date-picker/index.wxss

@@ -0,0 +1,7 @@
+.wd-custom-picker .wd-custom-picker__box--month {
+  padding: 45px 0;
+}
+
+.wd-custom-picker .wd-custom-picker__box--month .weda-ui-custom-picker-view {
+  margin: 0;
+}