9.日期选择器
-- 未经授权禁止转载 --

代码

demo\src\main.js
    import { createApp } from 'vue'

    //整体导入 ElementPlus 组件库
    import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
    import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
    import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包

    import App from './App.vue'

    const app = createApp(App)

    //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

    //app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中s
    app.use(ElementPlus, {
        locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
    })
    app.mount('#app')

demo\src\App.vue
    <script setup>
        import { ref } from 'vue'
        
        const date = ref('')

        const dateChange = (val) => {
            console.log("dateChange:", val)
        }
    </script>

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

        <h3>日期时间</h3>
        <el-date-picker v-model="date" type="datetime" placeholder="请选择" />

        <h3>事件绑定</h3>
        <el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" @change="dateChange" />
    </template>

    <style scoped>

    </style>