npm install react react-dom @gravity-ui/uikit @gravity-ui/date-components @gravity-ui/date-utilsimport {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 (
<ThemeProvider>
<h1>DatePicker</h1>
<form>
<label htmlFor="date-picker">Date: </label>
<DatePicker id="date-picker" name="date" />
</form>
</ThemeProvider>
);
}
const root = createRoot(document.getElementById('root'));
root.render(<App />);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.
<ThemeProvider lang="ru">
<h1>DatePicker</h1>
<form>
<label htmlFor="date-picker">Дата: </label>
<DatePicker id="date-picker" name="date" />
</form>
</ThemeProvider>
);
}If the app supports language switching, preload all supported locales when the app first loads, or load the locales before switching the language:
// Preload locales
await Promise.all([settings.loadLocale('ru'), settings.loadLocale('nl')]);
const root = createRoot(document.getElementById('root'));
root.render(<App />);
// or load locales on demand.
function App() {
const [lang, setLang] = React.useState('en');
const handleLangChange = (newLang) => {
settings.loadLocale(newLang).then(() => {
setLang(newLang);
});
};
return <ThemeProvider lang={lang}>...</ThemeProvider>;
}The components have translations into English and Russian. To add translations into other languages, use addLanguageKeysets from @gravity-ui/uikit:
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<Keysets>(lang, {...});
// or use the PartialKeysets type to specify only the ones you need
addLanguageKeysets<PartialKeysets>(lang, {...});
// To specify translations for some components
addLanguageKeysets<Pick<Keysets, 'g-date-calendar' | 'g-date-date-field' | 'g-date-date-picker'>>(lang, {...});To start the development server with storybook run the following:
npm start