欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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限定時間輸入范圍

這樣就只能選擇從當(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.js組件和組件通信

    深入探討Vue.js組件和組件通信

    這篇文章主要和大家一起深入探討Vue.js組件和組件通信的相關(guān)資料,感興趣的小伙伴們可以參考一下
    2016-09-09
  • vue使用element-ui tabs切換echarts解決寬度100%方式

    vue使用element-ui tabs切換echarts解決寬度100%方式

    這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue視頻時間進(jìn)度條組件使用方法詳解

    vue視頻時間進(jìn)度條組件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue視頻時間進(jìn)度條組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能

    iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue2創(chuàng)建高復(fù)用組件的方法示例

    vue2創(chuàng)建高復(fù)用組件的方法示例

    Vue2中的高復(fù)用組件通常是指那些設(shè)計得足夠通用,并能多次在項目中重復(fù)使用的組件,本文給大家詳細(xì)介紹了vue2創(chuàng)建高復(fù)用組件的方法示例,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
    2024-07-07
  • web項目開發(fā)中2個Token原因解析及示例代碼

    web項目開發(fā)中2個Token原因解析及示例代碼

    這篇文章主要介紹了web項目開發(fā)中會出現(xiàn)2個Token原因的解析以及實現(xiàn)的示例代碼,有需要的同學(xué)可以借鑒參考下,希望可以有所幫助
    2021-09-09
  • Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))

    Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))

    這篇文章主要介紹了Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 利用Vue實現(xiàn)簡易播放器的完整代碼

    利用Vue實現(xiàn)簡易播放器的完整代碼

    這篇文章主要給大家介紹了關(guān)于如何利用Vue實現(xiàn)簡易播放器的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • 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)用

    這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng),Vue.set的簡單應(yīng)用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Vue.js前端框架之事件處理小結(jié)

    Vue.js前端框架之事件處理小結(jié)

    這篇文章主要介紹了Vue.js前端框架之事件處理小結(jié),本文給大家介紹了v-on 指令的基本用法,通過實例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04

最新評論