Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作
1、某個(gè)時(shí)間段
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選中的時(shí)間');
}
render(){
return(
<div>
<DatePicker
disabledDate={this.disabledDate}
onChange={this.datePickerChange}
/>
</div>
)
}
}
在線查看：單個(gè)DatePicker限定時(shí)間輸入范圍
這樣就只能選擇從當(dāng)天算起到七天后的日期，但是時(shí)間的時(shí)分秒是你選擇的時(shí)候系統(tǒng)時(shí)間的時(shí)分秒，這個(gè)有需要的話要額外處理，比如設(shè)置為當(dāng)天起始值：
... //setHours(hours,min,sec,ms) let day = date ? new Date(date).setHours(0, 0, 0, 0): 0; ...
disabledDate方法中時(shí)間相關(guān)api是配合JS的日期處理類庫(kù)：Moment.js使用的，moment().startOf('day') 代表今天，moment().add(6, 'day')代表今天加后6天共七天。其他用法可以去官網(wǎng)查看：http://momentjs.cn/
2、向前或向后時(shí)間范圍
...
disabledDate = (current) => {
return current && current < moment().endOf('day');
}
...
更詳細(xì)的API可以去Antd官網(wǎng)看：https://ant.design/components/date-picker-cn/
補(bǔ)充知識(shí)：antd中的disabledDate不可選擇時(shí)間的處理
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
handleData(time){
if(!time){
return false
}else{
// 大于當(dāng)前日期不能選 time > moment()
// 小于當(dāng)前日期不能選 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');?。。。?！當(dāng)天之前的不可選，包括當(dāng)天
return current < moment().subtract(1, ‘day') ！?。。。‘?dāng)天之前的不可選，不包括當(dāng)天
}
以上這篇Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要和大家一起深入探討Vue.js組件和組件通信的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-09-09
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue視頻時(shí)間進(jìn)度條組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
iview+vue實(shí)現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了iview+vue實(shí)現(xiàn)導(dǎo)入EXCEL預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue2中的高復(fù)用組件通常是指那些設(shè)計(jì)得足夠通用,并能多次在項(xiàng)目中重復(fù)使用的組件,本文給大家詳細(xì)介紹了vue2創(chuàng)建高復(fù)用組件的方法示例,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
web項(xiàng)目開(kāi)發(fā)中2個(gè)Token原因解析及示例代碼
這篇文章主要介紹了web項(xiàng)目開(kāi)發(fā)中會(huì)出現(xiàn)2個(gè)Token原因的解析以及實(shí)現(xiàn)的示例代碼，有需要的同學(xué)可以借鑒參考下，希望可以有所幫助2021-09-09
Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的完整代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue.js實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng) Vue.set的簡(jiǎn)單應(yīng)用
這篇文章主要介紹了vue.js實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)，Vue.set的簡(jiǎn)單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue.js前端框架之事件處理小結(jié),本文給大家介紹了v-on 指令的基本用法，通過(guò)實(shí)例講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04