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

<template>
	<view class="date-pick">
		<text class="label" v-show="label">{{ label }}</text>
		<view class="date-box">
		  <date-time-picker
			  :fields="fields"
			  :start="dateObj.startTime"
			  :end="dateObj.endTime"
			  :defaultValue="dateObj.startSelectValue"
        :pickType="'start'"
        placeholder="开始日期时间"
			  @change="bindChange" />
				 <text class="inner">~</text>
			<date-time-picker
				:fields="fields"
				:start="dateObj.startTime"
				:end="dateObj.endTime"
				:defaultValue="dateObj.endSelectValue"
        :pickType="'end'"
        placeholder="结束日期时间"
				@change="bindChange">
        <!-- <image src="/static/date-icon.png" class="date-icon"></image> -->
			</date-time-picker>
		</view>
	</view>
</template>

<script>
/**
 * 日期时间选择控件(开始时间~结束时间)
 */
import DateTimePicker from '@/components/date-time-picker/date-time-picker.vue';
import moment from 'moment';
// 时间格式化对象 (目前只支持短横线(-)的格式如: 'YYYY-MM-DD HH:mm:ss', 不支持斜线格式如 / )
const FORMATS = {
  year: 'YYYY',
  month: 'YYYY-MM',
  day: 'YYYY-MM-DD',
  hour: 'YYYY-MM-DD HH',
  minute: 'YYYY-MM-DD HH:mm',
  second: 'YYYY-MM-DD HH:mm:ss',
};
export default {
	components: {DateTimePicker},
	props: {
		label: {
			type: String,
			default: ''
    },
    // 时间选择器的粒度 有效值：year | month | day | hour | minute
		fields: {
			type: String,
			default: 'minute'
		},
		// 允许选中的最小值
		startTime: {
			type: String,
			default: "1970-01-01 00:00"
		},
		// 允许选中的最大值
		endTime: {
			type: String,
			default: "2300-01-01 00:00"
		},
		// 开始 选中的时间
		startSelectValue: {
			type: String,
			default: ''
		},
		// 结束 选中的时间
		endSelectValue: {
			type: String,
			default: ''
		}
  },
  computed: {
    dateObj(){
      const {fields, startTime, endTime, startSelectValue, endSelectValue} = this;
      if(fields){
        return {
          startTime: startTime ? moment(new Date(startTime)).format(FORMATS[fields]) : '1970-01-01 00:00',
          endTime: endTime ? moment(new Date(endTime)).format(FORMATS[fields]) : '2300-01-01 00:00',
          startSelectValue: startSelectValue ? moment(new Date(startSelectValue)).format(FORMATS[fields]) : '',
          endSelectValue: endSelectValue ? moment(new Date(endSelectValue)).format(FORMATS[fields]) : ''
        }
      }else {
        return {
          startTime,
          endTime,
          startSelectValue,
          endSelectValue
        }
      }
    }
  },
	methods: {
		bindChange(valObj, pickType){
      this.$emit('changeDate', valObj, pickType)
		}
	}
};
</script>

<style lang="less">
.date-pick {
	display: flex;
	align-items: center;
	height: 25rpx;

	.label {
		margin-right: 3.12rpx;
		font-size: 12.5rpx;
		font-weight: 500;
		color: #17181a;
	}

	.date-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 238.28rpx;
		height: 25rpx;
		background: #ffffff;
		border-radius: 3.12rpx;
		border: 0.78rpx solid #e1e4ed;
		color: #2e2f33;
		box-sizing: border-box;


		.date-icon {
			width: 10.93rpx;
			height: 10.93rpx;
    }

    .inner {
      margin-right: 3.5rpx;
    }
	}
}
</style>