1 | <p align="center">
|
2 | <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="200" src="https://material-ui-pickers.dev/static/meta-image.png" alt="Material-UI logo"></a></p>
|
3 | </p>
|
4 |
|
5 | <h1 align="center">Material-UI pickers</h1>
|
6 |
|
7 | <div align="center">
|
8 |
|
9 | Accessible, customizable, delightful date & time pickers for [@material-ui/core](https://material-ui.com/)
|
10 |
|
11 | [![npm package](https://img.shields.io/npm/v/material-ui-pickers.svg)](https://www.npmjs.org/package/material-ui-pickers)
|
12 | [![npm download](https://img.shields.io/npm/dm/material-ui-pickers.svg)](https://www.npmjs.org/package/material-ui-pickers)
|
13 | [![codecov](https://codecov.io/gh/dmtrKovalenko/material-ui-pickers/branch/develop/graph/badge.svg)](https://codecov.io/gh/dmtrKovalenko/material-ui-pickers)
|
14 | [![Bundle Size](https://img.shields.io/badge/gzip-14.7%20KB-brightgreen.svg)](https://unpkg.com/material-ui-pickers@1.0.0-rc.10/dist/material-ui-pickers.cjs.js)
|
15 | [![Build Status](https://api.travis-ci.org/dmtrKovalenko/material-ui-pickers.svg?branch=master)](https://travis-ci.org/dmtrKovalenko/material-ui-pickers)
|
16 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
|
17 |
|
18 | </div>
|
19 |
|
20 | ### Installation
|
21 |
|
22 | Available as npm package.
|
23 |
|
24 | ```sh
|
25 | npm i material-ui-pickers
|
26 |
|
27 | // or via yarn
|
28 | yarn add material-ui-pickers
|
29 | ```
|
30 |
|
31 | Now choose the library that pickers will use to work with date. We are providing interfaces for [moment](https://momentjs.com/), [luxon](https://moment.github.io/luxon/), [dayjs](https://github.com/iamkun/dayjs) and [date-fns v2](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 or luxon, because they are much lighter and will be correctly tree-shaked from the bundle. Note, that we are fully relying on [date-io](https://github.com/dmtrKovalenko/date-io) for supporting different libraries.
|
32 |
|
33 | ```sh
|
34 | npm i date-fns@next @date-io/date-fns
|
35 | // or
|
36 | npm i moment @date-io/moment
|
37 | // or
|
38 | npm i luxon @date-io/luxon
|
39 | // or
|
40 | npm i dayjs @date-io/dayjs
|
41 | ```
|
42 |
|
43 | Then teach pickers which library to use with `MuiPickerUtilsProvider`. This component takes a 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.
|
44 |
|
45 | ```jsx
|
46 | import MomentUtils from '@date-io/moment';
|
47 | import DateFnsUtils from '@date-io/date-fns';
|
48 | import LuxonUtils from '@date-io/luxon';
|
49 | import { MuiPickersUtilsProvider } from 'material-ui-pickers';
|
50 |
|
51 | function App() {
|
52 | return (
|
53 | <MuiPickersUtilsProvider utils={DateFnsUtils}>
|
54 | <Root />
|
55 | </MuiPickersUtilsProvider>
|
56 | );
|
57 | }
|
58 |
|
59 | render(<App />, document.querySelector('#app'));
|
60 | ```
|
61 |
|
62 | ## Documentation
|
63 |
|
64 | Check out the [documentation website](https://material-ui-pickers.dev/)
|
65 |
|
66 | ### Recently updated?
|
67 |
|
68 | Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases)
|
69 |
|
70 | ### Contributing
|
71 |
|
72 | For information about how to contribute, see the [CONTRIBUTING](https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/CONTRIBUTING.md) file.
|
73 |
|
74 | ### LICENSE
|
75 |
|
76 | The project is licensed under the terms of [MIT license](https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/LICENSE)
|