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