feat(components): [date-picker] add props time-editable (#696)

examples/sites/demos/pc/app/date-picker/step-composition-api.vue

@@ -9,6 +9,11 @@
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime" time-arrow-control></tiny-date-picker>
     </div>
+
+    <p>时间输入框不可编辑：</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-date-picker v-model="value" type="datetime" :step="step" :time-editable="false"></tiny-date-picker>
+    </div>
   </div>
 </template>
 
@@ -20,7 +25,7 @@ const step = ref({
   hour: 2,
   minute: 5
 })
-const value = ref([])
+const value = ref('')
 </script>
 
 <style scoped>

packages/vue/src/date-panel/src/pc.vue

@@ -55,6 +55,7 @@
                 size="small"
                 @update:modelValue="(val) => (state.userInputTime = val)"
                 @change="handleVisibleTimeChange"
+                :readonly="!timeEditable"
               />
               <time-picker
                 ref="timepicker"
@@ -270,7 +271,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    formatWeeks: Function
+    formatWeeks: Function,
+    timeEditable: {
+      type: Boolean,
+      default: true
+    }
   },
   emits: ['pick', 'select-change', 'dodestroy'],
   setup(props, context) {

packages/vue/src/date-picker/src/index.ts

@@ -84,6 +84,10 @@ export const datePickerProps = {
     default: () => $constants
   },
   timeArrowControl: Boolean,
+  timeEditable: {
+    type: Boolean,
+    default: true
+  },
   size: String,
   format: String,
   valueFormat: String,

packages/vue/src/date-range/src/pc.vue

@@ -65,6 +65,7 @@
                   @focus="state.minTimePickerVisible = true"
                   @update:modelValue="(val) => handleTimeInput(val, 'min')"
                   @change="(val) => handleTimeChange(val, 'min')"
+                  :readonly="!timeEditable"
                 />
                 <time-picker
                   ref="minTimePicker"
@@ -98,7 +99,7 @@
                   :disabled="state.rangeState.selecting"
                   :placeholder="t('ui.datepicker.endTime')"
                   :modelValue="state.maxVisibleTime"
-                  :readonly="!state.minDate"
+                  :readonly="!state.minDate || !timeEditable"
                   @focus="state.minDate && (state.maxTimePickerVisible = true)"
                   @update:modelValue="(val) => handleTimeInput(val, 'max')"
                   @change="(val) => handleTimeChange(val, 'max')"
@@ -272,7 +273,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    formatWeeks: Function
+    formatWeeks: Function,
+    timeEditable: {
+      type: Boolean,
+      default: true
+    }
   },
   emits: ['dodestroy', 'pick'],
   setup(props, context) {

packages/vue/src/picker/src/pc.vue

@@ -161,6 +161,7 @@
       :is="state.panel"
       :step="step"
       :show-week-number="showWeekNumber"
+      :time-editable="timeEditable"
       :format-weeks="formatWeeks"
       ref="picker"
       :visible="state.pickerVisible"

packages/vue/src/picker/src/type.ts

@@ -10,6 +10,10 @@ export const pickerProps = {
     default: '1'
   },
   timeArrowControl: Boolean,
+  timeEditable: {
+    type: Boolean,
+    default: true
+  },
   size: String,
   format: String,
   valueFormat: String,