【问题标题】:How to disable past dates in material-ui Date picker?如何在 material-ui 日期选择器中禁用过去的日期?
【发布时间】:2017-05-30 16:20:50
【问题描述】:

我正在使用 material-ui 日期选择器。如何禁用今天之前的过去几天?

 import React from 'react';
 import DatePicker from 'material-ui/DatePicker';

function disablePastDays(date) {
  //code here to disable past days
}

const calendar = () => (
    <div>
        <DatePicker shouldDisableDate={disablePastDays}/>
    </div>
)

【问题讨论】:

    标签: material-ui


    【解决方案1】:

    material-ui 的 DatePicker 接受 minDate 属性。所以你可能想要这个:

    const today = new Date();
    <DatePicker minDate={today}/>
    

    【讨论】:

    • 谢谢 wesley6j
    • 最好把它放在渲染之外,否则每次渲染都会创建一个新日期。
    • 很好!!谢谢:)
    【解决方案2】:

    使用disablePast

    <DatePicker
        disablePast
    />
    

    他们从v1.0.0-beta.10开始就拥有它。

    【讨论】:

    • 也不会禁用时间
    • 这很棒。帮助我只显示当前和未来的日期。
    【解决方案3】:

    我们可以将 minDate 作为属性赋予 DatePicker 材质 UI 组件

    使用 usestate 创建一个 state,然后将 state 值传递给 props,如下所示

    const [startMinDate, setStartDate] = useState(new Date())
    
    <DatePicker
          required
          label="Date"
          disablePast                  
          minDate = {startMinDate}
     />
    

    【讨论】:

      【解决方案4】:

      我正在使用 import DatePicker from '@mui/lab/DatePicker'; 版本库 "@mui/lab": "^5.0.0-alpha.66"

      下面的代码对我来说很好用

       <DatePicker
         disablePast
         value={checkout.rideDate}
         onChange={(newValue) => { // your code of onChange functionality}
          />
         }
       />
      

      【讨论】:

        猜你喜欢
        • 2021-04-15
        • 2016-07-03
        • 1970-01-01
        • 1970-01-01
        • 2013-03-23
        • 2018-10-16
        • 1970-01-01
        • 2017-04-09
        • 1970-01-01
        相关资源
        最近更新 更多