jQuery UI Datepickerの基本の使い方【カレンダーから日付選択】

完成イメージと参考コード

まずは完成したコードを掲載しておきます。

完成イメージは以下の通りです。

以下のコードをそのままコピペすればデイトピッカーが正しく表示されるはずです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery UI Datepicker</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css"><!-- jQuery UIのCSSをCDNで読み込み -->
</head>
<body>
  <h2>date picker</h2>
  <input type="text" id="datepicker"><!-- デイトピッカーの入力フィールド -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script><!-- jQueryをCDNで読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script><!-- jQuery UIのjsをCDNで読み込み -->
    $(function(){
        $("#datepicker").datepicker();
    });
  </script>
</body>
</html>

ここからは一つ一つjQuery UI Datepickerの設置方法を順番に記載していきます。

HTML設置

デイトピッカーのフィールドを準備します。

<input type="text" id="datepicker">

各種読み込み

jQuery UIのCSSをCDNで読み込む

jQuery UIが用意しているCDNがあるので読み込みます。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

私の場合CDNはGoogle Developersから使わせてもらってます。

jQueryをCDNで読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

jQuery UIのJSをCDNで読み込む

このCDNはjQueryの読み込みよりも後に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

datepickerメソッドを実行する

datepickerメソッド( datepicker() )を実行します。

$(function(){
    $("#datepicker").datepicker();
});

デザインを変更する

デフォルトでいくつかのデザインが用意されています。

そのデザインを変更するには、jQuery UIのCSSをCDNで読み込むの項のコードを少し変更する必要があります。

はじめに使いたいスタイリングのテーマを決める

以下のリンクからテーマを選択できます。

赤枠内のGalleryを選択します。

すると、さまざまなデザインがずらっと出てきます。

その中から自分の好きなデザインを選択します。

画像右側のオレンジのカレンダーを使いたかったとします。

その場合、赤枠で囲ってあるテーマ名を使用します。

全て小文字で、スペースはハイフンに変換して使用します。

これをCSSのCDNの中で使います。

ui-lightness

CSSを修正する

jQuery UIのCSSをCDNで読み込むの項のコードのsmoothnessの部分を先ほど選択したテーマ名(ui-lightness)に書き直します。

変更前

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

変更後

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/ui-lightness/jquery-ui.css">

結果

フィールドをクリックすると選択したデザインのカレンダーが表示されるようになります。

ちなみにデフォルトのsmoothnessというテーマ名ではグレーベースのカレンダーが表示されます。

コメントを残す

メールアドレスが公開されることはありません。