How to use the react-datepicker.registerLocale function in react-datepicker
To help you get started, we’ve selected a few react-datepicker examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
collector-bank / collector-portal-framework / src / common / components / DatePicker / index.tsx View on Github 
import ReactDatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker';
import Collapse from 'react-css-collapse';
import { css } from 'glamor';
import { Label, InputError } from '../';
import { InputContainer, InputField } from '../Input';
import styled from '../../../';
import { Theme } from '../../../themes';
import sv from 'date-fns/locale/sv';
import nb from 'date-fns/locale/nb';
import fi from 'date-fns/locale/fi';
import 'react-datepicker/dist/react-datepicker.css';
import { withTheme } from 'emotion-theming';
registerLocale('sv', sv);
registerLocale('nb', nb);
registerLocale('fi', fi);
setDefaultLocale('sv');
const calendar =
"'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22%23111%22 d=%22M13.504 1.463h-1.223V.502a.5.5 0 0 0-1 0v.961H4.742V.502a.5.5 0 0 0-1 0v.961H2.52c-.758 0-1.374.616-1.374 1.374v11.339a.5.5 0 0 0 .5.5h12.732a.5.5 0 0 0 .5-.5V2.837c0-.758-.616-1.374-1.374-1.374zm-10.984 1h10.984c.206 0 .374.168.374.374v1.857H2.146V2.837c0-.206.168-.374.374-.374zm-.374 11.213V5.694h11.732v7.982H2.146z%22/%3E%3Cpath fill=%22%23111%22 d=%22M12.117 8.904h-2.5a.5.5 0 0 0-.5.5v2.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5v-2.5a.5.5 0 0 0-.5-.5zm-.5 2.5h-1.5v-1.5h1.5v1.5z%22/%3E%3C/svg%3E'";
const inputErrorTransition = css({
transition: 'height 150ms',
});
const InputFieldWithIcon = styled(InputField)<{ hasError: boolean }>({
background: `url(${calendar}) no-repeat 95% center`,
backgroundPosition: `calc(100% - 12px) 50%`, // doesn't work in IE11, that's why we need the 95% fallback above
backgroundSize: '24px 24px', // a single value here doesn't work in IE11
});import Collapse from 'react-css-collapse';
import { css } from 'glamor';
import { Label, InputError } from '../';
import { InputContainer, InputField } from '../Input';
import styled from '../../../';
import { Theme } from '../../../themes';
import sv from 'date-fns/locale/sv';
import nb from 'date-fns/locale/nb';
import fi from 'date-fns/locale/fi';
import 'react-datepicker/dist/react-datepicker.css';
import { withTheme } from 'emotion-theming';
registerLocale('sv', sv);
registerLocale('nb', nb);
registerLocale('fi', fi);
setDefaultLocale('sv');
const calendar =
"'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22%23111%22 d=%22M13.504 1.463h-1.223V.502a.5.5 0 0 0-1 0v.961H4.742V.502a.5.5 0 0 0-1 0v.961H2.52c-.758 0-1.374.616-1.374 1.374v11.339a.5.5 0 0 0 .5.5h12.732a.5.5 0 0 0 .5-.5V2.837c0-.758-.616-1.374-1.374-1.374zm-10.984 1h10.984c.206 0 .374.168.374.374v1.857H2.146V2.837c0-.206.168-.374.374-.374zm-.374 11.213V5.694h11.732v7.982H2.146z%22/%3E%3Cpath fill=%22%23111%22 d=%22M12.117 8.904h-2.5a.5.5 0 0 0-.5.5v2.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5v-2.5a.5.5 0 0 0-.5-.5zm-.5 2.5h-1.5v-1.5h1.5v1.5z%22/%3E%3C/svg%3E'";
const inputErrorTransition = css({
transition: 'height 150ms',
});
const InputFieldWithIcon = styled(InputField)<{ hasError: boolean }>({
background: `url(${calendar}) no-repeat 95% center`,
backgroundPosition: `calc(100% - 12px) 50%`, // doesn't work in IE11, that's why we need the 95% fallback above
backgroundSize: '24px 24px', // a single value here doesn't work in IE11
});
const style = (theme: Theme) =>import React from 'react';
import ReactDatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker';
import Collapse from 'react-css-collapse';
import { css } from 'glamor';
import { Label, InputError } from '../';
import { InputContainer, InputField } from '../Input';
import styled from '../../../';
import { Theme } from '../../../themes';
import sv from 'date-fns/locale/sv';
import nb from 'date-fns/locale/nb';
import fi from 'date-fns/locale/fi';
import 'react-datepicker/dist/react-datepicker.css';
import { withTheme } from 'emotion-theming';
registerLocale('sv', sv);
registerLocale('nb', nb);
registerLocale('fi', fi);
setDefaultLocale('sv');
const calendar =
"'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22%23111%22 d=%22M13.504 1.463h-1.223V.502a.5.5 0 0 0-1 0v.961H4.742V.502a.5.5 0 0 0-1 0v.961H2.52c-.758 0-1.374.616-1.374 1.374v11.339a.5.5 0 0 0 .5.5h12.732a.5.5 0 0 0 .5-.5V2.837c0-.758-.616-1.374-1.374-1.374zm-10.984 1h10.984c.206 0 .374.168.374.374v1.857H2.146V2.837c0-.206.168-.374.374-.374zm-.374 11.213V5.694h11.732v7.982H2.146z%22/%3E%3Cpath fill=%22%23111%22 d=%22M12.117 8.904h-2.5a.5.5 0 0 0-.5.5v2.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5v-2.5a.5.5 0 0 0-.5-.5zm-.5 2.5h-1.5v-1.5h1.5v1.5z%22/%3E%3C/svg%3E'";
const inputErrorTransition = css({
transition: 'height 150ms',
});
const InputFieldWithIcon = styled(InputField)<{ hasError: boolean }>({
background: `url(${calendar}) no-repeat 95% center`,
backgroundPosition: `calc(100% - 12px) 50%`, // doesn't work in IE11, that's why we need the 95% fallback above
backgroundSize: '24px 24px', // a single value here doesn't work in IE11
});* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import { registerLocale, setDefaultLocale } from 'react-datepicker';
import cmn from 'date-fns/locale/zh-CN';
import YAML from 'yaml';
import moment from 'moment';
import 'moment/locale/zh-cn';
registerLocale('cmn', cmn);
function languageToMomentLocale(lang: string): string {
switch (lang) {
case 'cmn':
return 'zh-cn';
default:
return lang;
}
}
// From https://github.com/i18next/react-i18next/blob/master/example/react/src/i18n.js
i18n
// load translation using xhr -> see /public/locales
// learn more: https://github.com/i18next/i18next-xhr-backend
.use(Backend)
// detect user languagehandleLocaleChange = locale => {
// registerLocale is a function from react-datepicker component that loads
// an imported locale object from date-fns.
//
// For more information visit the link below:
// https://github.com/Hacker0x01/react-datepicker#localization
//
registerLocale(locale, locales[locale.replace('-', '')])
}import * as React from 'react';
import DatePicker, { registerLocale, setDefaultLocale, getDefaultLocale } from 'react-datepicker';
import enUS from 'date-fns/locale/en-US';
registerLocale('en-GB', { options: { weekStartsOn: 1 } });
setDefaultLocale('en-GB');
const defaultLocale = getDefaultLocale();
<div>}
className=""
clearButtonTitle=""
customInput={<input>}
customInputRef=""
dateFormat=""</div>componentDidMount() {
registerLocale("fi", fi);
registerLocale("pt-BR", ptBR);
registerLocale("en-GB", enGB);
}componentDidMount() {
registerLocale("fi", fi);
registerLocale("pt-BR", ptBR);
registerLocale("en-GB", enGB);
}import React from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import enGB from "date-fns/locale/en-GB";
registerLocale("en-GB", enGB);
export default class CustomStartDate extends React.Component {
state = {
startDate: null
};
handleChange = date => {
this.setState({
startDate: date
});
};
render() {
return (
<div>
<pre></pre></div>componentDidMount() {
registerLocale("fi", fi);
registerLocale("pt-BR", ptBR);
registerLocale("en-GB", enGB);
}react-datepicker
A simple and reusable datepicker component for React
