antd日期選擇器禁止選擇當(dāng)天之前的時(shí)間操作
使用disabledDate屬性（不可選擇的日期）
<a-date-picker @change="dateChange" :disabledDate="disabledDate" v-decorator="['endDate']"/>
在js中定義函數(shù)并返回
//限制當(dāng)天之前的日期不可選
disabledDate(current) {
return current && current <moment().subtract(1, "days"); //當(dāng)天之前的不可選，不包括當(dāng)天
//return current && current < moment().endOf(‘day');當(dāng)天之前的不可選，包括當(dāng)天
}
補(bǔ)充知識(shí)：antd DatePicker RangePicker限制時(shí)間范圍，其中結(jié)束時(shí)間限制時(shí)分秒不可選
需求：選擇時(shí)間區(qū)間，且只能選擇當(dāng)前時(shí)刻之前的時(shí)間，且時(shí)分秒也要做限制。（比如現(xiàn)在是2019-11-13 10:29:31，那就只能選擇此刻以前的，尚未發(fā)生的時(shí)間不可選。）
期望圖如下：
實(shí)現(xiàn)：
1. 首先在頁(yè)面引入時(shí)間控件與moment插件
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
2. 在render中使用時(shí)間控件。
限制日期不可選是disabledDate，限制時(shí)間不可選是disabledTime（我是與form表單一起使用，可根據(jù)情況自行選擇）
<FormItem label="回溯時(shí)間區(qū)間" {...formItemLayout}>
{getFieldDecorator("time",{
rules: [{
required: true,
message: "請(qǐng)選擇回溯區(qū)間"
}],
})(
<RangePicker
disabledDate={this.disabledDate} // 限制日期不可選
disabledTime={this.disabledDateTime} // 限制時(shí)間不可選
format="YYYY-MM-DD HH:mm:ss" // 時(shí)間格式
placeholder={['開(kāi)始時(shí)間', '結(jié)束時(shí)間']}
showTime // 增加時(shí)間選擇按鈕
/>
)}
</FormItem>
3. 用函數(shù)做具體的邏輯判斷。
disabledDate=(current)=>{
return current && current >= moment().endOf('day'); // 選擇時(shí)間要大于等于當(dāng)前天。若今天不能被選擇，去掉等號(hào)即可。
}
range = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};
disabledDateTime = (dates,partial) => {
let hours = moment().hours();//0~23
let minutes = moment().minutes();//0~59
let seconds = moment().seconds();//0~59
//當(dāng)日只能選擇當(dāng)前時(shí)間之后的時(shí)間點(diǎn)
if (dates&&moment(dates[1]).date() === moment().date()&&partial=='end') {
return {
disabledHours: () => this.range(hours+1,23),
disabledMinutes: () => this.range(minutes+1,59),
disabledSeconds: () => this.range(seconds+1,59),
};
}
}
以上這篇antd日期選擇器禁止選擇當(dāng)天之前的時(shí)間操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺析vue偵測(cè)數(shù)據(jù)的變化之基本實(shí)現(xiàn)
這里涉及到Vue一個(gè)重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對(duì)象，當(dāng)我們修改時(shí)，視圖會(huì)被更新，而變化偵測(cè)是響應(yīng)式系統(tǒng)的核心2021-06-06
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個(gè)即時(shí)的原子CSS引擎,它可以讓你用簡(jiǎn)短的類名來(lái)控制元素的樣式,而不需要寫(xiě)復(fù)雜的CSS代碼,需要的朋友可以參考下2023-07-07
詳解從新建vue項(xiàng)目到引入組件Element的方法
本篇文章主要介紹了詳解從新建vue項(xiàng)目到引入組件Element的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析
這篇文章主要介紹了Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要給大家介紹了關(guān)于Vue中ref和$refs使用方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
electron?dialog.showMessageBox的使用案例
Electron?Dialog?模塊提供了api來(lái)展示原生的系統(tǒng)對(duì)話框,本文主要介紹了electron?dialog.showMessageBox的使用案例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Vue中使用JWT進(jìn)行身份認(rèn)證也是一種常見(jiàn)的方式,它能夠更好地保護(hù)用戶的信息,本文主要介紹了Vue開(kāi)發(fā)中Jwt的使用詳解,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要給大家介紹了關(guān)于vue升降版本以及如何查看項(xiàng)目版本的相關(guān)資料,在開(kāi)發(fā)和維護(hù)Vue.js應(yīng)用程序時(shí)了解所使用的Vue.js版本非常重要,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
VueCli4項(xiàng)目配置反向代理proxy的方法步驟
這篇文章主要介紹了VueCli4項(xiàng)目配置反向代理proxy的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05