# DatePicker 日期选择器
用于选择或输入日期
# 选择日
以「日」为基本单位，基础的日期选择控件
默认
带快捷选项
基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数
<template>
<j-row>
<j-col :span="12">
<p>默认</p>
<j-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</j-date-picker>
</j-col>
<j-col :span="12">
<p>带快捷选项</p>
<j-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</j-date-picker>
</j-col>
</j-row>
</template>
<script>
export default {
data() {
return {
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);
}
}]
},
value1: '',
value2: '',
};
}
};
</script>
显示代码 复制代码 复制代码
# 其他日期单位
通过扩展基础的日期选择，可以选择周、月、年或多个日期
周
月
年
多个日期
<j-row>
<j-col :span="12">
<p>周</p>
<j-date-picker
v-model="value1"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周">
</j-date-picker>
</j-col>
<j-col :span="12">
<p>月</p>
<j-date-picker
v-model="value2"
type="month"
placeholder="选择月">
</j-date-picker>
</j-col>
<j-col :span="12">
<p>年</p>
<j-date-picker
v-model="value3"
type="year"
placeholder="选择年">
</j-date-picker>
</j-col>
<j-col :span="12">
<p>多个日期</p>
<j-date-picker
type="dates"
v-model="value4"
placeholder="选择一个或多个日期">
</j-date-picker>
</j-col>
</j-row>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: ''
};
}
};
</script>
显示代码 复制代码 复制代码
# 选择日期范围
可在一个选择器中便捷地选择一个时间范围
默认
至
带快捷选项
至
在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。
<template>
<div class="block">
<p>默认</p>
<j-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</j-date-picker>
</div>
<div class="block">
<p>带快捷选项</p>
<j-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</j-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
显示代码 复制代码 复制代码
# 选择月份范围
可在一个选择器中便捷地选择一个月份范围
默认
至
带快捷选项
至
在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用unlink-panels属性解除联动。
<template>
<div class="block">
<p>默认</p>
<j-date-picker
v-model="value1"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</j-date-picker>
</div>
<div class="block">
<p>带快捷选项</p>
<j-date-picker
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions">
</j-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '今年至今',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近六个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
显示代码 复制代码 复制代码
# 日期格式
使用format指定输入框的格式；使用value-format指定绑定值的格式。
默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
WARNING
请注意大小写
| 格式 | 含义 | 备注 | 举例 |
|---|---|---|---|
yyyy | 年 | 2017 | |
M | 月 | 不补0 | 1 |
MM | 月 | 01 | |
W | 周 | 仅周选择器的 format 可用；不补0 | 1 |
WW | 周 | 仅周选择器的 format 可用 | 01 |
d | 日 | 不补0 | 2 |
dd | 日 | 02 | |
H | 小时 | 24小时制；不补0 | 3 |
HH | 小时 | 24小时制 | 03 |
h | 小时 | 12小时制，须和 A 或 a 使用；不补0 | 3 |
hh | 小时 | 12小时制，须和 A 或 a 使用 | 03 |
m | 分钟 | 不补0 | 4 |
mm | 分钟 | 04 | |
s | 秒 | 不补0 | 5 |
ss | 秒 | 05 | |
A | AM/PM | 仅 format 可用，大写 | AM |
a | am/pm | 仅 format 可用，小写 | am |
timestamp | JS时间戳 | 仅 value-format 可用；组件绑定值为number类型 | 1483326245000 |
[MM] | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
默认为 Date 对象
值：
使用 value-format
值：
时间戳
值：
<template>
<div class="block">
<p>默认为 Date 对象</p>
<div class="demonstration">值：{{ value1 }}</div>
<j-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日">
</j-date-picker>
</div>
<div class="block">
<p>使用 value-format</p>
<div class="demonstration">值：{{ value2 }}</div>
<j-date-picker
v-model="value2"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</j-date-picker>
</div>
<div class="block">
<p>时间戳</p>
<div class="demonstration">值：{{ value3 }}</div>
<j-date-picker
v-model="value3"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="timestamp">
</j-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: ''
};
}
};
</script>
显示代码 复制代码 复制代码
# 默认显示日期
在选择日期范围时，指定起始日期和结束日期的默认时刻。
组件值：
-
选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组，其中的值为形如12:00:00的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。
<template>
<div class="block">
<p>组件值：{{ value }}</p>
<j-date-picker
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']">
</j-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
显示代码 复制代码 复制代码