最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - Datepicker not showing previous dates in calendar, it's showing blank spaces - Stack Overflow

programmeradmin2浏览0评论

Issue with @mui/x-date-pickers DesktopDatePicker – Previous Dates Not Visible I'm using Material-UI's @mui/x-date-pickers in my React project, specifically the DesktopDatePicker. However, sometimes when I open the calendar, previous dates appear as blank spaces instead of showing the expected numbers. This issue occurs intermittently, and I haven't been able to identify a consistent pattern.

import React, { useState } from 'react'
import { Typography } from '@mui/material'
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
import moment from 'moment'
import { Control, Controller } from 'react-hook-form'

const TimezoneDatePicker = ({
  name,
  control,
  rules,
  onChangeCallback,
  styles,
  inputVariant,
  onBlurCallback,
  disabled,
  disableFuture = false
}) => {
  const [open, setOpen] = useState(false)
  const handleOpen = () => {
    if (!disabled) {
      setOpen(true)
    }
  }
  const handleClose = () => {
    setOpen(false)
  }
  return (
    <>
      <Controller
        name={name}
        control={control}
        rules={rules}
        render={({ field: { onChange, value } }) => {
          const parsedValue = value ? moment(value) : null
          return (
            <LocalizationProvider dateAdapter={AdapterMoment}>
              <DesktopDatePicker
                closeOnSelect
                format='MM-DD-YYYY'
                open={open}
                onClose={handleClose}
                value={parsedValue ? parsedValue : null}
                {...(!disableFuture && { minDate: moment() })}
                disabled={disabled}
                timezone='UTC'
                disableFuture={disableFuture}
                key={name}
                onChange={(v: any) => {
                  onChange(v ? v.toISOString() : null)
                  onChangeCallback && onChangeCallback(v)
                }}
                onAccept={v => {
                  handleClose()
                  onBlurCallback && onBlurCallback(v)
                }}
                slotProps={{
                  textField: {
                    placeholder: 'Select Date',
                    fullWidth: true,
                    variant: inputVariant
                  },
                  inputAdornment: {
                    onClick: handleOpen
                  }
                }}
                sx={{ ...styles }}
              />
            </LocalizationProvider>
          )
        }}
      />
    </>
  )
}
export default TimezoneDatePicker

Has anyone encountered a similar issue? Any suggestions or debugging tips would be greatly appreciated!

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论