快捷導(dǎo)航

element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果(不顯示秒)

更新時(shí)間：2024年08月28日 10:04:29 作者：阿wei程序媛

最近遇到這樣的需求使用element的el-date-picker組件,只顯示時(shí)分,不顯示秒,下面小編給大家分享element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果,感興趣的朋友一起看看吧

需求：使用element的el-date-picker組件，只顯示時(shí)分，不顯示秒

效果：

解決方法：

 <el-date-picker
   v-model="ruleForm.startTime"
   type="datetime"
   placeholder="開始時(shí)間"
   format="yyyy-MM-dd HH:mm"
   @change="beginDateChange"
   >
</el-date-picker>

重點(diǎn)：format="yyyy-MM-dd HH:mm"

補(bǔ)充：

el-date-picker 日期選擇器默認(rèn)日期為當(dāng)天日期

1.設(shè)置默認(rèn)日期為當(dāng)前日期

 <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() {
    // 設(shè)置topAddForm.receiveTime為當(dāng)前日期
    this.formList.borrowDate = new Date().toISOString().substr(0, 10); 
}

到此這篇關(guān)于element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分不顯示秒的文章就介紹到這了,更多相關(guān)element el-date-picker組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue router動態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案
這篇文章主要介紹了vue router動態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-04-04
vue使用原生swiper代碼實(shí)例
這篇文章主要介紹了vue使用原生swiper代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
Vue項(xiàng)目中使用vuex詳解
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue2使用jspdf插件實(shí)現(xiàn)頁面自定義塊pdf下載方式
本文介紹了在Vue項(xiàng)目中實(shí)現(xiàn)PDF下載功能的案例,使用了jspdf和html2-canvas插件,實(shí)現(xiàn)了點(diǎn)擊按鈕彈出下載進(jìn)度彈窗并顯示四個(gè)模塊下載進(jìn)度,下載完成后關(guān)閉彈窗的功能,文中提供了使用的插件版本和相關(guān)代碼,供讀者參考
2026-04-04
Vue3中導(dǎo)航守衛(wèi)的基本使用方法
這篇文章主要給大家介紹了關(guān)于Vue3中導(dǎo)航守衛(wèi)的基本使用方法,正如其名vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,下面需要的朋友可以參考下
2023-03-03
Vue中nextTick的原理分析
本文詳細(xì)介紹了Vue中nextTick的原理和使用方法,Vue采用異步渲染機(jī)制,通過nextTick可以確保在DOM更新后執(zhí)行回調(diào),nextTick依賴微任務(wù)和宏任務(wù),優(yōu)先使用Promise,降級到MutationObserver/setTimeout,Vue3進(jìn)一步優(yōu)化了nextTick,減少了復(fù)雜度并提升了性能
2025-02-02
Vue?組件上的v-model雙向綁定原理解析
這篇文章主要介紹了Vue?組件上的v-model雙向綁定原理,從本文的學(xué)習(xí)可以知道組件上v-model指令的本質(zhì)也是生成了value屬性和input事件，具體實(shí)例代碼跟隨小編一起看看吧
2022-05-05
Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)4
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)的相關(guān)資料，介紹了Array的變異方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法
這篇文章主要介紹了vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-03-03