<template>
  <div class="date-picker-from-to-form">
    <el-form-item
      :key="item.model"
      :prop="item.model"
      :label="item.label || ''"
      :label-width="item.labelWidth || item['label-width'] || ''"
      :required="item.required || false"
      :rules="item.rules || []"
      :size="item.size"
    >
      <el-date-picker :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
        :type="item.elemType || 'daterange'"
        v-bind="item.attrs"
        v-on="$listeners"
        v-model="formData[item.model]"
        :disabled="item.disabled || false"
        :range-separator="item.rangeSeparator"
        :start-placeholder="item.startPlaceholder"
        :end-placeholder="item.endPlaceholder"
      ></el-date-picker>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'DatePickerFromToForm',
  componentName: 'DatePickerFromToForm',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  }
}
</script>
