Rendering of B.C. years in year picker is off by 1

[ferdinandlist]

Hello, I am experiencing a problem with the rendering of negative years / b.c. values in the year picker:

The year is always off by 1 from its correct value in the input - e.g. -2022 will render as 2023 in the input (it shows up selected correctly in the calendar dropdown though).

I figured yyyy format wont be including a sign for the year but the number should render correctly. In my use case, I am using a checkbox to multiply the current year by -1 to achieve a b.c. year (in order to not having to click back all the way in the calendar dropdown, as the year search does not like the negative sign either). Here is the code example:

import React, { useState, useEffect } from 'react';
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export function InputDate(props) {

    const currentDate = new Date( Date.now() );

    /* the composed output date in datetime format */ 
    const [composedDate, setComposedDate] = useState( currentDate )

    useEffect( () => {

      // handle NaN dates
      if( isNaN(composedDate) ) setOnlyDay(1);

      console.log( "Composed dated changed:", { composedDate } );

    },[composedDate] )
    
    /* the selected year */
    const [onlyYear, setOnlyYear] = useState( currentDate.getFullYear() );
    
    /* the selected month */
    const [onlyMonth, setOnlyMonth] = useState( currentDate.getMonth() );
    
    /* the selected day */
    const [onlyDay, setOnlyDay] = useState( currentDate.getDay() );

    useEffect( () => {

        console.log( "year, month or day changed", {onlyYear, onlyMonth, onlyDay} )

        // construct the new composed date
        let newDate = new Date();
        newDate.setYear(onlyYear);
        newDate.setMonth(onlyMonth);
        newDate.setDate(onlyDay);

        // test if javascript copes with the negative year correctly
        let timestamp = newDate.getTime();
        console.log(newDate, timestamp, new Date(timestamp))

        // update state
        setComposedDate( newDate.getTime() );

    }, [onlyMonth, onlyYear, onlyDay]);


    /**/
    const [checkedBC, setCheckedBC] = useState(false); 

    /**/
    const [error, setError] = useState('')

    /**/
    const handleCheckboxChange = function() { 
        setCheckedBC( !checkedBC ); 
        console.log( onlyYear*-1 )
        setOnlyYear( onlyYear*-1 )
    };

    /**/
    const handleYearChange = function( date ) {

        const newYear = date?.getFullYear();

        console.debug( "handleYearChange() >> ", newYear )

        setError(null);

        setOnlyYear( newYear );

    }

    return (
      <div className="container">

          <div className="input-container">

            <div className="checkbox">  
                
                <input 
                  type="checkbox"
                  onChange={handleCheckboxChange}
                /> 
                BC

            </div> 

            {checkedBC && <span>-</span>}
            <DatePicker
              selected={composedDate}
              onChange={handleYearChange}
              showYearPicker
              showYearDropdown
              dateFormat="yyyy"
            />

        </div>
        {error && <span>error</span>}
    </div>
    );
}

In the effect hook that composes the date I included a small check that converts the negative Date to timestamp and back which is looking correct so I am thinking that it is a component issue.

Best Ferdinand

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.