<template>
  <div class="ui-wrap">
    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value3"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">月</span>
    <el-date-picker
      v-model="value2"
      type="month"
      placeholder="选择月">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">年</span>
    <el-date-picker
      v-model="value4"
      type="year"
      placeholder="选择年">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">周</span>
    <el-date-picker
      v-model="value5"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="选择周">
    </el-date-picker>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: ''
    };
  }
};
</script>

<style lang="scss">
.ui-wrap > div {
  margin-bottom: 10px;
  margin-top: 20px;
}
.el-form-item__content {
  margin-left: 0 !important;
}
.el-select .el-input {
  width: 100px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>