ProtrakDate

Reference

• The ProtrakDate component is a use to display custom date picker.
• It supports tenant-specific time zones, custom layouts, and flexible date formats.

Props

1. value

   • Type: string
   • Description: The selected date in UTC format.

2. onEdit

   • Type: function
   • Description: Callback triggered when the date is changed.

3. onFocusOut

   • Type: function
   • Description: Callback triggered when the date picker loses focus.

4. placeholder

   • Type: string
   • Description: Placeholder text for the input field.

5. disabled

   • Type: boolean
   • Default: false
   • Description: Disables the date picker if true.

6. isOnlyMonthYear

   • Type: boolean
   • Description: Restricts the picker to only select month and year if true.

7. style

   • Type: object
   • Description: Custom styles for the date picker input field.

Usage Example

function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { ProtrakDate } = protrakComponents;
    return(
        <ProtrakDate
            value="2025-04-08"
            onEdit={(newDate) => console.log('Selected Date:', newDate)}
            placeholder="Select a date"
            isOnlyMonthYear={false}
            style={{ width: '300px' }}
        />
    );
}

• This renders a date picker with a placeholder, full date selection, and logs the selected date on change.

UI