react-datepicker throws error invalid time value

Question

Error image

const [startTime, setStartTime] = useState(moment(new Date()).toDate());
   <DatePicker
      showIcon
      selected={startTime}
      onChange={(date) => handleStartDateChange(date)}
      dateFormat="MM-dd-yyyy"
      maxDate={moment(startTime).toDate()}
      placeholderText="Select a date"
      className='margin-bt5'
     />

This my date picker component when i trying work on mobile responsive it's throws error invalid time value. same code i have in my desktop version it's working correctly no error were throws

Answer 1

You can try making:

new Date(moment(new Date()).toDate()) 

which will return native js Date object. What matters in ur case is whether datepicker works with Date() object, Moment object or plain string, or integer timestamp. You have to clarify this. Most probably it doesnt accept ur date because:

moment(new Date()).toDate()

will return Moment.js date object.

Answer 2

The issue might be related to the way dates are handled on mobile devices. To resolve this, you can make a few adjustments to your code.

const YourComponent = () => {
const [startTime, setStartTime] = useState(moment(new Date()));

const handleStartDateChange = (date) => {
setStartTime(date);
};

 return (
  <DatePicker
  showIcon
  selected={startTime}
  onChange={handleStartDateChange}
  dateFormat="MM-dd-yyyy"
  maxDate={moment().toDate()}
  placeholderText="Select a date"
  className='margin-bt5'
/>
)};
export default YourComponent;

Try these modifications and see if the issue persists. If the problem still exists, you might want to check for any additional error messages or logs to get more details about the invalid time value error.