element的el-date-picker组件实现只显示年月日时分效果(不显示秒)

 更新时间:2024年08月28日 10:04:29   作者:阿wei程序媛  
最近遇到这样的需求使用element的el-date-picker组件,只显示时分,不显示秒,下面小编给大家分享element的el-date-picker组件实现只显示年月日时分效果,感兴趣的朋友一起看看吧

element的el-date-picker组件实现只显示年月日时分效果(不显示秒)

需求:使用element的el-date-picker组件,只显示时分,不显示秒

效果:

解决方法:

 <el-date-picker
   v-model="ruleForm.startTime"
   type="datetime"
   placeholder="开始时间"
   format="yyyy-MM-dd HH:mm"
   @change="beginDateChange"
   >
</el-date-picker>

重点:format="yyyy-MM-dd HH:mm"

补充:

el-date-picker 日期选择器默认日期为当天日期

1.设置默认日期为当前日期

 <el-form-item prop="borrowDate">
      <el-date-picker
        type="date"
        placeholder="选择日期"
        :disabled="disabledS"
        v-model="formList.borrowDate"
        :picker-options="expireTimeOption"
        style="width: 100%"
       ></el-date-picker>
     </el-form-item>
   </el-descriptions-item>
 formList: {
        borrowDate: null,//日期
      },
  created() {
    // 设置topAddForm.receiveTime为当前日期
    this.formList.borrowDate = new Date().toISOString().substr(0, 10); 
}

到此这篇关于element的el-date-picker组件实现只显示年月日时分不显示秒的文章就介绍到这了,更多相关element el-date-picker组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue router动态路由下让每个子路由都是独立组件的解决方案

    这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue使用原生swiper代码实例

    vue使用原生swiper代码实例

    这篇文章主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Vue项目中使用vuex详解

    Vue项目中使用vuex详解

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue2使用jspdf插件实现页面自定义块pdf下载方式

    vue2使用jspdf插件实现页面自定义块pdf下载方式

    本文介绍了在Vue项目中实现PDF下载功能的案例,使用了jspdf和html2-canvas插件,实现了点击按钮弹出下载进度弹窗并显示四个模块下载进度,下载完成后关闭弹窗的功能,文中提供了使用的插件版本和相关代码,供读者参考
    2026-04-04
  • Vue3中导航守卫的基本使用方法

    Vue3中导航守卫的基本使用方法

    这篇文章主要给大家介绍了关于Vue3中导航守卫的基本使用方法,正如其名vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,下面需要的朋友可以参考下
    2023-03-03
  • Vue中nextTick的原理分析

    Vue中nextTick的原理分析

    本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能
    2025-02-02
  • Vue 组件上的v-model双向绑定原理解析

    Vue 组件上的v-model双向绑定原理解析

    这篇文章主要介绍了Vue 组件上的v-model双向绑定原理,从本文的学习可以知道组件上v-model指令的本质也是生成了value属性和input事件,具体实例代码跟随小编一起看看吧
    2022-05-05
  • Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法

    Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法

    本文主要介绍了Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • Vue数据驱动模拟实现4

    Vue数据驱动模拟实现4

    这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,介绍了Array的变异方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • vue.js在标签属性中插入变量参数的方法

    vue.js在标签属性中插入变量参数的方法

    这篇文章主要介绍了vue.js在标签属性中插入变量参数的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03

最新评论