next.js 如何将@mui/x-date-pickers上的输入年份限制在特定范围内?

mzaanser  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(127)

我使用@mui/x-date-pickers。我可以限制输入年份吗,例如从1000到2023?现在我可以输入0000或9999这样的年份。

My datePicker, I tried to put mask into InputProps, but It doesn't work   

``<DatePicker
      label={label}
      value={value}
      open={isOpen}
      onChange={onChange}
      onOpen={changeIsOpen(true)}
      onClose={changeIsOpen(false)}
      className={styles.box__picker}
      slotProps={{
        popper: { className: styles.box },
        textField: {
          helperText,
          error,
        },
      }}
      minDate={MIN_DATE}
      maxDate={MAX_DATE}
   />``
q9rjltbz

q9rjltbz1#

可以使用minDate和maxDate属性限制@mui/x-date-pickers中的输入年份。minDate属性指定可选择的最早日期,maxDate属性指定可选择的最晚日期。在您的示例中,可以将minDate属性设置为1000,将maxDate属性设置为2023。并且还添加了readOnly: true,,因此用户不能键入日期,只能通过弹出模型选择日期。
请注意,minDatemaxDate属性接受Date对象,因此您需要将所需的日期转换为Date对象,然后再将它们传递给这些属性。您可以使用new Date()构造函数来完成此操作。下面是一个更新代码:

<DatePicker
      label={label}
      value={value}
      open={isOpen}
      onChange={onChange}
      onOpen={changeIsOpen(true)}
      onClose={changeIsOpen(false)}
      className={styles.box__picker}
      slotProps={{
        popper: { className: styles.box },
        textField: {
          helperText,
          error,
          readOnly: true,
        },
      }}
      minDate={new Date(1000, 0, 1)}
      maxDate={new Date(2023, 12, 31)}
   />

您使用的另一种方法也可以使用moment.js

minDate={moment('01-01-1000').toDate()}
maxDate={moment('12-31-2023').toDate()}

相关问题