添加组件

miniprogram/pages/components/date-picker-plugin/date-picker-plugin.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

miniprogram/pages/components/date-picker-plugin/date-picker-plugin.ts

@@ -0,0 +1,43 @@
+Component({
+  options: { multipleSlots: true },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    title: null,
+    mode: null,
+    placeholder: null,
+    value: null,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    visible: false,
+    format: {
+      date: 'YYYY-MM-DD',
+      second: 'YYYY-MM-DD HH:mm:ss',
+    },
+    now: Date.now(),
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    showPicker() {
+      this.setData({ visible: true });
+    },
+    hidePicker() {
+      this.setData({ visible: false });
+    },
+    onConfirm(e: any) {
+      this.triggerEvent('confirm', { value: e.detail.value });
+      this.hidePicker();
+    },
+    onClear() {
+      this.triggerEvent('confirm', { value: '' });
+    },
+  },
+});

miniprogram/pages/components/date-picker-plugin/date-picker-plugin.wxml

@@ -0,0 +1,10 @@
+<t-cell title="{{title || ''}}" hover arrow bindtap="showPicker">
+  <view slot="note" style="display: flex;align-items: center;column-gap: 12rpx;">
+    <view>{{value || ''}}</view>
+    <t-icon wx:if="{{value}}" name="close-circle-filled" catch:tap="onClear"></t-icon>
+  </view>
+</t-cell>
+<!-- 年月日时分 -->
+<t-date-time-picker title="{{placeholder || '选择日期'}}" visible="{{visible}}"
+  mode="{{mode || 'date'}}" format="{{format[mode|| 'date'] || 'YYYY-MM-DD HH:mm:ss'}}"
+  value="{{value || now}}" bindconfirm="onConfirm" auto-close="{{true}}" bindcancel="hidePicker" />