HaradaWeb > jQuery > jQuery UIのDatepickerの日付ピッカー

jQuery UIのDatepickerの日付ピッカー

更新日:2020年1月28日 | 投稿日:2020年1月26日

WordPresのフォーム(メールフォームとは限りません)に日付ピッカーを設置します。
子テーマでのサイト運営を前提としています。

ページ内リンク

デモ

導入度準備

<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

上のコードをheader.phpのhead～/headタグの中のphp wp_head();の下にコピペします。

「php wp_head();の下 」
というところが重要です。
WordPresでは 「wp_head();」 関数で外部のCSSやJavaScriptを読み込んでいます。
外部からJavaScriptを読み込んだ後、上のコードを読み込むという事です。
JavaScript、jQueryは読み込む順番が重要で、間違えるとエラーになります。

HTML

<label for="game-date">試合日:</label>
<input type="text" id="game-date" name="gamedate" />

フォームで使うlabelタグとinputタグです。
inputタグにid=”game-date”を設定しています。

jQueryコードと解説

<script type="text/javascript">
	$(function() {
		$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    		$('#game-date').datepicker({ dateFormat: 'yy-mm-dd' });
	});
</script>

1行づつ解説します。

$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );

このコードでDatepicker内の言語を日本語に変更しています。

$('#game-date').datepicker({ dateFormat: 'yy-mm-dd' });

id=”game-date”
の要素でdatepickerを適用させています。

dateFormat: ‘yy-mm-dd’
は日付を表示させる時のフォーマットです。
yy年mm月dd日
とすると2020年01月26日の様になります。

設置は完了

これでDatepickerの設置は完了しました。
しかしこのままでは使い道がありません。

Datepicker を実践的に利用する方法の1つとして、フォームに組み込みます。
フォームというとすぐに頭に浮かぶのはメールフォームですが、WordPresのプラグインのメールフォームにはデフォルトでピッカーが入っているので必要ありません。

今回HaradaWebで制作しているのはフロントエンドでページを制作するフォームです。

ページ制作フォームは別の機会に記事にしたいと思います。

TOP