Antd中單個DatePicker限定時間輸入范圍操作
更新時間：2020年10月29日 11:38:53 作者：GuanJdoJ
這篇文章主要介紹了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');！?。。?！當天之前的不可選，包括當天
return current < moment().subtract(1, ‘day') ?。。。?！當天之前的不可選，不包括當天
}
以上這篇Antd中單個DatePicker限定時間輸入范圍操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無蒙層的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3動態(tài)使用KeepAlive組件的實現(xiàn)步驟
在 Vue 3 項目中,我們有時需要根據(jù)路由的 meta 信息來動態(tài)決定是否使用 KeepAlive 組件,以控制組件的緩存行為,所以本文給大家介紹了Vue3動態(tài)使用KeepAlive組件的實現(xiàn)步驟,通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-11-11
<script?setup>是vue3中新引入的語法糖,目的是簡化使用Composition?API時冗長的模板代碼,下面這篇文章主要給大家介紹了關(guān)于vue3中單文件組件<script?setup>的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了如何利用vue3定制復雜組件的滾動條，文中通過示例代碼講解詳細，需要的朋友們下面就跟隨小編來一起學習學習吧2023-04-04
關(guān)于electron-vue打包后運行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運行白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了在Vue組件化中利用axios處理ajax請求的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-08-08
這篇文章主要介紹了vue中el-table單元格復制功能實現(xiàn),本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
大部分中文應用彈出的默認鍵盤是簡體中文輸入法鍵盤,在輸入用戶名和密碼的時候,如果使用簡體中文輸入法鍵盤,用戶的輸入記錄會被緩存下來所以我們需要一個安全鍵盤,本文給大家介紹了如何基于vue封裝一個安全鍵盤組件,需要的朋友可以參考下2023-12-12
關(guān)于el-form表單驗證中的validator與validate使用時的問題
這篇文章主要介紹了關(guān)于el-form表單驗證中的validator與validate使用時的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06