快捷導(dǎo)航

el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法

更新時(shí)間：2024年01月19日 09:47:11 作者：前端搬磚達(dá)人

在element?ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒,查了很多資料寫的都不準(zhǔn)確?,今天給大家分享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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: