react-datepicker-with-animation v1.0.3

React Datepicker with Animation 🗓

Datepicker for react with slide transition animation.

All React packages need to be 16.8.0 or higher to use this component.

Demo

https://diff001a.github.io/react-datepicker-with-animation/

How to install

npm i react-datepicker-with-animation

or

yarn add react-datepicker-with-animation

How to use

import Datepicker from 'react-datepicker-with-animation';

const App = () => {
  return (
    <div>
      <Datepicker />
    </div>
  )
}

props

• width: String, default: "300px"
• height: String, default: "285px"
• textColor: String, default: "#5D6D73"
• backgroundColor: String, default: "#fffeff"
• mainColor: String, default: "#39b3fc"
• onChange: Function, default: () => {}
• placeholder: String, default: ""
• defaultValue: String, default: ""
• css: styled-components css

About onChange function

const onChange = ({ value, valid }) => {
  console.log(value);
  console.log(valid); // valueがyyyy-MM-ddであればtrueを返します。
};

How to apply custom CSS

You can custom CSS for a input element using styled-components css 💅

渡された css は、input のラッパー要素に対して適用されます。

⬇️ here's an example ⬇️

import { css } from "styled-components";

const InputStyle = css`
  // normal style //
  border: 1px solid #ccc;
  input {
    color: #333;
  }
  &.focus {
    // focused style //
    border: 1px solid blue;
  }
  &.error {
    // error style //
    border: 1px solid red;
  }
  &.valid {
    // valid style //
    border: 1px solid green;
  }
`;

const App = props => {
  return (
    <div>
      <Datepicker css={InputStyle} />
    </div>
  );
};