エンジニアの将来って?

現在6年目の元COBOL現Javaエンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

jQuery UIのDatepickerでカレンダーアイコンからカレンダーを表示させる

こんにちは、たいらです。

JavaScriptjQuery UIのDatepickerのアウトプットです。
今回作ったのはカレンダーアイコンを押すとカレンダーが表示されて、ある日付を指定するとテキストボックスに出力されます。
ついでに、追加ボタンも作って、カレンダーのテキストボックスも追加するようにしました。

 

フォルダ構成

f:id:Tairax:20170911115337p:plain

HTML

 <!DOCTYPE html>
<html>
    <head>
        <title>DatePicker練習</title>
        <meta charset="UTF-8" />
<!-- jQueryJavascript ファイル -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- jQuery UI の Javascript ファイル -->
        <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- jQuery UI のスタイルシートファイル -->
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- 日本語化用ファイル -->
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
        <script type="text/javascript" src="../js/calendar01.js"></script>
    </head>
    <body>
        <table id="calendarTable">
            <tr>
                <td>
                    <input type="text" id="calendar0">
                </td>
                <td>
                    <button onclick="addCalendar()">追加</button>
                </td>
            </tr>
        </table>
    </body>
</html>

 

JavaScript

jQuery(function($) {
    $("#calendar0").datepicker({
// カレンダーアイコン
        buttonImage: "../img/calendar.png",
// カレンダーアイコンが表示されなかったときのテキスト
        buttonText: "カレンダーアイコンの代わり",
// ボタン画像を指定された画像だけを表示する
        buttonImageOnly: true,
// DatePickerが表示されるイベント
        showOn: "both"
    });
} )

 

/**
* 追加ボタンを押下するとカレンダー行を追加する関数
* @returns
*/
function addCalendar() {
    var calendarTable = document.getElementById("calendarTable");

    if (!calendarTable) {
        return;
    }

// 現在のテーブルの行をカウント
    var count = calendarTable.rows.length;

// 新規に行とその中のセルを追加
    var tableRow = calendarTable.insertRow(count);
    var rowCell1 = tableRow.insertCell(0);
    var rowCell2 = tableRow.insertCell(1);

// セルにHTMLをセット
    rowCell1.innerHTML = '<input type="text" id=calendar' + count + '>';
    rowCell2.innerHTML = '<button onclick="addCalendar()">追加</button>';

// DatePickerをセット
    jQuery(function($) {
        $("#calendar" + count).datepicker({
// カレンダーアイコン
            buttonImage: "../img/calendar.png",
// カレンダーアイコンが表示されなかったときのテキスト
            buttonText: "カレンダーアイコンの代わり",
// ボタン画像を指定された画像だけを表示する
            buttonImageOnly: true,
// DatePickerが表示されるイベント
            showOn: "both"
        });
    })
}

 

最初の 画面はこんな感じです。

f:id:Tairax:20170911133032p:plain

アイコンを押すとカレンダーが表示されます。

f:id:Tairax:20170911133146p:plain

ある日にちを選択するとテキストボックスに出力されます。

f:id:Tairax:20170911134237p:plain

追加ボタンを押すとテキストボックスが増えます。

f:id:Tairax:20170911134459p:plain

もちろん追加した行でもカレンダーを表示させることが出来ます。

f:id:Tairax:20170911134621p:plain

f:id:Tairax:20170911134738p:plain

追加した行に対してDatepickerを紐付けるのが難しかった。。。
私が思いついたやり方は、まず追加ボタンを押したときに今のtableの行数調べます。
次に"calendar"と行数を足した文字列をidとして行を追加します。

 

参考にさせて頂いたサイト様

カレンダーアイコンを利用して jQuery UI の Datepicker のカレンダーを呼び出す方法

jQuery UI: DatePickerウィジェットで日付選択ボックスを作成するには? - Build Insider

 

カレンダーアイコンを頂いたサイト様

カレンダーのフリーアイコン2 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト