0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ReactDatepickerで週の開始日を任意の曜日にする方法

Last updated at Posted at 2020-11-04

早速サンプルコード

import ja from 'date-fns/locale/ja';
import React, { ReactElement } from 'react';
import DatePicker from 'react-datepicker';

// Locale Classのインスタンスではないが、Typescriptのコンパイルエラーを潰すために強引に
// インスタンスをちゃんと作る方べきかもだが今回はasで簡単に回避
const sundayStartJa = { ...ja, options: { ...ja.options, weekStartsOn: 0 } } as Locale; 

export const Datepicker = (): ReactElement => 
  <DatePicker locale={sundayStartJa} onChange={console.log} />;

上記の前提は

  • ロケールはja (日本)
    • jaにすると、週の開始日が月曜日になる

  • これを日曜日開始に変更する
    • weekStartsOn: 0が日曜なので任意の曜日を指定する

ドキュメントにも見当たらず、だいぶ無理やり実装した感があるが想定どおりの挙動をしている
ja.option = {//略}などでも動いたが、怖いのでコピーを作成

React Datepicker
https://reactdatepicker.com/
https://github.com/Hacker0x01/react-datepicker#localization

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?