【イベント】イベント新規作成or編集時の日付選択をDatePickerコンポーネントに置き換える #250

[atomisu0312]

ご無沙汰しております。

イベント作成or 編集時の日付選択の際に、専用のコンポーネントを利用するように修正しました。
これにより、ブラウザの標準仕様ではなく、専用のUIで日付の選択ができるようになります。
その他、一部修正を行なっています。

以下、修正の概要です。

• Form要素で使える日付選択用のコンポーネント(FormInputDate)を実装
• lib/utilにgetDateTimeRemovedTimezoneを追加
• CommonRegisterFormFieldでinput要素かつ、typeがdateである場合に、今回追加したコンポーネントを使用するように変更
• FormField.tsxにコメントを追加

以下、イベント新規作成機能における差分となります。

前：

後：

[Copilot]

Pull Request Overview

A PR that replaces native date inputs with a custom DatePicker component for event creation/edit forms, adds a utility to normalize dates by removing timezone offsets, and plugs the new component into the form renderer.

• Introduce getDateTimeRemovedTimezone util to strip timezone offsets
• Create FormInputDate component wrapping DatePicker plus a hidden formatted input
• Update FormField to render FormInputDate for input[type="date"] fields

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
front/src/lib/util/date.ts	Added getDateTimeRemovedTimezone util to normalize dates without timezone offsets
front/src/components/organisms/common/form/FormField.tsx	Updated form renderer to use FormInputDate for date inputs
front/src/components/molecules/field/FormInputDate.tsx	New date-specific input component using DatePicker and hidden formatted field

Comments suppressed due to low confidence (2)

front/src/components/molecules/field/FormInputDate.tsx:1

• Add unit tests for FormInputDate to ensure the date is normalized correctly, the hidden input value is formatted as expected, and onChange updates state correctly.

import { DatePicker } from "@/components/molecules/input/DatePicker"

front/src/lib/util/date.ts:185

• [nitpick] The JSDoc for getDateTimeRemovedTimezone repeats similar wording for both description and return. Consider clarifying that this function removes the local timezone offset so that the date represents the same local time in UTC.

/**

[Copilot]

Initializing the state with new Date(defaultValue) can lead to inconsistent parsing of a 'YYYY-MM-DD' string across browsers. Consider using getDateTimeRemovedTimezone(new Date(defaultValue)) to normalize the date when a default is provided.

Suggested change

	const [date, setDate] = useState<Date>(defaultValue ? new Date(defaultValue) : new Date())
	const [date, setDate] = useState<Date>(defaultValue ? getDateTimeRemovedTimezone(new Date(defaultValue)) : new Date())

[YasunariIguchi]

@atomisu0312
ローカルで動作確認し、問題ありませんでした。改修ありがとうございます！