Antd中單個DatePicker限定時間輸入范圍操作
1、某個時間段
import React from 'react';
import moment from 'moment';
class DateDemo extends React.Component{
disabledDate = (current) => {
return current < moment().startOf('day') || current > moment().add(6, 'day') ;
};
datePickerChange = (date) => {
console.log(date,'date即為DatePicker選中的時間');
}
render(){
return(
<div>
<DatePicker
disabledDate={this.disabledDate}
onChange={this.datePickerChange}
/>
</div>
)
}
}
在線查看:單個DatePicker限定時間輸入范圍

這樣就只能選擇從當天算起到七天后的日期,但是時間的時分秒是你選擇的時候系統(tǒng)時間的時分秒,這個有需要的話要額外處理,比如設(shè)置為當天起始值:
... //setHours(hours,min,sec,ms) let day = date ? new Date(date).setHours(0, 0, 0, 0): 0; ...
disabledDate方法中時間相關(guān)api是配合JS的日期處理類庫:Moment.js使用的,moment().startOf('day') 代表今天,moment().add(6, 'day')代表今天加后6天共七天。其他用法可以去官網(wǎng)查看:http://momentjs.cn/
2、向前或向后時間范圍
...
disabledDate = (current) => {
return current && current < moment().endOf('day');
}
...

更詳細的API可以去Antd官網(wǎng)看:https://ant.design/components/date-picker-cn/
補充知識:antd中的disabledDate不可選擇時間的處理
我就廢話不多說了,大家還是直接看代碼吧~
handleData(time){
if(!time){
return false
}else{
// 大于當前日期不能選 time > moment()
// 小于當前日期不能選 time < moment().subtract(1, “days”)
// 只能選前7后7 time < moment().subtract(7, “days”) || time > moment().add(7, ‘d')
return time < moment().subtract(7, “days”) || time > moment().add(7, ‘d')
}
}*
disabledDate = (current) => {
// Can not select days before today and today
//return current && current < moment().endOf(‘day');?。。。。‘斕熘暗牟豢蛇x,包括當天
return current < moment().subtract(1, ‘day') !?。。。‘斕熘暗牟豢蛇x,不包括當天
}
以上這篇Antd中單個DatePicker限定時間輸入范圍操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細介紹了iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue.js實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng) Vue.set的簡單應(yīng)用
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng),Vue.set的簡單應(yīng)用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06

