Eurostar Datepicker Component

The component to allow the customer to select a date. This is currently used on booking-magnet for the customer to choose the depart and return date.

Contents

There is two variants of this component, default which has U.K. date format and U.S. for the American market which is of course in american date format.

Only the label changes, depart and return. Localisation is determined by the URL to determine the market i.e. fr-fr in URL market segment will return the French translations.

Installation

Base Styles must be installed in order to use the component. For more detailed explaination please review the Styleguide README here The datepicker has 1 third party library which is preinstalled with Base Styles and another internally within the JavaScript. The JS should be consumed from the transpiled dist version however if using from the ES6 raw source code, JSPM (could be possible with Webpack but is untested) will need to be installed for usage in order to get these third party library.

Third party dependencies:

• breakpoint-sass
• (handled via JSPM) pikaday

Eurostar:

• eurostar-base-styles
• eurostar-datepicker

Usage

1. Extract the HTML markup as defined under Expand Markup: (https://style.eurostar.com/components/detail/datepicker.html)

2. Import styles:

    // Using JSPM:
    @import "jspm:eurostar-datepicker/datepicker";

    // Using Webpack:
    @import "~eurostar-datepicker/_datepicker.scss";

3. Import JS and Component Initialisation:

    // Using JSPM:
    import Datepicker from 'eurostar-datepicker/datepicker';
    const datepicker = new Datepicker();

    // Using Webpack / React:
    const Datepicker = require("eurostar-datepicker").default;
    new Datepicker();