el-date-picker默認結束為當前時分秒的操作方法

更新時間：2024年01月19日 09:47:11 作者：前端搬磚達人

在element?ui中的日期時間選擇組件中默認是00:00,現(xiàn)在需求是點擊默認結束時間為當前時分秒,查了很多資料寫的都不準確?,今天給大家分享el-date-picker默認結束為當前時分秒的操作方法,感興趣的朋友一起看看吧

在element ui中的日期時間選擇組件中默認是00:00,現(xiàn)在需求是點擊默認結束時間為當前時分秒，查了很多資料寫的都不準確

需求：實現(xiàn)日期時間組件可選擇當前日期，比如當前是2024年01月17號下午17：21 那選中時必須結束時間為17：21 也可選01月17號當天其他的時間（很多文章超過17：21都不能選了，搞得我頭疼

效果如下：

不多說，上代碼：

 :default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"

設置當前默認結束時間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="結束時間"
	 >
	 </el-date-picker>
	</el-form-item>

校驗

   pickerOptions: {
        disabledDate: time => {     
          return time.getTime() > Date.now()
        }
      },

難點：默認選中當前時分秒

補充：

el-date-picker如果超過限制跨度則提示

需求：實現(xiàn)日期時間選擇組件跨度如果超過限制天數(shù)，點擊查詢則提示超過限制時間

封裝一個方法，傳入開始和結束時間以及限制天數(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
    }

到此這篇關于el-date-picker默認結束為當前時分秒的文章就介紹到這了,更多相關el-date-picker時分秒內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: