もくじ
完成イメージと参考コード
まずは完成したコードを掲載しておきます。
完成イメージは以下の通りです。
以下のコードをそのままコピペすればデイトピッカーが正しく表示されるはずです。
<!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というテーマ名ではグレーベースのカレンダーが表示されます。