Web_TracerMethodology/components/date-time-pick/date-time-pick.vue

<template>
	<view class="date-pick-select">
    <date-time-picker
      :fields="fields"
      :start="startTime"
      :end="endTime"
      :defaultValue="defaultValue"
	  :disabled="disabled"
      @change="bindChange">
       <image class="date-icon" src="/static/date-icon.png"></image>
    </date-time-picker>
	</view>
</template>

<script>
/**
 * 日期时间选择器(单个)
 */
import DateTimePicker from '@/components/date-time-picker/date-time-picker.vue';
export default {
  components: {DateTimePicker},
	props: {
		label: {
			type: String,
			default: ''
    },
    // 时间选择器的粒度 有效值：year | month | day | hour | minute
		fields: {
			type: String,
			default: 'minute'
		},
		// 允许选中的最小值
		startTime: {
			type: String,
			default: ''
		},
		// 允许选中的最大值
		endTime: {
			type: String,
			default: ''
		},
		// 选中的时间
		defaultValue: {
			type: String,
			default: ''
		},
		//是否禁用
		disabled:{
			type: Boolean,
			default: false
		},
		// 占位符
		placeholder: {
			type: String,
			default: '日期时间'
		},
  },
	methods: {
    bindChange(dateObj){
      this.$emit('change', dateObj)
    }
  }
};
</script>

<style lang="less">
.date-pick-select {
	display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 203.12rpx;
  height: 25rpx;
  border: 0.78rpx solid #E1E4ED;
  border-radius: 3.12rpx;

  .uni-input {
    min-width: 101.56rpx;
    font-size: 12.5rpx;
    color: #2E2F33;
  }

  .date-icon {
    margin-left: 7.81rpx;
    width: 10.93rpx;
    height: 10.93rpx;
  }
}
</style>