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)文章
解決VantUI popup 彈窗不彈出或無(wú)蒙層的問(wèn)題
這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無(wú)蒙層的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue3動(dòng)態(tài)使用KeepAlive組件的實(shí)現(xiàn)步驟
在 Vue 3 項(xiàng)目中,我們有時(shí)需要根據(jù)路由的 meta 信息來(lái)動(dòng)態(tài)決定是否使用 KeepAlive 組件,以控制組件的緩存行為,所以本文給大家介紹了Vue3動(dòng)態(tài)使用KeepAlive組件的實(shí)現(xiàn)步驟,通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-11-11
vue3中單文件組件<script?setup>實(shí)例詳解
<script?setup>是vue3中新引入的語(yǔ)法糖,目的是簡(jiǎn)化使用Composition?API時(shí)冗長(zhǎng)的模板代碼,下面這篇文章主要給大家介紹了關(guān)于vue3中單文件組件<script?setup>的相關(guān)資料,需要的朋友可以參考下2022-07-07
基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了如何利用vue3定制復(fù)雜組件的滾動(dòng)條，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法
這篇文章主要給大家介紹了在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
vue中el-table單元格復(fù)制功能實(shí)現(xiàn)
這篇文章主要介紹了vue中el-table單元格復(fù)制功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
大部分中文應(yīng)用彈出的默認(rèn)鍵盤(pán)是簡(jiǎn)體中文輸入法鍵盤(pán),在輸入用戶名和密碼的時(shí)候,如果使用簡(jiǎn)體中文輸入法鍵盤(pán),用戶的輸入記錄會(huì)被緩存下來(lái)所以我們需要一個(gè)安全鍵盤(pán),本文給大家介紹了如何基于vue封裝一個(gè)安全鍵盤(pán)組件,需要的朋友可以參考下2023-12-12
關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問(wèn)題
這篇文章主要介紹了關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06