検索条件日付項目の非活性

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用いて、検索条件の日付入力欄を無効化し、併せて日付選択用のカレンダーアイコンも非表示にする方法を紹介しています。

2. サンプル機能の内容と確認ポイント

検索条件として表示される日付のFROM-TO入力欄のうち、「指定納期日」のTO項目には、画面起動時に本日の日付が自動入力されます。
このTO項目をユーザーが編集できないようにする方法を、以下に紹介します。

Client-side JavaScript による実装内容は以下のとおりです。
まず、getElementsByName を用いて対象の要素を取得し、クラスに 'flatInput' を追加します。
次に、スタイルに pointer-events: none; を適用することで、マウス操作を無効化します。
あわせて、TO項目の横に表示されるカレンダーアイコンも、対象要素に display: none; を設定することで非表示にします。

🔍 確認いただけるポイント

• 検索条件の日付項目が無効化され、入力できない状態であること

• カレンダーアイコンがないこと

3. 画面イメージ

以下は、検索条件「指定納期日」において、TO項目が無効となっている状態を示しています。

!++++

使用したコード一覧

!----