@gravity-ui/date-components ·     

Install

``shell
npm install react react-dom @gravity-ui/uikit @gravity-ui/date-components @gravity-ui/date-utils
`

Usage

`jsx
import {createRoot} from 'react-dom/client';
import {DatePicker} from '@gravity-ui/date-components';
import {ThemeProvider} from '@gravity-ui/uikit';

import '@gravity-ui/uikit/styles/styles.css';

function App() {
return (



DatePicker

Date:



);
}

const root = createRoot(document.getElementById('root'));
root.render();
`

$3

`jsx
import {settings} from '@gravity-ui/date-utils';

// Load date locales that will be used in an application.
await settings.loadLocale('ru');

function App() {
return (
// Set the language to use with components.



DatePicker

Дата:



);
}

`

If the app supports language switching, preload all supported locales when the app first loads, or load the locales before switching the language:

`jsx
// Preload locales
await Promise.all([settings.loadLocale('ru'), settings.loadLocale('nl')]);

const root = createRoot(document.getElementById('root'));
root.render();

// or load locales on demand.

function App() {
const [lang, setLang] = React.useState('en');

const handleLangChange = (newLang) => {
settings.loadLocale(newLang).then(() => {
setLang(newLang);
});
};

return ...;
}
`

The components have translations into English and Russian. To add translations into other languages, use addLanguageKeysets from @gravity-ui/uikit:

`ts
import {addLanguageKeysets} from '@gravity-ui/uikit/i18n';
import type {Keysets, PartialKeysets} from '@gravity-ui/date-components';

// Use the Keyset type to specify translations for all available components
addLanguageKeysets(lang, {...});

// or use the PartialKeysets type to specify only the ones you need
addLanguageKeysets(lang, {...});

// To specify translations for some components
addLanguageKeysets>(lang, {...});
`

Development

To start the development server with storybook run the following:

`shell
npm start
``