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