@patternfly/react-datetime
This package provides date and time PatternFly components based on PatternFly 4
Prerequisite
Node Environment
This project currently supports Node Active LTS releases. Please stay current with Node Active LTS when developing patternfly-react.
For example, to develop with Node 8, use the following:
nvm install 8
nvm use 8
This project also requires a Yarn version of >=1.6.0. The latest version can be installed here.
Installing
yarn add @patternfly/react-datetime
or
npm install @patternfly/react-datetime --save
Usage
It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
import '@patternfly/react-core/dist/styles/base.css';
Example Component Usage
import React from 'react';
import { DatePicker } from '@patternfly/react-datetime';
SimpleDatePicker = () => (
<React.Fragment>
<DatePicker value="03/05/2020"/>
<br />
<br />
<DatePicker minDate="03/16/2020" maxDate="03/20/2020"/>
<br />
<br />
<DatePicker
locale="fr"
dateFormat="DD.MM.YYYY"
placeholder='jj.mm.aaaa'
invalidFormatErrorMessage='Cette date est invalide.'
dateOutOfRangeErrorMessage='Cette date dépasse la limite, que ce soit en borne inférieure ou supérieure.'
beforeMinDateErrorMessage='Cette date est antérieure à la première date valide.'
afterEndDateErrorMessage='Cette date est postérieure à la dernière date valide.'
/>
</React.Fragment>
);
Contribution
This library makes use of the babel plugin from @patternfly/react-styles to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference Button.js. For any CSS not provided by core please use the StyleSheet.create
utility from @patternfly/react-styles. This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.
Documentation
A comprehensive list of components and detailed usage of each can be found on the PatternFly React Docs website You can also find how each component is meant to be used from a design perspective on the PatternFly 4 Core website.
Note: All commands below assume you are on the root directory in this repository.
Install
Run to install all the dependencies
yarn && yarn bootstrap && yarn build && yarn build:docs
Building
yarn bootstrap && yarn build && yarn build:docs
Running
To start the site locally.
yarn build && yarn start:pf4
Building
To build the site.
yarn build:docs
Building
yarn build
Testing
Testing is done at the root of this repo. To only run the @patternfly/react-datetime tests:
yarn test packages/react-datetime