React.js ライブラリ「react-nice-dates」を使用してデザイン性の高いカレンダーを制作する

create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install react-nice-dates

import React, { useState }  from 'react';
import { ja } from 'date-fns/locale'
import { DatePicker } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'

export const Sample = () => {
    const [date, setDate] = useState()

    return (
        <DatePicker date={date} onDateChange={setDate} locale={ja}>
        {({ inputProps, focused }) => (
            <input
            className={'input' + (focused ? ' -focused' : '')}
            {...inputProps}
            />
        )}
        </DatePicker>
    )
}
  
export default Sample

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;

npm start

import React, { useState }  from 'react';
import { ja } from 'date-fns/locale'
import { DateRangePicker, START_DATE, END_DATE } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'

export const Sample = () => {
    const [startDate, setStartDate] = useState()
    const [endDate, setEndDate] = useState()

    return (
        <DateRangePicker
            startDate={startDate}
            endDate={endDate}
            onStartDateChange={setStartDate}
            onEndDateChange={setEndDate}
            minimumDate={new Date()}            
            locale={ja}
            >
            {({ startDateInputProps, endDateInputProps, focus }) => (
                <div className='date-range'>
                <input
                    className={'input' + (focus === START_DATE ? ' -focused' : '')}
                    {...startDateInputProps}
                    placeholder='Start date'
                />
                <span className='date-range_arrow' />
                <input
                    className={'input' + (focus === END_DATE ? ' -focused' : '')}
                    {...endDateInputProps}
                    placeholder='End date'
                />
                </div>
            )}
        </DateRangePicker>
    )
}
  
export default Sample