el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法
在element ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒，查了很多資料寫的都不準(zhǔn)確
需求：實(shí)現(xiàn)日期時(shí)間組件可選擇當(dāng)前日期，比如當(dāng)前是2024年01月17號(hào)下午17：21 那選中時(shí)必須結(jié)束時(shí)間為17：21 也可選01月17號(hào)當(dāng)天其他的時(shí)間（很多文章超過17：21都不能選了，搞得我頭疼
效果如下：
不多說，上代碼：
:default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"設(shè)置當(dāng)前默認(rèn)結(jié)束時(shí)間new Date().toLocaleTimeString(‘chinese’, { hour12: false })
布局
這里主要代碼是
<el-form-item prop="carDate">
<el-date-picker
v-model="ruleForm.carDate"
:picker-options="pickerOptions"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"
range-separator="至"
start-placeholder="開始時(shí)間"
end-placeholder="結(jié)束時(shí)間"
>
</el-date-picker>
</el-form-item>校驗(yàn)
pickerOptions: {
disabledDate: time => {
return time.getTime() > Date.now()
}
},難點(diǎn)：默認(rèn)選中當(dāng)前時(shí)分秒
補(bǔ)充：
el-date-picker如果超過限制跨度則提示
需求：實(shí)現(xiàn)日期時(shí)間選擇組件跨度如果超過限制天數(shù)，點(diǎn)擊查詢則提示超過限制時(shí)間
封裝一個(gè)方法，傳入開始和結(jié)束時(shí)間以及限制天數(shù)，如果超過則返回false
//計(jì)算時(shí)間跨度是否超過限制天數(shù)
isTimeSpanWithinLimit(startTime, endTime, limitDays) {
const startDateTime = new Date(startTime)
const endDateTime = new Date(endTime)
const timeDifference = endDateTime - startDateTime
const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24))
return daysDifference <= limitDays
}到此這篇關(guān)于el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的文章就介紹到這了,更多相關(guān)el-date-picker時(shí)分秒內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇
- vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
- el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
- Vue3+ElementPlus el-date-picker設(shè)置可選時(shí)間范圍的示例代碼
- vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決
- vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍demo
- el-date-picker日期范圍限制的實(shí)現(xiàn)
- Element?el-date-picker?日期選擇器的使用
- elementUI組件中el-date-picker限制時(shí)間范圍精確到小時(shí)的方法
- vue使用element-ui的el-date-picker設(shè)置樣式無效的解決
- 簡單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題
相關(guān)文章
Vue $mount實(shí)戰(zhàn)之實(shí)現(xiàn)消息彈窗組件
這篇文章主要介紹了Vue $mount實(shí)現(xiàn)消息彈窗組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue.js?el-table虛擬滾動(dòng)完整實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動(dòng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念，下面這篇文章主要給大家介紹了關(guān)于Vue CLI中模式與環(huán)境變量的相關(guān)資料，需要的朋友可以參考下2021-05-05
vue使用stompjs實(shí)現(xiàn)mqtt消息推送通知
這篇文章主要為大家詳細(xì)介紹了vue中使用stompjs實(shí)現(xiàn)mqtt消息推送通知，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue項(xiàng)目中ESLint配置超全指南(VScode)
ESLint是一個(gè)代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESLint配置(VScode)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue:el-input輸入時(shí)限制輸入的類型操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3計(jì)算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計(jì)算屬性適用于對已有的數(shù)據(jù)進(jìn)行計(jì)算,派生新的數(shù)據(jù),并在模板中使用；而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場景,選擇適合的機(jī)制這篇文章主要介紹了Vue3計(jì)算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02
vue3中$attrs的變化與inheritAttrs的使用詳解
$attrs現(xiàn)在包括class和style屬性。?也就是說在vue3中$listeners不存在了，vue2中$listeners是單獨(dú)存在的，在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性，這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下2022-10-10
vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法
這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法,這個(gè)錯(cuò)誤是因?yàn)閂ue不能加載本地資源的原因,需要的朋友可以參考下2023-07-07