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,
    panelProps,
    calendarProps,
    headerProps,
    titleProps,
    prevProps,
    nextProps,
    selectMonthProps,
    selectYearProps,
    decadeProps,
    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
});
 
return (
    <div {...rootProps}>
        <input {...inputProps} />
        <button {...triggerProps}></button>
        {portal.state.mounted &&
            state.opened &&
            createPortal(
                <div {...positionerProps}>
                    <div {...popupProps}>
                        <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>
                                                ))}
                                            </tr>
                                        </thead>
                                        <tbody {...tableBodyProps}>
                                            {month.dates.map((week, wi) => (
                                                <tr key={wi} {...tableBodyRowProps}>
                                                    {week.map((date, di) => (
                                                        <td key={di} {...getTableBodyCellProps(date)}>
                                                            <span {...getDayProps(date, groupIndex)}>{date.day}</span>
                                                        </td>
                                                    ))}
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                ))}
 
                                {/* Month view */}
                                {monthPickerValues.map((m, i) => (
                                    <span {...getMonthProps(m, i)}>{m.value}</span>
                                ))}
 
                                {/* Year view */}
                                {yearPickerValues.map((y) => (
                                    <span {...getYearProps(y)}>{y.value}</span>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>,
                document.body
            )}
    </div>
);

const datepicker = useDatePicker({ defaultValue: new Date() });

const [date, setDate] = React.useState(null);
 
const datepicker = useDatePicker({
    value: date,
    onValueChange: (e) => setDate(e.value)
});

const datepicker = useDatePicker({ selectionMode: 'range' });

const datepicker = useDatePicker({ dateFormat: 'dd/mm/yy' });

const datepicker = useDatePicker({ view: 'month', dateFormat: 'mm/yy' });

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

const datepicker = useDatePicker({ disabledDays: [0, 6] });

const datepicker = useDatePicker({ showTime: true, hourFormat: '12' });

const datepicker = useDatePicker({ numberOfMonths: 2 });

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

const datepicker = useDatePicker({ closeOnEscape: true, autoFocus: true, trapped: true });

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