Props

All props except primaryColor that are available for configuring the react-advance-datepicker.


Default Configuration

The react-advance-datepicker if you don't set any props.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Single Date

Using date picker as single date. Just use the props asSingle to true.

By default the value is false.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
asSingle={true}
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Use Range

With the useRange props at false you only display a calendar.

By default the value is true.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
useRange={false}
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Single Date & Use Range

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
useRange={false}
asSingle={true}
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Placeholder

Use the placeholder props to change the default placeholder value.

By default the value is YYYY-MM-DD ~ YYYY-MM-DD or YYYY-MM-DD.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
placeholder={"My Placeholder"}
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Separator

Use the separator props to change the default separator value.

By default the value is ~.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
separator={"~"}
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Start from

Use the startFrom props to change the default startFrom value.

By default the value is new Date().

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
startFrom={new Date("2022-01-01")}
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Use showShortcuts and showFooter to display or not the shortcuts and footer respectively.

By default both have the value false.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
showShortcuts={true}
showFooter={true}
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Show Shortcuts Text

Use shortcutTextto display text of shortcuts.

By default the value null.

Last 30 Days
import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
showShortcuts={true}
showFooter={true}
value={value}
onChange={handleValueChange}
shortcutText="Last 30 Days"
/>
);
};
export default App;

Display Format

Use the displayFormat props to change the date display format.

By default, the value is YYYY-MM-DD.

Warning

⚠️ Editing the text field to change the date range only supports the YYYY-MM-DD format at this time.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
value={value}
onChange={handleValueChange}
displayFormat={"DD/MM/YYYY"}
/>
);
};
export default App;

Read Only

Use the readOnly props to prevent editing the text field.

By default, the value is false.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
value={value}
onChange={handleValueChange}
readOnly={true}
/>
);
};
export default App;

Disabled

Use the disabled props to disable the react-tailwindcss-select field.

By default, the value is false.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
value={value}
onChange={handleValueChange}
disabled={true}
/>
);
};
export default App;

Input class

Use the inputClassName props to override the default react-advance-datepicker input classes.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
inputClassName="w-full rounded-md focus:ring-0 font-normal bg-green-100 dark:bg-green-900 dark:placeholder:text-green-100"
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Container class

Use the containerClassName props to override the default react-advance-datepicker input container classes.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
containerClassName="relative mt-8"
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Toggle class

Use the toggleClassName props to override the default react-advance-datepicker toggle button classes.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
toggleClassName="absolute bg-blue-300 rounded-r-lg text-white right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed"
value={value}
onChange={handleValueChange}
/>
);
};
export default App;

Popover direction

Use the popoverDirection props to set the display position of the calendar.

popoverDirection can take the value "up" or "down". By default popoverDirection is undefined

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
value={value}
popoverDirection="up"
onChange={handleValueChange}
/>
);
};
export default App;

Min Date and Max Date

Use the minDate and maxDate props to set range of enabled dates in between these dates.

import React, {useState} from "react"; 
import Datepicker from "react-advance-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});

const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}

return (<Datepicker
minDate={new Date("2023-01-05")}
maxDate={new Date("2023-01-30")}
value={value}
startFrom="2023-01-01"
onChange={handleValueChange}
/>
);
};
export default App;