# Date-picker 日期选择器

<template>
  <w-date-picker
    type="date"
    v-model="value1"
    format="yyyy 年 MM 月 dd 日"
    placeholder="    年  月  日"
  ></w-date-picker>
</template>
<script>
export default {
  data () {
    return {
      value1: ''
    }
  }
}
</script>

<template>
  <w-date-picker
    type="date"
    v-model="value1"
    size="small">
  </w-date-picker>
</template>
<script>
  export default {
    data () {
      return {
        value1: ''
      }
    }
  }
</script>
      

<template>
  <section class="date-picker-demo">
      <w-date-picker type="week"
                      format="yyyy 第 WW 周"
                      v-model="value1"
                      placeholder="请选择周">
      </w-date-picker>
  </section>
</template>

<script>
export default {
  data() {
    return {
      value1: ''
    }
  }
}
</script>

<template>
  <w-date-picker v-model="value1" type="month" placeholder="选择月">
  </w-date-picker>
</template>
<script>
export default {
  data () {
    return {
      value1: ''
    }
  }
}
</script>

<template>
  <w-date-picker v-model="value1" type="year" placeholder="选择年">
  </w-date-picker>
</template>
<script>
export default {
  data () {
    return {
      value1: ''
    }
  }
}
</script>

<template>
  <w-date-picker :value="date" :open="openDatePicker"
                  type="date" format="yyyy - MM - dd"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择日期"
                  @input="setDate"
                  @pick="setDate"
                  @open-change="val => openDatePicker = val">
    <date-inputs v-model="dateInputs"
      @toggle-date-picker="onToggleDatePicker" />
  </w-date-picker>
</template>
<script>
// 请根据业务需求自行开发DateInputs组件
import DateInputs from '../business-components/TheDateInputs'
import { validateDate } from './utils'
export default {
  data () {
    return {
      openDatePicker: false,
      date: '',
      dateInputs: '',
    }
  },
  components: {
    DateInputs
  },
  methods: {
    onToggleDatePicker() {
      if (!validateDate(this.date)) {
        this.setDate('')
      }
      this.openDatePicker = !this.openDatePicker
    },
    setDate(val) {
      this.date = this.dateInputs = val
    }
  },
  watch: {
    dateInputs(val) {
      if (validateDate(val)) {
        this.date = val
      }
    }
  }
}
</script>

<template>
  <section class="date-picker-demo">
    <w-date-picker
      v-model="value2"
      type="date"
      :picker-options="pickerOptions"
      placeholder="请选择日期">
    </w-date-picker>
  </section>
</template>
<script>
export default {
  data () {
    return {
      value2: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
        }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
        }]
      }
    }
  }
}
</script>

<template>
  <w-date-picker v-model="value1" type="dates" placeholder="选择多个日期">
  </w-date-picker>
</template>
<script>
export default {
  data () {
    return {
      value1: ''
    }
  }
}
</script>

<template>
  <section class="date-picker-demo">
      <w-date-picker :picker-options="pickerOptionsStart"
                      format="yyyy-MM-dd"
                      v-model="startValue"
                      @open-change="handleStartOpenChange"
                      placeholder="开始日期">
      </w-date-picker>
      <div class="range-separator"><span>至</span></div>
      <w-date-picker :picker-options="pickerOptionsEnd"
                      format="yyyy-MM-dd"
                      placeholder="结束日期"
                      v-model="endValue"
                      :open="endOpen"
                      @open-change="handleEndOpenChange">
      </w-date-picker>
  </section>
</template>

<script>
export default {
  data() {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
      pickerOptionsStart: {
        disabledDate: startValue => {
          const endValue = this.endValue;
          if (!startValue || !endValue) {
            return false;
          }
          return startValue.valueOf() > endValue.valueOf();
        },
      },
      pickerOptionsEnd: {
        disabledDate: endValue => {
          const startValue = this.startValue;
          if (!endValue || !startValue) {
            return false;
          }
          return startValue.valueOf() >= endValue.valueOf();
        },
      },
    }
  },
  computed: {
  },
  watch: {
    startValue(val) {
      console.log('startValue', val);
    },
    endValue(val) {
      console.log('endValue', val);
    },
  },
  methods: {
    handleStartOpenChange(open) {
      if (!open) this.endOpen = true;
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
  },
}
</script>
<style scoped lang="scss">
.date-picker-demo {
  .w-date-editor {
    margin: 0 10px;
  }
  .range-separator {
    display: inline-block;
    line-height: 32px;
    vertical-align: middle;
    font-size: 14px;
  }
}
</style>

<template>
  <w-date-picker v-model="value3"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
  </w-date-picker>
</template>
<script>
export default {
  data () {
    return {
      value3: ''
    }
  }
}
</script>

<template>
  <w-date-picker v-model="value4"
    size="medium"
    type="monthrange"
    range-separator="至"
    start-placeholder="开始月份"
    end-placeholder="结束月份">
  </w-date-picker>
</template>
<script>
export default {
  data () {
    return {
      value4: ''
    }
  }
}
</script>