勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

   2024/04/15  jQuery JavaScript

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際は大体jQueryプラグインのDateTimePickerというものを利用していた。ただ、今回は機能的な問題でjQuery UIのDatepickerを利用することになったので使い方をメモ。

 

リファレンス

https://js.studio-kingdom.com/jqueryui/widgets/datepicker

 

CDN呼び出し

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

 

各種ソース&サンプル

オプション無しの基本的な呼び出し方

ソースコード

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

サンプル

https://taitan916.info/sample/jquery-ui-datepicker/

 

年月日のフォーマットを指定の上で、本日~30日後まで選択可能

ソースコード

$("#date").datepicker({
    minDate: 0, //最小は本日まで
    maxDate: 30, //最大は30日後まで
    dateFormat: 'yy/mm/dd', //年月日のフォーマット
});

minDateやmaxDateは日付指定も可能。

サンプル

https://taitan916.info/sample/jquery-ui-datepicker/index2.php

 

特定の日にClass付与&選択不可

ソースコード

//特定の日指定
var sample_holiday = ['2021-06-23', '2021-07-01']

$("#date").datepicker({
    minDate: 0, //最小は本日まで
    maxDate: 30, //最大は30日後まで
    dateFormat: 'yy-mm-dd', //年月日のフォーマット
    beforeShowDay: function(date) {

        //特定の日にClass付与&選択不可
        for (var i = 0; i < sample_holiday.length; i++) {
            var holiday = new Date(Date.parse(sample_holiday[i]));
            if (holiday.getYear() == date.getYear() &&
                holiday.getMonth() == date.getMonth() &&
                holiday.getDate() == date.getDate()) {
                return [false, 'sample_holiday', null];
            }
        }

        return [true, 'day-weekday', null];
    },
});

特定の日付にClassを付与するオプションというのがjQueryプラグインのDateTimePickerには無かった為、今回jQuery UIを利用している。

[false, 'sample_holiday', null]

上記の第1引数部分でカレンダーの選択可否を設定、第2引数でClass名を指定できる。

サンプル

https://taitan916.info/sample/jquery-ui-datepicker/index3.php

 

所感

jQueryプラグインのDateTimePickerで困った時にGoogle検索するとjQuery UI版の情報がヒットすることが多い。これを機にjQuery UI版にのりかえるのもありかと思った。

 - jQuery JavaScript

  関連記事

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...