element-plus form表单组件之el-date-picker日期选择器组件

admin2024-06-29  23

el-date-picker日期选择器组件可根据年,月,日期,时间范围来进行选择,可以自定义日期格式,和样式,还提供多种内置事件。

主要属性如下

属性名说明类型可选值默认值
model-value / v-model绑定值,如果它是数组,长度应该是 2Date / number / string / Array— —
readonly只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringlarge/default/smalldefault
placeholder非范围选择时的占位内容string
type显示类型stringyear/month/date/datetime/ week/datetimerange/daterangedate
format显示在输入框中的格式stringdate formats(时间格式字符串)YYYY-MM-DD HH:mm:ss
default-value可选,选择器打开时默认显示的时间Date/[Date, Date]
default-time00:00:00Date / [Date, Date]

事件

事件名说明函数入参
change日期组件值改变时触发value:选择的值,类型为Date
在ui上选择日期和时间后日期组件v-model绑定的响应式变量的类型都会比变成date类型

用法示例

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const date1=ref(null);
const date2=ref(null);
const date3=ref(null);

const startDate=new Date()
startDate.setDate(startDate.getDate()-1);


const endDate=new Date()
endDate.setDate(startDate.getDate()+7);

const date4=ref([startDate,endDate]);

const changeEvent=function(val):void{
  console.info('change ',val)
}

const date5=ref('2024-06-22 11:00:00');
const date6=ref(null);


</script>

    
<template>
  <div>
    <el-row gutter="30">
        <el-col span="12">月份选择器</el-col>
        <el-col span="12">
          <el-date-picker v-model="date1" size="large" type="month"></el-date-picker>
        </el-col>
    </el-row>

    <el-row gutter="30">
        <el-col span="12">月份范围选择器</el-col>
        <el-col span="12">
          <el-date-picker v-model="date2" size="large" type="monthrange"  clearable="true"></el-date-picker>
        </el-col>
    </el-row>


    <el-row gutter="30">
        <el-col span="12">日期选择器</el-col>
        <el-col span="12">
          <el-date-picker v-model="date3" size="large" ></el-date-picker>
        </el-col>
    </el-row>

    <el-row gutter="30">
        <el-col span="12">日期范围选择器</el-col>
        <el-col span="12">
          <el-date-picker v-model="date4" size="large" type="daterange"  @change="changeEvent" clearable="true"></el-date-picker>
        </el-col>
    </el-row>

    <el-row gutter="30">
        <el-col span="12">日期时间选择器</el-col>
        <el-col span="12">
          <el-date-picker v-model="date5" size="large" type="datetime" ></el-date-picker>
        </el-col>
    </el-row>

    <el-row gutter="30">
        <el-col span="12">日期时间范围选择器</el-col>
        <el-col span="12">
          <el-date-picker v-model="date6" size="large" type="datetimerange"   clearable="true"></el-date-picker>
        </el-col>
    </el-row>

    
   
  </div>
      
</template>

<style scoped>
  
</style>

element-plus form表单组件之el-date-picker日期选择器组件,在这里插入图片描述,第1张
https://element-plus.org/zh-CN/component/datetime-picker.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!