軽量化対策のため jQuery UI カスタムビルドでDatepicker だけ使用
#JavaScript(jQuery、そのたJS技術)

created: 2025/06/01, modified: 2025/06/04

標準のサムネイル 2024-06

jQuery UI の Datepicker はいろんな案件で使われているので、慣れているし、ので、扱いやすいです。ただ、jsファイルのサイズが大きいので軽量化をしたいです。PageSpeed Insights 案件で小さな努力が必要です。

jQuery UI の公式ビルダー

jQuery UI の公式ビルダーで必要な機能だけを選択してビルドできます。

  • 「Core」から「Widget」「Position」(カレンダーのポップアップに必要)をチェック
  • 「Widgets」で Datepicker のみチェック
  • 「Effects」はチェックを外す
  • テーマも「Base」などシンプルなものにしてOK

「Download」ボタンを押して取得

使用したい機能にチェック入れる

容量は 200KB ほど小さくなります

jsは特にファイルサイズが小さくなる

コード

使用のデモページ

Datepicker jQuery UI
https://usual.tools/tech/jquery/datepicker/02