ビジュアライズ度の高いReact用カレンダープラグライン「React Nice Dates」

React Nice Dates
https://reactnicedates.hernansartorio.com/

React Nice Datesの特徴

「React Nice Dates」は、レスポシンブルに対応したReact用のカレンダープラグラインです。

React Nice Datesの導入

npm install react-nice-dates date-fns --save

npmまたは

yarn add react-nice-dates date-fns

yarnでの導入が可能です。

スタンダードなカレンダー

import React, { useState } from 'react'
import { enGB } from 'date-fns/locale'
import { DatePicker } from 'react-nice-dates'
function DatePickerExample() {
  const [date, setDate] = useState()
  return (
    <DatePicker date={date} onDateChange={setDate} locale={enGB}>
      {({ inputProps, focused }) => (
        <input
          className={'input' + (focused ? ' -focused' : '')}
          {...inputProps}
        />
      )}
    </DatePicker>
  )
}

期間指定カレンダー

import React, { useState } from 'react'
import { enGB } from 'date-fns/locale'
import { DateRangePicker, START_DATE, END_DATE } from 'react-nice-dates'
function DateRangePickerExample() {
  const [startDate, setStartDate] = useState()
  const [endDate, setEndDate] = useState()
  return (
    <DateRangePicker
      startDate={startDate}
      endDate={endDate}
      onStartDateChange={setStartDate}
      onEndDateChange={setEndDate}
      minimumDate={new Date()}
      format='dd MMM yyyy'
      locale={enGB}
    >
      {({ 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>
  )
}

複数選択カレンダー

import React, { useState } from 'react'
import { isSameDay } from 'date-fns'
import { enGB } from 'date-fns/locale'
import { Calendar } from 'react-nice-dates'
// Very rough implementation of multiple date selection
export default function CalendarExample() {
  const [selectedDates, setSelectedDates] = useState([])
  const modifiers = {
    selected: date => selectedDates.some(selectedDate => isSameDay(selectedDate, date))
  }
  const handleDayClick = date => {
    setSelectedDates([...selectedDates, date])
  }
  return (
    <Calendar onDayClick={handleDayClick} modifiers={modifiers} locale={enGB} />
  )
}

なお、オープンソースとしても提供されていますので、興味のある方は参照して見てみてください。
https://github.com/hernansartorio/react-nice-dates

React Nice Dates
https://reactnicedates.hernansartorio.com/


コメントを読む

新着ピック  






















新着ニュース

TypeScriptの実行環境 Deno を動かしてみる | Developers.IO

声がぶつからない。ゲーマー向けボイスチャットツール「Discord」を今こそ推したい | Developers.IO

ホンダ、GMの車台とバッテリで新型EVを共同開発--2024年モデル2車種を米国とカナダで

急なテレワーク、ネット回線はどうする? 工事不要で導入できる「ワイヤレスルーター」を検討してみよう

第10世代Core i7搭載のNUC「NUC10i7FNH」がデビュー!

アップル、新型コロナ対策でマスクと独自開発フェイスシールドを医療機関へ寄付

大分空港がアジア初の宇宙港に、Virgin Orbitと大分県が提携--2022年の打ち上げ目指す

ファイアウォールにて Amazon S3 への接続のみ許可する設定を行う必要があります。AWS で使用される IP アドレスの範囲を教えてください。 | Developers.IO

不要になった CloudWatch メトリクスはどうなれば削除されますか? | Developers.IO

バンザイ〜スマホに AWS Console アプリを入れておいてよかった〜 | Developers.IO

ソラシドエア、全社に「Slack」導入 国内の航空会社で初

AWSで廃棄した記録媒体からデータ漏洩するか知りたい | Developers.IO

[Amazon SageMaker] オブジェクト検出のサンプルで使用されているデータセットを確認してみました。 | Developers.IO

もしロックダウンになったら鉄道は止まるのか?

神戸市と筑波大発「水中ドローン」ベンチャーが実証実験--ダム水中を3次元画像化

DockerコンテナのベースイメージをAmazon Linux AMIからAmazon Linux 2に変更する | Developers.IO

AWSサービスを一枚絵でサラッと抑える!グラレコ満載の「awsgeek.com」は眺めるだけで楽しい | Developers.IO

「eSIM」対応スマホおすすめ3選【2020年最新版】

テスラが車載コンピュータやエアタンクで人工呼吸器を作るプロセスをビデオで紹介 | TechCrunch Japan

テレワーク実施率は5% LINEと厚労省の新型コロナ調査で判明

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。