Skip Navigation

Srw Date Picker

Sabre Red 360 provides react date picker component that can be used in other react components (modals for example).

srw date picker


In order to be used, the SrwDatePicker has to be imported:

import {SrwDatePicker} from 'sabre-ngv-UIComponents-datepicker/components/SrwDatePicker';
import {SrwDatePickerError} from 'sabre-ngv-UIComponents-datepicker/interfaces/SrwDatePickerError';

Next you can choose date format that will be used when displaying date:

const dateFormat = 'DD-MM-YYYY';

Create function for handling date change:

const handleDateChange = (event: moment.Moment | SrwDatePickerError) => {
    if (moment.isMoment(event)) {
        const date = event.format(dateFormat);
        // save picked date
    } else {
        // handle incorrect date

Then SelectWidget can be used as you want to:



The following properties can be defined for date picker component:

Property Description


Action to be performed when user selects a date.

minDate (optional)

Minimum selectable date.

maxDate (optional)

Maximum selectable date, default is current date + one year.

customClass (optional)

Custom css class for the field.

placeholder (optional)

Placeholder text in the input field.


Date format to be used when displaying date.

chosenDate (optional)

Date chosen on the start.

monthsShown (optional)

Number of months shown in a date picker GUI.