メインコンテンツへスキップ

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

  • 更新

!++++

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

!----

1. はじめに

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

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

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

【Client-side JavaScript による制御内容】
対象の TO 項目に対して、次の設定を行います。

  1. 要素の取得
    getElementsByName() を用いて該当の入力要素を取得します。
  2. 見た目の調整
    取得した要素にクラス 'flatInput' を追加し、他の検索条件と統一したスタイルで表示します。
    あわせて、TO項目の横に表示されるカレンダーアイコンも、対象要素に display: none; を設定することで非表示にします。
  3. 入力不可（編集禁止）の設定
    フォーム送信時には値をサーバに送る必要があるため、disabled は使用せず、
    readonly プロパティを true に設定してキーボードからの編集を禁止します。
  4. タブ移動の対象外とする設定
    キーボード操作によるフォーカスを防ぐため、tabIndex = -1 を設定し、
    タブキーでこの項目に移動できないようにします。
  5. マウス操作の無効化
    カレンダーアイコンなどマウス操作で日付を変更できる要素に対しては、
    style に pointer-events: none; を適用することでクリック操作を無効化します。

これにより、「指定納期日（TO）」は 画面起動時に自動設定された本日日付が表示され、ユーザーは変更できない検索条件 として利用できます。
 

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

  • 検索条件の日付項目(TO)が、入力できない状態であること

  • カレンダーアイコンが非表示となっていること

3. 画面イメージ

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

 

!++++

使用したコード一覧

•resizeContents_start()
•getElementByName()

!----