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限定時間輸入范圍
這樣就只能選擇從當(dāng)天算起到七天后的日期,但是時間的時分秒是你選擇的時候系統(tǒng)時間的時分秒,這個有需要的話要額外處理,比如設(shè)置為當(dāng)天起始值:
... //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'); } ...
更詳細(xì)的API可以去Antd官網(wǎng)看:https://ant.design/components/date-picker-cn/
補(bǔ)充知識:antd中的disabledDate不可選擇時間的處理
我就廢話不多說了,大家還是直接看代碼吧~
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中單個DatePicker限定時間輸入范圍操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09vue.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