Vue DevUI
主题

DatePickerPro 日期选择器

输入或选择日期的组件。

何时使用

当用户需要输入一个日期时；需要点击标准输入框，弹出日期面板进行选择时。

基本用法

Small
Middle
Large
<template>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">Small</div>
    <d-date-picker-pro v-model="datePickerProValue" class="mb20 wh250" size="sm" />
  </div>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">Middle</div>
    <d-date-picker-pro v-model="datePickerProValue2" class="mb20 wh250" />
  </div>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">Large</div>
    <d-date-picker-pro v-model="datePickerProValue3" class="mb20 wh250" size="lg" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue = ref<string>('');
    const datePickerProValue2 = ref<string>('');
    const datePickerProValue3 = ref<string>('');

    return {
      datePickerProValue,
      datePickerProValue2,
      datePickerProValue3,
    };
  },
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}

.wh250 {
  width: 250px;
}
</style>

显示时间 

<template>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250" :showTime="true" format="YYYY/MM/DD HH:mm:ss" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string>('');

    return {
      datePickerProValue1,
    };
  },
});
</script>

自定义日历面板区域

right area
footer
<template>
  <div class="mb10">right area</div>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250" :showTime="true">
    <template #rightArea>
      <slot name="rightArea">
        <ul class="date-picker-right-panel">
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-30);
                }
              "
            >
              一个月前
            </d-button>
            <span>{{ getDateString(-30) }}</span>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-14);
                }
              "
            >
              两周前
            </d-button>
            <span>{{ getDateString(-14) }}</span>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-7);
                }
              "
            >
              一周前
            </d-button>
            <span>{{ getDateString(-7) }}</span>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(0);
                }
              "
            >
              今天
            </d-button>
            <span>{{ getDateString(0) }}</span>
          </li>
        </ul>
      </slot>
    </template>
  </d-date-picker-pro>
  <div class="mb10">footer</div>
  <d-date-picker-pro v-model="datePickerProValue2" class="mb20 wh250" :showTime="true">
    <template #footer>
      <slot name="footer">
        <div class="date-picker-footer">
          <d-button variant="solid" color="secondary" @click="setToday"> 今天 </d-button>
          <d-button variant="solid" color="secondary" @click="clearDate"> 清除时间 </d-button>
        </div>
      </slot>
    </template>
  </d-date-picker-pro>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string | Date>('');
    const datePickerProValue2 = ref<string | Date>('');
    const setDate = (days: number) => {
      datePickerProValue1.value = new Date(new Date().getTime() + days * 24 * 3600 * 1000);
    };
    const getDateString = (days: number) => {
      const date = new Date(new Date().getTime() + days * 24 * 3600 * 1000);
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    };
    const setToday = () => {
      datePickerProValue2.value = new Date(new Date().getTime());
    };
    const clearDate = () => {
      datePickerProValue2.value = '';
    };

    return {
      datePickerProValue1,
      datePickerProValue2,
      setDate,
      getDateString,
      setToday,
      clearDate,
    };
  },
});
</script>
<style>
.date-picker-right-panel {
  padding: 0;
  li {
    list-style-type: none;
    button {
      width: 66px;
    }
    span {
      margin-left: 8px;
    }
  }
}
.date-picker-footer {
  display: flex;
  justify-content: end;
  button {
    margin-left: 10px;
  }
}
</style>

日期格式

通过format指定输入框显示的日期格式, 详见 Format

例如：YYYY-MM-DD

日期格式： YYYY-MM-DD
日期格式： YYYY-MM-DD HH:mm:ss
<template>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">日期格式： YYYY-MM-DD</div>
    <d-date-picker-pro v-model="pickerProFormatValue" class="mb20 wh250" format="YYYY-MM-DD" />
  </div>
  <div class="picker-pro-format-demo">
    <div class="mb10">日期格式： YYYY-MM-DD HH:mm:ss</div>
    <d-date-picker-pro v-model="pickerProFormatValue1" class="mb20 wh250" :showTime="true" format="YYYY-MM-DD HH:mm:ss" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const pickerProFormatValue = ref<string>('');
    const pickerProFormatValue1 = ref<string>('');

    return {
      pickerProFormatValue,
      pickerProFormatValue1,
    };
  },
});
</script>
<style>
.picker-pro-format-demo {
  display: inline-block;
}
.mr30 {
  margin-right: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
</style>

年月选择器

通过type指定选择器类型

year picker
month picker
<template>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">year picker</div>
    <d-date-picker-pro v-model="pickerProFormatValue" class="mb20 wh250" type="year" />
    <div class="mb10">month picker</div>
    <d-date-picker-pro v-model="pickerProFormatValue1" class="mb20 wh250" type="month" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const pickerProFormatValue = ref<string>('');
    const pickerProFormatValue1 = ref<string>('');
    return {
      pickerProFormatValue,
      pickerProFormatValue1,
    };
  },
});
</script>

范围选择器

basic range picker
-
time range picker
-
year range picker
-
month range picker
-
<template>
  <div class="mb10">basic range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue" class="mb20" />
  <div class="mb10">time range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue1" class="mb20" :showTime="true" format="YYYY/MM/DD HH:mm:ss" />
  <div class="mb10">year range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue2" class="mb20 wh250" type="year" />
  <div class="mb10">month range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue3" class="mb20 wh250" type="month" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const rangeDatePickerProValue = ref<string[]>(['', '']);
    const rangeDatePickerProValue1 = ref<string[]>(['', '']);
    const rangeDatePickerProValue2 = ref<string[]>(['', '']);
    const rangeDatePickerProValue3 = ref<string[]>(['', '']);

    return {
      rangeDatePickerProValue,
      rangeDatePickerProValue1,
      rangeDatePickerProValue2,
      rangeDatePickerProValue3,
    };
  },
});
</script>

自定义日期范围面板区域

right area
-
footer
-
<template>
  <div class="mb10">right area</div>
  <d-range-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250" :showTime="true">
    <template #rightArea>
      <slot name="rightArea">
        <ul class="date-picker-right-panel">
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-30);
                }
              "
            >
              一个月前
            </d-button>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-14);
                }
              "
            >
              一周前
            </d-button>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  selectThisWeek();
                }
              "
            >
              当前周
            </d-button>
          </li>
        </ul>
      </slot>
    </template>
  </d-range-date-picker-pro>
  <div class="mb10">footer</div>
  <d-range-date-picker-pro ref="footerCustom" v-model="datePickerProValue2" class="mb20 wh250" :showTime="true">
    <template #footer>
      <slot name="footer">
        <div class="date-picker-footer">
          <d-button variant="solid" color="secondary" @click="clearStartDate"> 清除开始时间 </d-button>
          <d-button variant="solid" color="secondary" @click="clearEndDate"> 清除结束时间 </d-button>
        </div>
      </slot>
    </template>
  </d-range-date-picker-pro>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string | Date[]>(['', '']);
    const datePickerProValue2 = ref<string | Date[]>(['', '']);
    const setDate = (days: number) => {
      datePickerProValue1.value = [new Date(new Date().getTime() + days * 24 * 3600 * 1000), new Date()];
    };
    const selectThisWeek = () => {
      const tody = new Date();
      const start = new Date(new Date().setDate(tody.getDate() - tody.getDay()));
      const end = new Date(new Date().setDate(start.getDate() + 6));
      datePickerProValue1.value = [start, end];
    };

    const footerCustom = ref();

    const clearStartDate = () => {
      const [start, end] = datePickerProValue2.value;
      datePickerProValue2.value = ['', end];
      footerCustom?.value.focusChange('start');
    };
    const clearEndDate = () => {
      const [start, end] = datePickerProValue2.value;
      datePickerProValue2.value = [start, ''];
      footerCustom?.value.focusChange('end');
    };

    return {
      datePickerProValue1,
      datePickerProValue2,
      setDate,
      selectThisWeek,
      footerCustom,
      clearStartDate,
      clearEndDate,
    };
  },
});
</script>

禁用选择器

-
<template>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250 mr30" :disabled="true" />
  <d-range-date-picker-pro v-model="datePickerProValue2" class="mb20 wh250" :disabled="true" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string>('');
    const datePickerProValue2 = ref<string[]>(['', '']);

    return {
      datePickerProValue1,
      datePickerProValue2,
    };
  },
});
</script>

设置日历面板可选时间范围

添加 calendarRange 属性设置选择器日历面板显示的时间范围。 添加 limitDateRange 属性设置选择器日历面板可选择的时间范围。

-
<template>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250 mr30" :calendarRange="[2022, 2025]" :limitDateRange="limitDateRange" />
  <d-range-date-picker-pro
    v-model="datePickerProValue2"
    class="mb20 wh250"
    :calendarRange="[2022, 2025]"
    :limitDateRange="limitDateRange"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string>('');
    const datePickerProValue2 = ref<string[]>(['', '']);
    const limitDateRange = ref<Date[]>([new Date(2022, 1, 5), new Date(2023, 1, 5)]);

    return {
      datePickerProValue1,
      datePickerProValue2,
      limitDateRange,
    };
  },
});
</script>

