162 lines
4.4 KiB
HTML
162 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>日期选择 Picker Demo</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
padding: 20px;
|
|
}
|
|
.category-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.category-tab {
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.category-tab.active {
|
|
background-color: #409eff;
|
|
color: white;
|
|
border-color: #409eff;
|
|
}
|
|
.shortcut-options {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.shortcut-option {
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.shortcut-option.active {
|
|
background-color: #67c23a;
|
|
color: white;
|
|
border-color: #67c23a;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h2>日期选择器 Demo</h2>
|
|
|
|
<!-- 分类标签 -->
|
|
<div class="category-tabs">
|
|
<div
|
|
v-for="cat in categories"
|
|
:key="cat"
|
|
class="category-tab"
|
|
:class="{ active: selectedCategory === cat }"
|
|
@click="selectCategory(cat)"
|
|
>
|
|
{{ cat }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日期选择器 -->
|
|
<el-date-picker
|
|
v-model="dateValue"
|
|
:type="pickerType"
|
|
placeholder="请选择日期"
|
|
:value-format="valueFormat"
|
|
style="width: 100%;"
|
|
></el-date-picker>
|
|
|
|
<!-- 快捷选项 -->
|
|
<div class="shortcut-options">
|
|
<div
|
|
v-for="item in shortcuts"
|
|
:key="item.label"
|
|
class="shortcut-option"
|
|
:class="{ active: activeShortcut === item.label }"
|
|
@click="applyShortcut(item)"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px;">
|
|
<strong>选择的值:</strong> {{ dateValue }}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
|
<script>
|
|
const { createApp, ref } = Vue
|
|
const { ElDatePicker } = ElementPlus
|
|
|
|
createApp({
|
|
setup() {
|
|
const categories = ['日', '月', '年', '时间', '日期', '范围', '不限']
|
|
const selectedCategory = ref('日')
|
|
const dateValue = ref(null)
|
|
const activeShortcut = ref(null)
|
|
|
|
const shortcuts = [
|
|
{ label: '今天', getValue: () => new Date() },
|
|
{ label: '本月', getValue: () => {
|
|
const now = new Date()
|
|
return [new Date(now.getFullYear(), now.getMonth(), 1), new Date(now.getFullYear(), now.getMonth() + 1, 0)]
|
|
}},
|
|
{ label: '本年', getValue: () => {
|
|
const now = new Date()
|
|
return [new Date(now.getFullYear(), 0, 1), new Date(now.getFullYear(), 11, 31)]
|
|
}},
|
|
]
|
|
|
|
const pickerType = Vue.computed(() => {
|
|
switch(selectedCategory.value){
|
|
case '日': return 'date'
|
|
case '月': return 'month'
|
|
case '年': return 'year'
|
|
case '时间': return 'time'
|
|
case '日期': return 'date'
|
|
case '范围': return 'daterange'
|
|
case '不限': return 'date'
|
|
default: return 'date'
|
|
}
|
|
})
|
|
|
|
const valueFormat = Vue.computed(() => {
|
|
switch(selectedCategory.value){
|
|
case '日': return 'yyyy-MM-dd'
|
|
case '月': return 'yyyy-MM'
|
|
case '年': return 'yyyy'
|
|
case '时间': return 'HH:mm:ss'
|
|
case '日期': return 'yyyy-MM-dd'
|
|
case '范围': return 'yyyy-MM-dd'
|
|
case '不限': return 'yyyy-MM-dd'
|
|
default: return 'yyyy-MM-dd'
|
|
}
|
|
})
|
|
|
|
function selectCategory(cat) {
|
|
selectedCategory.value = cat
|
|
dateValue.value = null
|
|
activeShortcut.value = null
|
|
}
|
|
|
|
function applyShortcut(item) {
|
|
activeShortcut.value = item.label
|
|
dateValue.value = item.getValue()
|
|
}
|
|
|
|
return { categories, selectedCategory, dateValue, pickerType, valueFormat, shortcuts, activeShortcut, selectCategory, applyShortcut }
|
|
}
|
|
}).use(ElementPlus).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html>
|