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

Usage

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:

<SrwDatePicker
    customDateFormat={dateFormat}
    onSelectHandler={this.handleDateChange}
    monthsShown={2}
/>

Properties

The following properties can be defined for date picker component:

Property Description

onSelectHandler

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.

customDateFormat

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.