minDate is not able to set

[Abhishekkumar4444]

unable to set date if i set minDate.
my code is
`const minDate = () => {
let today = new Date()
let date = today.getDate()
let month = today.getMonth()
let currYear = today.getFullYear()

return new Date(currYear, month, date)

} let today = new Date()
let date = today.getDate() + 15
let month = today.getMonth()
let currYear = today.getFullYear()

return new Date(currYear, month, date)

}
<DatePicker
isOpen={modalVisible}
onClose={() => {
setModalVisible(false)
onChangeDate()
}}
onChange={setStartDate}
defaultValue={minDate()}
clearText={null}
minDate={minDate()}
maxDate={maxDate()}
colorScheme="#a01e21"
closeText="Select"
headerFormat="DD, MM dd"
/>`

[mel-habip]

@Abhishekkumar4444 Just formatted your code a bit from your original post, could you confirm that the following is what you want to achieve?

const minDate = () => { //essentially today's date
    let today = new Date();
    let date = today.getDate();
    let month = today.getMonth();
    let currYear = today.getFullYear();

    return new Date(currYear, month, date); // you can actually just do `new Date()` directly in the `minDate` prop instead
};

const maxDate = () => { 
    let today = new Date();
    let date = today.getDate() + 15; // I think you're trying to add 15 days? this actually adds 15 milliseconds
    let month = today.getMonth();
    let currYear = today.getFullYear();

    return new Date(currYear, month, date);
};

and then you have the following as your component:

<DatePicker
    isOpen={modalVisible}
    onClose={() => {
        setModalVisible(false)
        onChangeDate()
    }}
    onChange={setStartDate}
    defaultValue={minDate()}
    clearText={null}
    minDate={minDate()}
    maxDate={maxDate()}
    colorScheme="#a01e21"
    closeText="Select"
    headerFormat="DD, MM dd"
/>

I played around with both minDate and maxDate props and couldn't reproduce them. Would you consider making the following edits to your JSX code?

<DatePicker
    isOpen={modalVisible}
    onClose={() => {
        setModalVisible(false)
    }}
    onChange={(val) => setStartDate(val)}
    defaultValue={new Date()}
    clearText=""
    minDate={new Date()}
    maxDate={maxDate()}
    colorScheme="#a01e21"
    closeText="Select"
    headerFormat="DD, MM dd"
/>