Element Plus日期时间组件：DatePicker、TimePicker完整教程-优快云博客

Element Plus日期时间组件：DatePicker、TimePicker完整教程

【免费下载链接】element-plus element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库，提供了丰富且易于使用的 UI 组件，用于快速搭建企业级桌面和移动端的前端应用。项目地址: https://gitcode.com/GitHub_Trending/el/element-plus

还在为Vue 3项目中的日期时间选择而烦恼吗？Element Plus提供了强大且易用的日期时间组件，本文将为你全面解析DatePicker和TimePicker的使用技巧，助你轻松构建专业级的时间选择功能。

📋 读完本文你将掌握

DatePicker各种类型的使用方法
TimePicker的基础和高级配置
日期时间范围选择的最佳实践
自定义格式和快捷选项配置
响应式设计和移动端适配技巧

🚀 DatePicker组件详解

基础用法

DatePicker是Element Plus中最常用的日期选择组件，支持多种类型：

<template>
  <el-date-picker
    v-model="selectedDate"
    type="date"
    placeholder="选择日期"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedDate = ref('')
</script>

类型对比表

类型	描述	适用场景
`date`	单个日期选择	生日、预约日期
`daterange`	日期范围选择	预订时间段、统计周期
`datetime`	日期时间选择	会议时间、活动时间
`datetimerange`	日期时间范围	工作时间段、活动周期
`month`	月份选择	月度报告、月度统计
`year`	年份选择	年度计划、年份筛选

日期范围选择实战

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :shortcuts="shortcuts"
  />
</template>

<script setup>
import { ref } from 'vue'

const dateRange = ref([])

const 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]
    }
  }
]
</script>

⏰ TimePicker时间选择器

基础时间选择

<template>
  <div class="time-picker-demo">
    <el-time-picker 
      v-model="selectedTime" 
      placeholder="选择时间"
    />
    <el-time-picker
      v-model="selectedTime2"
      arrow-control
      placeholder="箭头控制时间"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedTime = ref()
const selectedTime2 = ref()
</script>

<style>
.time-picker-demo .el-date-editor {
  margin: 8px;
}
</style>

时间选择器配置选项

mermaid

🔄 日期时间组合选择

DateTimePicker完整示例

<template>
  <div class="datetime-demo">
    <div class="block">
      <span class="label">基础日期时间选择</span>
      <el-date-picker
        v-model="datetimeValue"
        type="datetime"
        placeholder="选择日期和时间"
      />
    </div>
    
    <div class="block">
      <span class="label">带快捷选项</span>
      <el-date-picker
        v-model="datetimeValue2"
        type="datetime"
        placeholder="选择日期和时间"
        :shortcuts="datetimeShortcuts"
      />
    </div>
    
    <div class="block">
      <span class="label">设置默认时间</span>
      <el-date-picker
        v-model="datetimeValue3"
        type="datetime"
        placeholder="选择日期和时间"
        :default-time="defaultTime"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const datetimeValue = ref('')
const datetimeValue2 = ref('')
const datetimeValue3 = ref('')

const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const datetimeShortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  }
]
</script>

<style scoped>
.datetime-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  min-width: 300px;
}

.label {
  margin-bottom: 12px;
  color: #606266;
  font-size: 14px;
}
</style>

🎨 自定义格式与样式

日期格式自定义

<template>
  <el-date-picker
    v-model="formattedDate"
    type="date"
    placeholder="选择日期"
    format="YYYY年MM月DD日"
    value-format="YYYY-MM-DD"
  />
</template>

<script setup>
import { ref } from 'vue'

const formattedDate = ref('')
</script>

常用格式说明

格式符	描述	示例
YYYY	4位年份	2024
MM	2位月份	01-12
DD	2位日期	01-31
HH	24小时制	00-23
mm	分钟	00-59
ss	秒钟	00-59

📱 响应式设计最佳实践

移动端适配方案

<template>
  <div class="responsive-date-picker">
    <el-date-picker
      v-model="mobileDate"
      type="date"
      placeholder="选择日期"
      :class="{ 'mobile-optimized': isMobile }"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const mobileDate = ref('')
const isMobile = ref(false)

const checkMobile = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
.responsive-date-picker {
  width: 100%;
}

.mobile-optimized {
  width: 100% !important;
}

@media (max-width: 768px) {
  :deep(.el-date-editor.el-input) {
    width: 100%;
  }
  
  :deep(.el-date-editor.el-input__wrapper) {
    width: 100%;
    max-width: 300px;
  }
}
</style>

🛠️ 高级功能与技巧

自定义前缀图标

<template>
  <el-date-picker
    v-model="customDate"
    type="date"
    placeholder="选择日期"
  >
    <template #prefix>
      <el-icon><calendar /></el-icon>
    </template>
  </el-date-picker>
</template>

<script setup>
import { ref } from 'vue'
import { Calendar } from '@element-plus/icons-vue'

const customDate = ref('')
</script>

禁用特定日期

<template>
  <el-date-picker
    v-model="dateWithDisabled"
    type="date"
    placeholder="选择日期"
    :disabled-date="disabledDate"
  />
</template>

<script setup>
import { ref } from 'vue'

const dateWithDisabled = ref('')

const disabledDate = (time) => {
  // 禁用周末
  return time.getDay() === 0 || time.getDay() === 6
}
</script>

📊 实战案例：预约系统

<template>
  <div class="appointment-system">
    <h3>会议室预约系统</h3>
    
    <el-form :model="appointmentForm" label-width="120px">
      <el-form-item label="预约日期">
        <el-date-picker
          v-model="appointmentForm.date"
          type="date"
          placeholder="选择预约日期"
          :disabled-date="disablePastDates"
        />
      </el-form-item>
      
      <el-form-item label="时间范围">
        <el-time-picker
          v-model="appointmentForm.timeRange"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitAppointment">
          提交预约
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const appointmentForm = ref({
  date: '',
  timeRange: []
})

const disablePastDates = (time) => {
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}

const submitAppointment = () => {
  if (!appointmentForm.value.date || !appointmentForm.value.timeRange.length) {
    ElMessage.warning('请完善预约信息')
    return
  }
  
  ElMessage.success('预约提交成功！')
  // 这里可以添加API调用逻辑
}
</script>

<style scoped>
.appointment-system {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h3 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}
</style>

🎯 总结与最佳实践

通过本文的学习，你应该已经掌握了Element Plus日期时间组件的核心用法。记住以下最佳实践：

选择合适的类型：根据业务场景选择date、daterange、datetime等类型
合理使用快捷选项：为用户提供常用的时间选择快捷方式
注意移动端适配：确保在小屏幕设备上的良好体验
提供清晰的提示：使用placeholder和label明确指导用户操作
验证用户输入：结合表单验证确保数据的完整性

Element Plus的日期时间组件不仅功能强大，而且具有良好的可定制性，能够满足各种复杂的业务需求。现在就开始在你的Vue 3项目中实践这些技巧吧！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考