diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..e886676d5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "Sourcable" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 2605e857d..0a181e626 100644 --- a/README.md +++ b/README.md @@ -4,97 +4,26 @@ [![Build Status](https://api.travis-ci.org/dmtrKovalenko/material-ui-pickers.svg?branch=master)](https://travis-ci.org/dmtrKovalenko/material-ui-pickers) > Components, that implements material design date and time pickers for material-ui v1 -## [Click here for demo](https://material-ui-pic.firebaseapp.com/) - -### Recently updated? -Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases) - ### Installation Available as npm package. ```sh npm install material-ui-pickers -S ``` + Now choose the library that pickers will use to work with date. We are providing interfaces for [moment](https://momentjs.com/) and [date-fns](https://date-fns.org/). If you are not using moment in the project (or dont have it in the bundle already) we suggest using date-fns, because it much more lightweight and will be correctly tree-shaked from the bundle. + ```sh -npm i date-fns@next -S +npm install date-fns@next -s // or -npm i moment -S -``` - -Teach pickers how to use one of that library using `MuiPickersUtilsProvider`. This component takes an utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree. - -```jsx -import MomentUtils from 'material-ui-pickers/utils/moment-utils'; -import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils' -import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider' - -function App() { - return ( - - - - ); -} - -render(, document.querySelector('#app')); +npm install moment -S ``` -We are using material-ui-icons icon font to display icons. Just add this to your html -```html - -``` -If you dont want to use icon font, or you are already use `material-ui-icons` you can pass any icon to the components with [corresponding props](https://github.com/dmtrKovalenko/material-ui-pickers#props-documentation) - -### Usage -Here is a quick example of how to use this package - -```jsx -import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers' - -class App extends Component { - state = { - selectedDate: new Date(), - selectedTime: new Date(), - selectedDateTime: new Date() - } - - handleDateChange = date => { - this.setState({ selectedDate: date }) - } - - handleTimeChange = time => { - this.setState({ selectedTime: time }) - } - - handleDateTimeChange = dateTime => { - this.setState({ selectedDateTime: dateTime }) - } - - render() { - const { selectedDate, selectedTime, selectedDateTime } = this.state - - return ( -
- - - - - -
- ) - } -} -``` +## Documentation +Check out material-ui-picker's [documentation](https://material-ui-pickers.firebaseapp.com/) +### Recently updated? +Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases) +w ### Props documentation Here is a list of available props @@ -134,7 +63,9 @@ clearable | boolean | false | If `true`, clear button will be displayed TextFieldComponent | func, string | undefined | Component that should replace the default Material-UI TextField InputAdornmentProps | object | {} | Props to pass to keyboard input adornment inputAdornmentPosition | enum 'start', 'end' | 'end' | Specifies position of keyboard adornment - +pickerRef | func | undefined | Ref to the picker component +onOpen | func | undefined | On open callback +onClose | func | undefined | On close callback #### Timepicker Prop | Type | Default | Definition @@ -157,6 +88,9 @@ clearable | boolean | false | If `true`, clear button will be displayed TextFieldComponent | func, string | undefined | Component that should replace the default Material-UI TextField InputAdornmentProps | object | {} | Props to pass to keyboard input adornment inputAdornmentPosition | enum 'start', 'end' | 'end' | Specifies position of keyboard adornment +pickerRef | func | undefined | Ref to the picker component +onOpen | func | undefined | On open callback +onClose | func | undefined | On close callback #### DateTimepicker Prop | Type | Default | Definition @@ -196,6 +130,9 @@ clearable | boolean | false | If `true`, clear button will be displayed TextFieldComponent | func, string | undefined | Component that should replace the default Material-UI TextField InputAdornmentProps | object | {} | Props to pass to keyboard input adornment inputAdornmentPosition | enum 'start', 'end' | 'end' | Specifies position of keyboard adornment +pickerRef | func | undefined | Ref to the picker component +onOpen | func | undefined | On open callback +onClose | func | undefined | On close callback + + diff --git a/docs/src/App.js b/docs/src/App.js index 008ca5a56..34fc5a217 100644 --- a/docs/src/App.js +++ b/docs/src/App.js @@ -1,30 +1,36 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { MuiThemeProvider, createMuiTheme } from 'material-ui'; -import dateFnsUtils from 'material-ui-pickers/utils/date-fns-utils' -import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider' +import Utils from 'material-ui-pickers/utils/date-fns-utils'; +import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'; import { create } from 'jss'; import preset from 'jss-preset-default'; import rtl from 'jss-rtl'; import JssProvider from 'react-jss/lib/JssProvider'; import createGenerateClassName from 'material-ui/styles/createGenerateClassName'; +import frLocale from 'date-fns/locale/fr'; +import enLocale from 'date-fns/locale/en-US'; -import Demo from './Demo/Demo'; import { setPrismTheme } from './utils/prism'; +import Layout from './layout/Layout'; +import Routes from './Routes/Routes'; + +// /* eslint-disable import/first */ +// import moment from 'moment'; +// import 'moment/locale/fr'; + +// moment.locale('fr'); const jss = create({ plugins: [...preset().plugins, rtl()] }); jss.options.createGenerateClassName = createGenerateClassName; export default class App extends Component { - static propTypes = { - toggleFrench: PropTypes.func.isRequired, - } - state = { type: 'light', direction: 'ltr', + locale: 'en', + localeObj: enLocale, } componentWillMount = () => { @@ -42,7 +48,6 @@ export default class App extends Component { const direction = this.state.direction === 'ltr' ? 'rtl' : 'ltr'; document.body.dir = direction; - this.setState({ direction }); } @@ -53,21 +58,32 @@ export default class App extends Component { this.setState({ type }); } + toggleFrench = () => { + if (this.state.locale === 'en') { + this.setState({ locale: 'fr', localeObj: frLocale }); + } else { + this.setState({ locale: 'en', localeObj: enLocale }); + } + } + render() { return ( -
- - - - - - - -
+ + + + + + + + + ); } } diff --git a/docs/src/Demo/Demo.jsx b/docs/src/Demo/Demo.jsx deleted file mode 100644 index 5c30e5d4c..000000000 --- a/docs/src/Demo/Demo.jsx +++ /dev/null @@ -1,181 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { AppBar, Toolbar, IconButton, Icon, Typography, withStyles, Button, Tooltip } from 'material-ui'; - -import Github from './components/GithubIcon'; -import SourcablePanel from './components/SourcablePanel'; -import BasicUsage from './Examples/BasicUsage'; -import CustomElements from './Examples/CustomElements'; -import DateTimePickers from './Examples/DateTimePickers'; -// import PersianPickers from './Examples/PersianPickers'; -import './Demo.css'; - -class Demo extends Component { - static propTypes = { - classes: PropTypes.object.isRequired, - toggleThemeType: PropTypes.func.isRequired, - toggleDirection: PropTypes.func.isRequired, - toggleFrench: PropTypes.func.isRequired, - } - - scrollToContent = () => { - const contentEl = document.getElementById('content'); - contentEl.scrollIntoView({ - behavior: 'smooth', - block: 'start', - }); - } - - render() { - const { - classes, toggleThemeType, toggleDirection, toggleFrench, - } = this.props; - - return ( -
- - - - menu - - -
- - - - language - - - - - - lightbulb_outline - - - - - - format_textdirection_l_to_r - - - - - - - - - - - - Material-UI logo - - - Material-UI Pickers - - - Date and Time pickers for material-ui v1 - - - - - -
- - Here you are! - - - - - - - - - - - - - - - {/* - Make sure you have read the - right to left section - of the material-ui documentation page -

- } - sourceFile="PersianPickers.jsx" - > - - */} -
-
- ); - } -} - -const styles = theme => ({ - flex: { - flex: 1, - }, - menuButton: { - marginLeft: -12, - marginRight: 20, - }, - noShadow: { - boxShadow: 'unset', - }, - appToolbar: { - backgroundColor: theme.palette.primary.main, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - color: theme.palette.common.white, - padding: '40px 20px', - '@media (max-width: 600px)': { - paddingTop: '100px', - minHeight: 'calc(100vh - 55px)', - }, - }, - getStarted: { - marginTop: '10px', - }, - main: { - backgroundColor: theme.palette.background.default, - marginBottom: -50, - }, - content: { - paddingTop: '80px', - backgroundColor: theme.palette.background.default, - minHeight: 'calc(100vh - 63px)', - maxWidth: 900, - margin: '0 auto', - display: 'flex', - flexDirection: 'column', - '@media(max-width: 600px)': { - minHeight: 'calc(100vh - 55px)', - }, - }, - changeOutside: { - maxWidth: 200, - margin: '0 auto', - }, -}); - -export default withStyles(styles)(Demo); diff --git a/docs/src/Demo/Examples/BasicUsage.jsx b/docs/src/Demo/Examples/BasicUsage.jsx deleted file mode 100644 index 5da9afe94..000000000 --- a/docs/src/Demo/Examples/BasicUsage.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { Fragment, Component } from 'react'; -import { Typography } from 'material-ui'; -import { TimePicker, DatePicker } from 'material-ui-pickers'; - -export default class BasicUsage extends Component { - state = { - selectedDate: new Date(), - } - - handleDateChange = (date) => { - this.setState({ selectedDate: date }); - } - - render() { - const { selectedDate } = this.state; - - return ( - -
- - Date picker - - - -
- -
- - Time picker - - - -
- - ); - } -} diff --git a/docs/src/Demo/components/MarkdownElement.jsx b/docs/src/Demo/components/MarkdownElement.jsx deleted file mode 100644 index ec747fa47..000000000 --- a/docs/src/Demo/components/MarkdownElement.jsx +++ /dev/null @@ -1 +0,0 @@ -null \ No newline at end of file diff --git a/docs/src/Examples/CodeSnippets/MuiPickerProviderCode.jsx b/docs/src/Examples/CodeSnippets/MuiPickerProviderCode.jsx new file mode 100644 index 000000000..f27542961 --- /dev/null +++ b/docs/src/Examples/CodeSnippets/MuiPickerProviderCode.jsx @@ -0,0 +1,14 @@ +/* eslint-disable */ +import MomentUtils from 'material-ui-pickers/utils/moment-utils'; +import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'; +import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'; + +function App() { + return ( + + + + ); +} + +render(, document.querySelector('#app')); diff --git a/docs/src/Examples/CodeSnippets/QuickStart.jsx b/docs/src/Examples/CodeSnippets/QuickStart.jsx new file mode 100644 index 000000000..c4ee4a89a --- /dev/null +++ b/docs/src/Examples/CodeSnippets/QuickStart.jsx @@ -0,0 +1,39 @@ +import React, { PureComponent } from 'react'; +import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'; +import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'; +import TimePicker from 'material-ui-pickers/TimePicker'; +import DatePicker from 'material-ui-pickers/DatePicker'; +import DateTimePicker from 'material-ui-pickers/DateTimePicker'; + +export default class App extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + + + + + + + + ); + } +} diff --git a/docs/src/Examples/Demo/BasicDatePicker.jsx b/docs/src/Examples/Demo/BasicDatePicker.jsx new file mode 100644 index 000000000..700a1b9d0 --- /dev/null +++ b/docs/src/Examples/Demo/BasicDatePicker.jsx @@ -0,0 +1,41 @@ +import React, { Fragment, PureComponent } from 'react'; +import { DatePicker } from 'material-ui-pickers'; + +export default class BasicDatePicker extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Examples/Demo/BasicDateTimePicker.jsx b/docs/src/Examples/Demo/BasicDateTimePicker.jsx new file mode 100644 index 000000000..28a968f00 --- /dev/null +++ b/docs/src/Examples/Demo/BasicDateTimePicker.jsx @@ -0,0 +1,40 @@ +import React, { Fragment, PureComponent } from 'react'; +import { DateTimePicker } from 'material-ui-pickers'; + +export default class BasicDateTimePicker extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Demo/Examples/DateTimePickers.jsx b/docs/src/Examples/Demo/CustomDateTimePicker.jsx similarity index 61% rename from docs/src/Demo/Examples/DateTimePickers.jsx rename to docs/src/Examples/Demo/CustomDateTimePicker.jsx index 03b6b6e0b..dafd41545 100644 --- a/docs/src/Demo/Examples/DateTimePickers.jsx +++ b/docs/src/Examples/Demo/CustomDateTimePicker.jsx @@ -1,10 +1,10 @@ -import React, { Fragment, Component } from 'react'; +import React, { PureComponent, Fragment } from 'react'; import { DateTimePicker } from 'material-ui-pickers'; -import { IconButton, Typography, Icon, InputAdornment } from 'material-ui'; +import { IconButton, Icon, InputAdornment } from 'material-ui'; -export default class BasicUsage extends Component { +export default class CustomDateTimePicker extends PureComponent { state = { - selectedDate: new Date(), + selectedDate: new Date('2018-01-01 18:54'), } handleDateChange = (date) => { @@ -17,26 +17,7 @@ export default class BasicUsage extends Component { return (
- - Default - - - keyboard_arrow_left } - rightArrowIcon={ keyboard_arrow_right } - /> -
- -
- - Custom - - add_alarm } rightArrowIcon={ snooze } InputProps={{ @@ -54,11 +35,23 @@ export default class BasicUsage extends Component { add_alarm - ), - }} + ), + }} + /> +
+ +
+
+ ); } } diff --git a/docs/src/Demo/Examples/CustomElements.jsx b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx similarity index 62% rename from docs/src/Demo/Examples/CustomElements.jsx rename to docs/src/Examples/Demo/CustomElementsDatePicker.jsx index b9ffa82d5..f81e9a89b 100644 --- a/docs/src/Demo/Examples/CustomElements.jsx +++ b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx @@ -1,10 +1,12 @@ -import React, { Fragment, Component } from 'react'; +/* eslint-disable no-param-reassign */ +import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { IconButton, Typography, withStyles } from 'material-ui'; import classNames from 'classnames'; -import { DateTimePicker, DatePicker } from 'material-ui-pickers'; import moment from 'moment'; +import { DatePicker } from 'material-ui-pickers'; +import { IconButton, withStyles } from 'material-ui'; + import isValid from 'date-fns/isValid'; import format from 'date-fns/format'; import isSameDay from 'date-fns/isSameDay'; @@ -12,7 +14,7 @@ import startOfWeek from 'date-fns/startOfWeek'; import endOfWeek from 'date-fns/endOfWeek'; import isWithinInterval from 'date-fns/isWithinInterval'; -class CustomElements extends Component { +class CustomElements extends PureComponent { static propTypes = { classes: PropTypes.object.isRequired, } @@ -21,12 +23,8 @@ class CustomElements extends Component { selectedDate: new Date(), } - handleDateChange = (date) => { - this.setState({ selectedDate: date }); - } - handleWeekChange = (date) => { - this.setState({ selectedDate: date.clone().startOf('week') }); + this.setState({ selectedDate: startOfWeek(date) }); } formatWeekSelectLabel = (date, invalidLabel) => { @@ -43,22 +41,7 @@ class CustomElements extends Component { : invalidLabel; } - renderCustomDayForDateTime = (date, selectedDate, dayInCurrentMonth, dayComponent) => { - const { classes } = this.props; - - const dayClassName = classNames({ - [classes.customDayHighlight]: isSameDay(date, selectedDate), - }); - - return ( -
- {dayComponent} -
-
- ); - } - - renderWrappedDefaultDay = (date, selectedDate, dayInCurrentMonth) => { + renderWrappedWeekDay = (date, selectedDate, dayInCurrentMonth) => { const { classes } = this.props; if (date instanceof moment) { @@ -96,33 +79,15 @@ class CustomElements extends Component { const { selectedDate } = this.state; return ( - -
- - Week picker - - - -
- -
- - DateTime picker - - - -
- +
+ +
); } } @@ -148,7 +113,7 @@ const styles = theme => ({ borderRadius: '50%', }, nonCurrentMonthDay: { - color: theme.palette.common.minBlack, + color: theme.palette.text.disabled, }, highlightNonCurrentMonthDay: { color: '#676767', diff --git a/docs/src/Examples/Demo/KeyboardDatePicker.jsx b/docs/src/Examples/Demo/KeyboardDatePicker.jsx new file mode 100644 index 000000000..9665bc4f7 --- /dev/null +++ b/docs/src/Examples/Demo/KeyboardDatePicker.jsx @@ -0,0 +1,44 @@ +import React, { Fragment, PureComponent } from 'react'; +import { DatePicker } from 'material-ui-pickers'; + +export default class BasicUsage extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Examples/Demo/KeyboardTimePicker.jsx b/docs/src/Examples/Demo/KeyboardTimePicker.jsx new file mode 100644 index 000000000..e062917a5 --- /dev/null +++ b/docs/src/Examples/Demo/KeyboardTimePicker.jsx @@ -0,0 +1,29 @@ +import React, { PureComponent } from 'react'; +import { TimePicker } from 'material-ui-pickers'; + +export default class BasicUsage extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( +
+ +
+ ); + } +} diff --git a/docs/src/Examples/Demo/TimePickerBasic.jsx b/docs/src/Examples/Demo/TimePickerBasic.jsx new file mode 100644 index 000000000..8935c2865 --- /dev/null +++ b/docs/src/Examples/Demo/TimePickerBasic.jsx @@ -0,0 +1,38 @@ +import React, { Fragment, PureComponent } from 'react'; +import { TimePicker } from 'material-ui-pickers'; + +export default class BasicUsage extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Examples/Localization/DateFnsLocalizationExample.jsx b/docs/src/Examples/Localization/DateFnsLocalizationExample.jsx new file mode 100644 index 000000000..886882718 --- /dev/null +++ b/docs/src/Examples/Localization/DateFnsLocalizationExample.jsx @@ -0,0 +1,89 @@ +import React, { PureComponent } from 'react'; +import DatePicker from 'material-ui-pickers/DatePicker'; +import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'; +import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'; +import { Icon, IconButton, Menu, MenuItem } from 'material-ui'; + +import frLocale from 'date-fns/locale/fr'; +import ruLocale from 'date-fns/locale/ru'; +import enLocale from 'date-fns/locale/en-US'; + +const localeMap = { + en: enLocale, + fr: frLocale, + ru: ruLocale, +}; + +export default class DateFnsLocalizationExample extends PureComponent { + state = { + selectedDate: new Date(), + anchorEl: null, + currentLocale: 'fr', + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + handleMenuOpen = (event) => { + event.stopPropagation(); + this.setState({ anchorEl: event.currentTarget }); + } + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + }; + + selectLocale = (selectedLocale) => { + this.setState({ + currentLocale: selectedLocale, + anchorEl: null, + }); + } + + render() { + const { selectedDate } = this.state; + const locale = localeMap[this.state.currentLocale]; + + return ( + +
+ + more_vert + + ), + }} + /> +
+ + + { + Object.keys(localeMap).map(localeItem => ( + this.selectLocale(localeItem)} + > + {localeItem} + + )) + } + + + ); + } +} diff --git a/docs/src/Examples/Localization/MomentLocalizationExample.jsx b/docs/src/Examples/Localization/MomentLocalizationExample.jsx new file mode 100644 index 000000000..d14f927ea --- /dev/null +++ b/docs/src/Examples/Localization/MomentLocalizationExample.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import moment from 'moment'; +import MomentUtils from 'material-ui-pickers/utils/date-fns-utils'; +import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'; + +moment.locale('fr'); + +const App = () => ( + + ... + +); + +export default App; diff --git a/docs/src/Demo/Examples/PersianPickers.jsx b/docs/src/Examples/PersianPickers.jsx similarity index 100% rename from docs/src/Demo/Examples/PersianPickers.jsx rename to docs/src/Examples/PersianPickers.jsx diff --git a/docs/src/Routes/Demos/DatePickerDemo.jsx b/docs/src/Routes/Demos/DatePickerDemo.jsx new file mode 100644 index 000000000..d54f66832 --- /dev/null +++ b/docs/src/Routes/Demos/DatePickerDemo.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import SourcablePanel from '_shared/SourcablePanel'; +import { Typography } from 'material-ui'; + +const DatePickerDemoDemo = () => ( +
+ + Date picker + + + Date pickers use a dialog window to select a single date. + + + The selected day is indicated by a filled circle. + The current day is indicated by a different color and type weight. + + + + + + + + Customization performing by overriding render method for Day component + + } + /> +
+); + +export default DatePickerDemoDemo; + diff --git a/docs/src/Routes/Demos/DateTimePickerDemo.jsx b/docs/src/Routes/Demos/DateTimePickerDemo.jsx new file mode 100644 index 000000000..9de7d04d2 --- /dev/null +++ b/docs/src/Routes/Demos/DateTimePickerDemo.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import SourcablePanel from '_shared/SourcablePanel'; +import { Typography } from 'material-ui'; + +const DateTimePickerDemo = () => ( +
+ + Date & time picker + + + This component is not from material design guidelines. + + + Its a combination of date & time picker and allows + that uses the modal to select both date and time with one control. + + + + + Applied mostly all customization, that available for date & time pickers + + } + /> +
+); + +export default DateTimePickerDemo; + diff --git a/docs/src/Routes/Demos/TimePickerDemo.jsx b/docs/src/Routes/Demos/TimePickerDemo.jsx new file mode 100644 index 000000000..6a7d51462 --- /dev/null +++ b/docs/src/Routes/Demos/TimePickerDemo.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import SourcablePanel from '_shared/SourcablePanel'; +import { Typography } from 'material-ui'; + +const DatePickerDemoDemo = () => ( +
+ + Time picker + + + Time pickers use a dialog to select a single time (in the hours:minutes format). + + + The selected time is indicated by the filled circle at the end of the clock hand. + + + + A time picker should adjusts to a user’s preferred time setting, + i.e. the 12-hour or 24-hour format. + + } + /> + + +
+); + +export default DatePickerDemoDemo; + diff --git a/docs/src/Routes/Demos/index.jsx b/docs/src/Routes/Demos/index.jsx new file mode 100644 index 000000000..d3c2a5252 --- /dev/null +++ b/docs/src/Routes/Demos/index.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Switch, Route } from 'react-router'; + +import DatePickerDemo from './DatePickerDemo'; +import TimePickerDemo from './TimePickerDemo'; +import DateTimePickerDemo from './DateTimePickerDemo'; + +export default () => ( + + + + + +); + diff --git a/docs/src/Routes/GettingStarted/Installation.jsx b/docs/src/Routes/GettingStarted/Installation.jsx new file mode 100644 index 000000000..59487b7fb --- /dev/null +++ b/docs/src/Routes/GettingStarted/Installation.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import Code from '_shared/Code'; +import { Typography } from 'material-ui'; + +// eslint-disable-next-line +import muiPickerProviderCode from '!raw-loader!Examples/CodeSnippets/MuiPickerProviderCode'; + +const installLibCode = +`npm i -s date-fns@next +// or +npm i -s moment`; + +const Installation = () => ( +
+ Installation + Available as npm package + + + + Peer Library + + Material-ui-pickers was designed to use that date management library that you need. + + + We are providing interfaces for moment +  and date-fns 2. + If you are not using moment in the project (or dont have it in the bundle already) + we suggest using date-fns, + because it much more lightweight and will be correctly tree-shaked from the bundle. + + + + + Teach pickers how to use one of that library using MuiPickersUtilsProvider. This component takes an utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree. + + + + Font Icons + + We are using material-ui-icons icon font to display icons. + In order if you can override with a help of corresponding props. Just add this to your html + + +
+); + +export default Installation; + diff --git a/docs/src/Routes/GettingStarted/Usage.jsx b/docs/src/Routes/GettingStarted/Usage.jsx new file mode 100644 index 000000000..1a738e8d8 --- /dev/null +++ b/docs/src/Routes/GettingStarted/Usage.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Code from '_shared/Code'; +import { Typography, withStyles } from 'material-ui'; + +// eslint-disable-next-line +import quickStartCode from '!raw-loader!Examples/CodeSnippets/QuickStart'; + +const Usage = ({ classes }) => ( +
+ Usage + + + Material-UI-pickers rely only on material-ui controls and the date-management lib + you have choose. Please note that all components are controlled, thats means that its required + to pass value and onChange props. + + + + Quick Start + + + + Here is a quick example you to get started + + + + + + Interactive example + + +