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-pickers logo"></a></p>
|
3 | </p>
|
4 |
|
5 | <h1 align="center">Material-UI Thai datepickers</h1>
|
6 |
|
7 | <div align="center">
|
8 | This package is forked from [material-ui-pickers](https://www.npmjs.com/package/material-ui-pickers)
|
9 |
|
10 | Accessible, customizable, delightful date & time pickers for [@material-ui/core](https://material-ui.com/)
|
11 |
|
12 | [![npm package](https://img.shields.io/npm/v/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
|
13 | [![npm download](https://img.shields.io/npm/dm/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
|
14 | [![codecov](https://codecov.io/gh/mui-org/material-ui-pickers/branch/next/graph/badge.svg)](https://codecov.io/gh/mui-org/material-ui-pickers)
|
15 | [![Bundle Size](https://badgen.net/bundlephobia/minzip/@material-ui/pickers)](https://bundlephobia.com/result?p=@material-ui/pickers@latest)
|
16 | [![CircleCI](https://circleci.com/gh/mui-org/material-ui-pickers.svg?style=svg)](https://circleci.com/gh/mui-org/material-ui-pickers)
|
17 | [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/qow28y/runs)
|
18 | [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/mui-org/material-ui-pickers)
|
19 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
|
20 |
|
21 | </div>
|
22 |
|
23 | ### Installation
|
24 |
|
25 | Note that this package reqiures `@material-ui/core` **v4**. It will not work with the old v3. Please read the [migration guide](https://material-ui-pickers.dev/guides/upgrading-to-v3) if you are updating from v2
|
26 |
|
27 | ```sh
|
28 | // via npm
|
29 | npm i @material-ui/pickers
|
30 |
|
31 | // via yarn
|
32 | yarn add @material-ui/pickers
|
33 | ```
|
34 |
|
35 | 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.
|
36 |
|
37 | ```sh
|
38 | npm i date-fns@next @date-io/date-fns
|
39 | // or
|
40 | npm i moment @date-io/moment
|
41 | // or
|
42 | npm i luxon @date-io/luxon
|
43 | // or
|
44 | npm i dayjs @date-io/dayjs
|
45 | ```
|
46 |
|
47 | 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.
|
48 |
|
49 | ```jsx
|
50 | import MomentUtils from "@date-io/moment";
|
51 | import { MuiPickersUtilsProvider, DatePicker } from "material-ui-thai-datepickers";
|
52 |
|
53 | import 'moment/locale/th';
|
54 |
|
55 | function App() {
|
56 | return (
|
57 | <MuiPickersUtilsProvider utils={MomentUtils} locale={'th'}>
|
58 | <DatePicker
|
59 | label="with B.E. yearOffset"
|
60 | format="dd/MM/YYYY"
|
61 | pickerHeaderFormat="ddd D MMM"
|
62 | yearOffset={543}
|
63 | />
|
64 | </MuiPickersUtilsProvider>
|
65 | );
|
66 | }
|
67 |
|
68 | render(<App />, document.querySelector('#app'));
|
69 | ```
|
70 |
|
71 | ## Documentation
|
72 |
|
73 | Check out the [documentation website](https://material-ui-pickers.dev/)
|
74 |
|
75 | ### Recently updated?
|
76 |
|
77 | Changelog available [here](https://github.com/mui-org/material-ui-pickers/releases)
|
78 |
|
79 | ### Contributing
|
80 |
|
81 | For information about how to contribute, see the [CONTRIBUTING](https://github.com/mui-org/material-ui-pickers/blob/master/CONTRIBUTING.md) file.
|
82 |
|
83 | ### LICENSE
|
84 |
|
85 | The project is licensed under the terms of [MIT license](https://github.com/mui-org/material-ui-pickers/blob/master/LICENSE)
|