網站首頁 編程語言 正文
一、場景:
有兩個時間選擇器A和B。A的時間任意選,B的時間必須選擇A之后的時間。此時就需要給B設置可選時間區間,而且是動態的值,既動態設置picker-options 中的disabledDate。
二、代碼片段
html:
<el-col :span="8">
<el-form-item label="A時間" prop="Atime">
<el-date-picker value-format="yyyy-MM-dd" v-model="Atime" type="date" placeholder="選擇日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="延期至:" prop="Btime">
<el-date-picker value-format="yyyy-MM-dd" v-model="Btime" type="date" placeholder="選擇日期" :picker-options="setDateRange">
</el-date-picker>
</el-form-item>
</el-col>
data:
data() {
return {
Atime:'',
Btime:'',
setDateRange: {
disabledDate: this.disabledDate // 這是一個方法
}
}
},
methods:
methods:{
disabledDate (time) {
// 當時間小于A時間 就是不可選
return time.getTime() < new Date(this.Atime).getTime()
// 上方的new Date(this.Atime).getTime() 是將日期格式'2022-02-10' 轉成時間戳 1589068800000
},
}
三、 拓展:如何用js將日期轉換成時間戳
new Date('2022-06-01').getTime()
四、時間戳轉日期方法1
function getTime(dateStr){
var date = new Date(dateStr);
var Month = date.getMonth() + 1;
var Day = date.getDate();
var Y = date.getFullYear() + '-';
var M = Month < 10 ? '0' + Month + '-' : Month + '-';
var D = Day + 1 < 10 ? '0' + Day : Day;
return Y + M + D;
}
getTime(1654074822778) //就會得到 '2022-06-01' 注意參數傳的是數字不是字符串
有效的請點贊收藏支持一波!
原文鏈接:https://blog.csdn.net/i_am_a_div/article/details/125069288
相關推薦
- 2022-12-21 C++強制轉換與智能指針示例詳解_C 語言
- 2022-01-20 console基礎用法,輸出添加css,打印時間差,計數等
- 2022-12-11 Dos判斷文件夾是否存在,如果存在刪除,不存在創建_DOS/BAT
- 2022-09-15 Python利用prettytable實現格式化輸出內容_python
- 2022-05-25 flutter實現底部導航欄_Android
- 2022-11-24 Android開發使用Message對象分發必備知識點詳解_Android
- 2023-02-14 C#實現ComboBox變色的示例代碼_C#教程
- 2022-07-10 pdb時區問題:與當前時間不一致
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支