el-date-picker

喵喵酱仔__

已于 2023-04-22 19:41:47 修改

阅读量219

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2023-04-22 18:35:51 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/130308421

element-ui 专栏收录该内容

24 篇文章

订阅专栏

该文展示了如何在Vue.js中使用ElementUI的日期选择器组件，包括单个日期选择（入职时间和入党时间），以及日期范围选择（起止日期）。组件配置了不同的属性如v-model、type、format和value-format，以控制显示格式和数据传递给后台的格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 使用

    <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              class="inputW"
              value-format="YYYY-MM-DD"
               format="yyyy-MM-dd"
            />
          </el-form-item>



export default {
  data() {
    return {
       userInfo：{
             timeOfEntry:'2023-04-22'
      }
 
   }
}

   <el-form-item label="入党时间">
          <el-date-picker
            v-model="formData.timeToJoinTheParty"
            type="date"
            placeholder="选择日期"
            class="inputW"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

     <el-form-item label="起止日期">
                <el-date-picker
                  v-model="queryParams.sta"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  size="mini"
                  range-separator="至"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>

拿到的是一个数组，第一位是开始日期，第二位是结束日期

format 展示的格式， value-format 传给后台的格式