How to use react-datepicker - 10 common examples

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)&lt;{ hasError: boolean }&gt;({
    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
});

collector-bank / collector-portal-framework / src / common / components / DatePicker / index.tsx View on Github

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)&lt;{ hasError: boolean }&gt;({
    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) =&gt;

collector-bank / collector-portal-framework / src / common / components / DatePicker / index.tsx View on Github

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)&lt;{ hasError: boolean }&gt;({
    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
});

kiegroup / optaweb-employee-rostering / employee-rostering-frontend / src / i18n.ts View on Github

* 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 language

vtex / styleguide / react / components / DatePicker / index.js View on Github

handleLocaleChange = 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('-', '')])
  }

collector-bank / collector-portal-framework / src / common / components / DatePicker / index.tsx View on Github

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)&lt;{ hasError: boolean }&gt;({
    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) =&gt;
    css({

laravelcm / website / resources / assets / ts / admin / posts / Create.tsx View on Github

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Datepicker, { registerLocale, setDefaultLocale } from "react-datepicker";
// eslint-disable-next-line import/no-duplicates
import { format } from "date-fns";
// eslint-disable-next-line import/no-duplicates
import fr from "date-fns/locale/fr";
import classNames from "classnames";

registerLocale('fr', fr);
setDefaultLocale('fr');

const CreateForm = () => {
  const [status, setStatus] = useState(false);
  const [dates, setDates] = useState({
    date: new Date(),
    time: new Date(),
    dateFormatted: '',
    timeFormatted: '',
    published_at: new Date(),
  });

  const className = classNames('absolute block w-4 h-4 mt-1 ml-1 rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out', {
    'bg-brand-primary transform translate-x-full': status,
    'bg-white': !status,
  });

alex3165 / react-typescript-starter / src / containers / main.tsx View on Github

import ReactMapboxGl, { Popup } from 'react-mapbox-gl';
import { connect } from 'react-redux';
import { getLocations } from '../actions/index';
import { StateRoot } from '../reducers/index';
import { Stations } from './stations';
import styled from 'styled-components';
import { getDeepLink } from '../link';
import StationLabel from './station-label';
import Button from './button';
import * as moment from 'moment';
// tslint:disable-next-line:no-var-requires
import './style.css';
// tslint:disable-next-line:no-var-requires
// const data = require('../data/style.json');
// tslint:disable-next-line:no-var-requires
const DatePicker = require('react-datepicker').default;
// tslint:disable-next-line:no-submodule-imports
import 'react-datepicker/dist/react-datepicker.css';

const NavBar = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  min-height: 120px;
  justify-content: center;
  align-items: center;
`;

const Map = ReactMapboxGl({
  accessToken:

PeterKottas / guestbell-forms / src / lib / components / openingHours / openingHoursSpecial / OpeningHoursSpecial.tsx View on Github

import * as PlusIcon from 'material-design-icons/content/svg/production/ic_add_circle_outline_24px.svg';
import * as DateIcon from 'material-design-icons/action/svg/production/ic_event_24px.svg';

// Libs
import * as React from 'react';
try {
  var DatePicker = require('react-datepicker').default;
} catch {
  DatePicker = undefined;
}

// Misc
import OpeningHoursUtil from '../utils/OpeningHoursUtil';
import {
  OpeningHoursDayObj,
  OpeningHoursDay,
} from '../openingHoursDay/OpeningHoursDay';
import {
  BaseInputProps,
  BaseInputState,
  BaseInput,
} from '../../base/input/BaseInput';
import { Button } from '../../button/Button';

DefinitelyTyped / DefinitelyTyped / types / react-datepicker / react-datepicker-tests.tsx View on Github

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>

How to use react-datepicker - 10 common examples

To help you get started, we’ve selected a few react-datepicker examples, based on popular ways it is used in public projects.

react-datepicker

Package Health Score

Popular react-datepicker functions

Similar packages