DatePickerPro 参数

参数名类型默认说明跳转 Demo
v-modelDate''必选，选中项绑定的值基本用法
formatFormat'YYYY/MM/DD' | 'YYYY/MM/DD HH:mm:ss'可选，绑定值的日期格式，根据是否 showTime 区别不同默认值日期格式
placeholderstring'请选择日期'可选，输入框的 placeholder基本用法
showTimebooleanfalse可选，是否显示时分秒显示时间
sizestring'md'可选，输入框的尺寸基本用法
disabledbooleanfalse可选，是否禁用选择器禁用选择器
calendarRange[number,number][1970, 2099]可选，设置日历面板显示时间范围设置日历面板可选时间范围
limitDateRange[Date,Date][new Date(calendarRange[0]), new Date(calendarRange[1])]可选，设置日历面板可选时间范围设置日历面板可选时间范围
typestring'date'可选，设置日期选择器类型(date/year/month)年月选择器
show-glow-stylebooleantrue可选，是否显示悬浮发光效果
positionPlacement[]['bottom-start','top-start']可选，自定义下拉面板位置

DatePickerPro 事件

事件名类型说明跳转 Demo
toggleChange(bool: boolean) => void可选，选择器打开关闭 toggle 事件
confirmEvent(date: Date) => void可选，用户确定选定的值时触发
focus(e: MouseEvent) => void可选，输入框获取焦点时触发
blur() => void可选，输入框失去焦点时触发

DatePickerPro 插槽

名称说明跳转 Demo
rightArea自定义 DatePickerPro 日历面板右侧内容， 如：日期快捷选项自定义日历面板区域
footer自定义 DatePickerPro 日历面板下侧内容自定义日历面板区域

DatePickerPro 类型定义

Format 

type Format = string;

日期格式 format 支持的标识列表

标识示例描述
YY22年，两位数
YYYY2022年，四位数
M1-12月，从 1 开始
MM01-12月，两位数字
MMMJan-Dec月，英文缩写
D1-31日
DD01-31日，两位数
H0-2324 小时
HH00-2324 小时，两位数
h1-1212 小时
hh01-1212 小时，两位数
m0-59分钟
mm00-59分钟，两位数
s0-59秒
ss00-59秒，两位数

RangeDatePickerPro 参数

参数名类型默认说明跳转 Demo
v-model[Date, Date]['','']必选，选中项绑定的值范围选择器
formatFormat'YYYY/MM/DD' | 'YYYY/MM/DD HH:mm:ss'可选，绑定值的日期格式，根据是否 showTime 区别不同默认值日期格式
placeholderArray['请选择开始日期', '请选择结束日期']可选，输入框的 placeholder范围选择器
showTimebooleanfalse可选，是否显示时分秒范围选择器
separatorstring'-'可选，范围选择器的分割符范围选择器
sizestring'md'可选，输入框的尺寸
disabledbooleanfalse可选，是否禁用选择器禁用选择器
calendarRange[number,number][1970,2099]可选，设置日历面板显示时间范围设置日历面板可选时间范围
limitDateRange[Date,Date][new Date(calendarRange[0]), new Date(calendarRange[1])]可选，设置日历面板可选时间范围设置日历面板可选时间范围
typestring'date'可选，设置日期选择器类型(date/year/month)范围选择器
show-glow-stylebooleantrue可选，是否显示悬浮发光效果
positionPlacement[]['bottom-start','top-start']可选，自定义下拉面板位置

RangeDatePickerPro 事件

事件名类型说明跳转 Demo
toggleChange(bool: boolean) => void可选，选择器打开关闭 toggle 事件
confirmEvent(date: Date[]) => void可选，用户确定选定的时间范围时触发
focus(e: MouseEvent) => void可选，输入框获取焦点时触发
blur() => void可选，输入框失去焦点时触发

RangeDatePickerPro 插槽

名称说明跳转 Demo
rightArea自定义 RangeDatePickerPro 日历面板右侧内容， 如：日期范围快捷选项自定义日期范围面板区域
footer自定义 RangeDatePickerPro 日历面板下侧内容自定义日期范围面板区域

类型定义

Placement 

type Placement =
  | 'top'
  | 'right'
  | 'bottom'
  | 'left'
  | 'top-start'
  | 'top-end'
  | 'right-start'
  | 'right-end'
  | 'bottom-start'
  | 'bottom-end'
  | 'left-start'
  | 'left-end';
Contributors
粤A2-20044005号