• HOME > 
  • JavaScript > 
  • jQueryUIのdatepickerの使い方【日本語化する...

jQueryUIのdatepickerの使い方【日本語化する方法まで解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

jQueryUIのdatepickerとは?

jQueryUIのdatepickerを使えば、日付の入力フォームを設置した時にカレンダーを表示させて、ユーザーに直感操作で日付を選択してもらうことができるようになります。

datepickerの例

HTMLのinput[type="date"]でもカレンダーは表示されますが、ブラウザによって表示のされ方が異なりカスタマイズもできません。

input[type="date"]の例

jQueryUIの機能の一つであるdatepickerを使えば、リッチなデザインでユーザーが使いやすいカレンダーを簡単に導入できます。

jQueryUIはdatepicker以外にもさまざまな機能が少ないコードで使えるようになっており、テーマを切り替えるだけでパーツのデザイン変更も一瞬でできるのでとても便利です。

リンク先のサムネイル
jQueryUIの使い方

jQuery UIとは、jQueryを用いて作られた便利な機能を簡単にサイトに実装することができるライブラリです。具体的には、カレンダーやタブなどの装飾やオートコンプリートなどの機能、フェードインなどのアニメーションが簡単な記述だけで使用することが可能です。【もっと読む】

datepickerの使い方

datepickerはjQueryUIの機能のひとつなので、jQueryUIを読み込ませなければ使用できません。そしてjQueryUIを動作させるためにはjQueryが必要なので、CDNを利用して両方をサイトに読み込ませます。

以下のコードをコピーして、自身のサイトの<head></head>の中などに貼り付けて下さい。

CDN

<jQueryを読み込み>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<jQuery UIを読み込み>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">

記述の方法

datepickerを使いたいフォームの要素に対して以下のように一行記述するだけでカレンダーを表示できます。

datepickerの記述の方法

日付の入力ですが、datepickerを使う要素には「input[type="date"]」ではなく「input[type="text"]」を使用するという点に注意が必要です。

HTML

<input type="text" id="datepicker" placeholder="日付を選択してください">

jQuery

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

プレビュー

datepickerを日本語化する

datepickerはそのままでは日本語表示に対応していません。先程の例のように、月や曜日の表記が英語になっています。このままでも使えないことはないですがユーザビリティを高めるためにも日本語化しておきましょう。

日本語化データのダウンロード

datepickerの日本語化データはGitHubに用意してくれています。下記のページを開いてダウンロードしてください。

GitHubのjQuery UIの翻訳ファイルページ | https://github.com/jquery/jquery-ui/tree/main/ui/i18n

上記のページを開いたら、その中から日本語データであるdatepicker-ja.jsを探して開きます。(アルファベット順に並んでいます。)

datepicker-ja.jsのページを開いたら「Raw」というボタンをクリックします。

新しいページにソースコードが表示されるので、datepicker-ja.jsという名前でファイルに保存してください。(Windowsであれば、ブラウザでページを開いた状態でショートカットキー「Ctrl + s」を押せば名前を付けて保存ができます。)

日本語化データの読み込み

保存したファイルをサーバーにアップロードし、自身のサイトに読み込ませます。

<head></head>のjQueryUIを読み込ませたCDNの後などにアップロードしたファイルパスを指定してdatepicker-ja.js読み込ませてください。

script

<datepickerの日本語化ファイルを読み込み>
<script src="https://自身のサイト/アップロードしたフォルダ/datepicker-ja.js"></script>

datepicker-ja.jsが正しく読み込まれていれば、先程同様の手順でdatepickerを有効化すればカレンダーは自動的に日本語表記に切り替わります。

HTML

<input type="text" id="datepicker" placeholder="日付を選択してください">

jQuery

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

プレビュー

オプションを設定する

datepickerにはオプション項目が用意されており、それらを設定することで用途に応じたカスタマイズが可能です。

datepickerにオプションを設定する場合は次のように記述します。

オプションの書き方 https://jqueryui.com/datepicker/

よく使うオプションを抜粋して説明していきます。

changeYear年をプルダウンで選択できるようにする
changeMonth月をプルダウンで選択できるようにする
firstDay週のはじめの曜日を変更する
minDate選択できる最小の日付を設定する
maxDate選択できる最大の日付を設定する
durationカレンダーを表示する速度を変更する
showAnimカレンダーを表示するときのアニメーションを設定する

年と月をプルダウンで選択できるようにする

changeYear」と「changeMonth」オプションを設定すれば年と月をプルダウンから選択して切り替えることができるようになります。

両方ともデフォルトの値は「false」(無効)になっているので、「true」に変更することでプルダウン選択が可能になります。

HTML

<input type="text" id="datepicker" placeholder="日付を選択してください">

jQuery

$(function(){
    $("#datepicker").datepicker({
        changeYear:true,
        changeMonth:true,
    });
});

プレビュー

週のはじまりの曜日を変更する

デフォルトでは週の始まりは日曜日ですが、「firstDay」オプションで任意の曜日をはじまりに設定することが可能です。

日曜日を「0」として月曜が「1」と続き、土曜日が「7」というように番号が割り振られているので、この番号を使って曜日を指定します。

HTML

<input type="text" id="datepicker" placeholder="日付を選択してください">

jQuery

$(function(){
    $("#datepicker").datepicker({
        firstDay:1,
    });
});

プレビュー

選択できる日を制限する

過去の日付や1年以上先の日付まで選択できる状態なので予約フォームなど使い道によっては不都合が生じる恐れがあります。そうした場合は、オプションを設定して選べる日付を制限しましょう。

過去の日付を選択できないようにする

今日より以前の日付を選べないようにするためには「minDate」オプションを設定します。

値に「new Date()」と記述することで自動的に当日の日付以前を選ぶことができなくなります。

当日ではなく任意の日付を設定したい時は「new Date(2022,3,10)」(2022年3月10日以降の日付が選択可能)というように記述します。

未来の日付の上限を設定する

選べる日付の上限を設定したい場合は「maxDate」オプションを設定します。

値は、「+1y」(1年)「+1m」(1カ月)「+1w」(1週間)「+1d」(1日)という形式で指定します。

次の例では、選択できる範囲を当日から2週間に限定するように設定しました。

HTML

<input type="text" id="datepicker" placeholder="日付を選択してください">

jQuery

$(function(){
    $("#datepicker").datepicker({
        minDate:new Date(),
        maxDate:"+2w",
    });
});

プレビュー

表示のアニメーションと速度を変更する

アニメーションを選択する

showAnim」では、あらかじめ用意されたパターンからカレンダーを表示するときのアニメーションを選択できます。

https://jqueryui.com/effect/

表示速度を変更する

フォームの要素がクリックされてからカレンダーの表示が完了するまでの速度は「duration」で設定します。

durationの値は「slow」(遅い)「normal」(普通)「fast」(早い)の3つから選びます。

デフォルト(未設定)の状態ではnormalが適用されています。

次の例では「fold」という折りたたむようなアニメーションでゆっくりと表示されるように設定してあります。

HTML

<input type="text" id="datepicker" placeholder="日付を選択してください">

jQuery

$(function(){
    $("#datepicker").datepicker({
        showAnim:"fold",
        duration:"slow",
    });
});

プレビュー

まとめ

以上がjQueryUIのdatepickerの使い方です。ほんの少しの記述で本格的なカレンダーフォームが設置できるのでとても便利です。希望日時などの入力が必要なサイトなどに導入してみてはいかがでしょうか?

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]