feat: migrate DatetimePicker component

components.js

@@ -51,4 +51,5 @@ module.exports = [
   'checkbox-group',
   'radio',
   'radio-group',
+  'datetime-picker',
 ];

docs/markdown/changelog-v3.zh-CN.md

@@ -36,6 +36,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 - Checkbox
 - CheckboxGroup
+- DatetimePicker
 - Field
 - Radio
 - RadioGroup

src/datetime-picker/DatePicker.js

@@ -28,12 +28,14 @@ export default createComponent({
     },
   },
 
+  emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
+
   watch: {
     filter: 'updateInnerValue',
     minDate: 'updateInnerValue',
     maxDate: 'updateInnerValue',
 
-    value(val) {
+    modelValue(val) {
       val = this.formatValue(val);
 
       if (val.valueOf() !== this.innerValue.valueOf()) {

src/datetime-picker/TimePicker.js

@@ -28,6 +28,8 @@ export default createComponent({
     },
   },
 
+  emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
+
   computed: {
     ranges() {
       return [

src/datetime-picker/index.js

@@ -19,16 +19,6 @@ export default createComponent({
 
   render() {
     const Component = this.type === 'time' ? TimePicker : DatePicker;
-
-    return (
-      <Component
-        ref="root"
-        class={bem()}
-        {...{
-          props: this.$props,
-          on: this.$listeners,
-        }}
-      />
-    );
+    return <Component ref="root" class={bem()} {...this.$props} />;
   },
 });

src/datetime-picker/shared.js

@@ -5,8 +5,8 @@ import Picker from '../picker';
 
 export const sharedProps = {
   ...pickerProps,
-  value: null,
   filter: Function,
+  modelValue: null,
   showToolbar: {
     type: Boolean,
     default: true,
@@ -21,7 +21,7 @@ export const sharedProps = {
 export const TimePickerMixin = {
   data() {
     return {
-      innerValue: this.formatValue(this.value),
+      innerValue: this.formatValue(this.modelValue),
     };
   },
 
@@ -57,7 +57,7 @@ export const TimePickerMixin = {
     columns: 'updateColumnValue',
 
     innerValue(val) {
-      this.$emit('input', val);
+      this.$emit('update:modelValue', val);
     },
   },
 
@@ -97,7 +97,7 @@ export const TimePickerMixin = {
         onChange={this.onChange}
         onConfirm={this.onConfirm}
         onCancel={this.onCancel}
-        {...{ props }}
+        {...props}
       />
     );
   },

vant.config.js

@@ -123,10 +123,10 @@ module.exports = {
                 path: 'checkbox',
                 title: 'Checkbox 复选框',
               },
-              // {
-              //   path: 'datetime-picker',
-              //   title: 'DatetimePicker 时间选择',
-              // },
+              {
+                path: 'datetime-picker',
+                title: 'DatetimePicker 时间选择',
+              },
               {
                 path: 'field',
                 title: 'Field 输入框',
@@ -457,10 +457,10 @@ module.exports = {
                 path: 'checkbox',
                 title: 'Checkbox',
               },
-              // {
-              //   path: 'datetime-picker',
-              //   title: 'DatetimePicker',
-              // },
+              {
+                path: 'datetime-picker',
+                title: 'DatetimePicker',
+              },
               {
                 path: 'field',
                 title: 'Field',