useDatePicker

import { useDatePicker } from '@primereact/headless/datepicker';
import { usePortal } from '@primereact/headless/portal';
import { usePositioner } from '@primereact/headless/positioner';

const datepicker = useDatePicker({ ...options });
const {
    rootProps,
    inputProps,
    triggerProps,
    popupProps,
    positionerProps,
    bodyProps,
    panelProps,
    calendarProps,
    headerProps,
    titleProps,
    prevProps,
    nextProps,
    selectMonthProps,
    selectYearProps,
    getTableProps,
    tableHeaderProps,
    tableHeaderRowProps,
    weekDayCellProps,
    tableBodyProps,
    tableBodyRowProps,
    getTableBodyCellProps,
    getDayProps,
    getMonthProps,
    getYearProps,
    state,
    months,
    weekDays,
    monthPickerValues,
    yearPickerValues,
    getMonthName,
    getYear
} = datepicker;
const portal = usePortal();
 
usePositioner({
    anchor: state.anchorElement,
    content: state.positionerElement,
    side: 'bottom',
    flip: true,
    shift: true
});

const [date, setDate] = React.useState(null);
 
const datepicker = useDatePicker({
    value: date,
    onValueChange: (e) => setDate(e.value)
});
 
<div {...rootProps}>
    <input {...inputProps} />
    <button {...triggerProps}></button>
    {portal.state.mounted &&
        state.opened &&
        createPortal(
            <div {...positionerProps}>
                <div {...popupProps}>
                    <div {...bodyProps}>
                        <div {...panelProps}>
                            <div {...calendarProps}>
                            {/* Header: prev / title / next */}
                            <div {...headerProps}>
                                <button {...prevProps}></button>
                                <div {...titleProps}>
                                    <button {...selectMonthProps}>{getMonthName()}</button>
                                    <button {...selectYearProps}>{getYear()}</button>
                                </div>
                                <button {...nextProps}></button>
                            </div>
 
                            {/* Date view */}
                            {months.map((month, groupIndex) => (
                                <table {...getTableProps()}>
                                    <thead {...tableHeaderProps}>
                                        <tr {...tableHeaderRowProps}>
                                            {weekDays.map((day, i) => (
                                                <th key={i} {...weekDayCellProps}></th>

const datepicker = useDatePicker({
    selectionMode: 'range',
    onValueChange: (e) => {
        const [start, end] = e.value ?? [];
        console.log(start, end);
    }
});

const datepicker = useDatePicker({
    minDate: new Date(2024, 0, 1),
    maxDate: new Date(2024, 11, 31),
    disabledDays: [0, 6]
});

const datepicker = useDatePicker({
    showTime: true,
    hourFormat: '12',
    dateFormat: 'dd/mm/yy'
});

const [open, setOpen] = React.useState(false);
 
const datepicker = useDatePicker({
    open,
    onOpenChange: (e) => setOpen(e.value)
});

[data-scope='datepicker'][data-part='day'][data-selected='true'] {
    background: var(--p-primary-color);
    color: var(--p-primary-contrast-color);
}
 
[data-scope='datepicker'][data-part='day'][data-today='true'] {
    font-weight: 600;
    color: var(--p-primary-color);
}
 
[data-scope='datepicker'][data-part='day'][data-disabled='true'] {
    opacity: 0.4;
    pointer-events: none;
}