<template>
    <div class="ht-base-date-picker-start-end-demo">
        <ht-base-row>
            <ht-base-col span="24">
                <span>默认：</span>
                <ht-base-date-picker type="daterange" placement="bottom-end" placeholder="请选择" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <span>快捷选择区间：</span>
                <ht-base-date-picker type="daterange" :options="options2" placement="bottom-end" placeholder="请选择" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <span>面板不联动：</span>
                <ht-base-date-picker type="daterange" split-panels placeholder="请选择" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <span>显示星期数区间：</span>
                <ht-base-date-picker type="daterange" show-week-numbers placement="bottom-end" placeholder="请选择" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <span>带确定按钮区间：</span>
                <ht-base-date-picker type="daterange" confirm placement="bottom-end" placeholder="请选择" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <span>禁用：</span>
                <ht-base-date-picker type="daterange" disabled placement="bottom-end" placeholder="请选择" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseDatePickerStartEndDemo',
      data(){
        return {
            options2: {
                shortcuts: [
                    {
                        text: '一周',
                        value () {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            return [start, end];
                        }
                    },
                    {
                        text: '一个月',
                        value () {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            return [start, end];
                        }
                    },
                    {
                        text: '一季度',
                        value () {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            return [start, end];
                        }
                    }
                ]
            }
        }
      }
  }
</script>
<style>
    .ht-base-date-picker-start-end-demo {

    }
</style>

