祝日入力の解説

投稿日：2018/03/13
更新日：2018/03/19

※IEは変数宣言letに対応していない為　letの箇所をvarに変更しました。
※IEはアロー関数に対応していない為 functionの記述に変更しました。
　アロー関数についてはこちら【Education】JavaScriptあれこれ　その2参照。

bizカレンダーの祝日入力の解説
【BS】bizカレンダー祝日入力

(function ($) {
  $.ajax({
    url:  'https://holidays-jp.github.io/api/v1/date.json',
    dataType:'json'
  }).done(data  => {
    var  holidaysJson  =  $(data);
    var  holidays  =  '';
    $.each(holidaysJson[0], function(i, val) {
      holidays  +=  i  +  '\n';
    });
    var  getData  =  $("#temp_holidays").val() +  '\n';
    $('#temp_holidays').val(getData  +  holidays);
    $("form").submit();
  });
})(jQuery);

ゲットホリデイしたいですね。
数行です。

Holidays JP API

https://holidays-jp.github.io/
Google が用意している Googleカレンダーの情報から自動で生成をして
祝日のAPIを用意してくれているようです。今はjsonファイル形式を使用させてもらっていますが
csv形式でも多分できます。

ajax

ブラウザ上でサーバーとHTTP通信を行うことができます。

$.ajax({
  url:  'https://holidays-jp.github.io/api/v1/date.json',
  dataType:'json'
}).done(data  => {
  var  holidaysJson  =  $(data);
});

https://holidays-jp.github.io/api/v1/date.json にあるデータを取得する。
dataに取得したデータが格納されています。 choromeのデベロッパーツール(F12)のconsoleを開いて

(function ($) {
  $.ajax({
    url:  'https://holidays-jp.github.io/api/v1/date.json',
    dataType:'json'
  }).done(data  => {
    var  holidaysJson  =  $(data);
    console.log(holidaysJson);
  });
})(jQuery);

をたたくと

1.  jQuery.fn.init [{…}]
    1.  0:
        1.  2017-01-01:"元日"
        2.  2017-01-02:"元日 振替休日"
        3.  2017-01-09:"成人の日"
        4.  2017-02-11:"建国記念の日"
        5.  2017-03-20:"春分の日"
        6.  2017-04-29:"昭和の日"
        7.  2017-05-03:"憲法記念日"
        8.  2017-05-04:"みどりの日"
        9.  2017-05-05:"こどもの日"
        10.  2017-07-17:"海の日"
        11.  2017-08-11:"山の日"
        12.  2017-09-18:"敬老の日"
        13.  2017-09-23:"秋分の日"
        14.  2017-10-09:"体育の日"
        15.  2017-11-03:"文化の日"
        16.  2017-11-23:"勤労感謝の日"
        17.  2017-12-23:"天皇誕生日"
        18.  2018-01-01:"元日"
        19.  2018-01-08:"成人の日"
        20.  2018-02-11:"建国記念の日"
        21.  2018-02-12:"建国記念の日 振替休日"
        22.  2018-03-21:"春分の日"
        23.  2018-04-29:"昭和の日"
        24.  2018-04-30:"昭和の日 振替休日"
        25.  2018-05-03:"憲法記念日"
        26.  2018-05-04:"みどりの日"
        27.  2018-05-05:"こどもの日"
        28.  2018-07-16:"海の日"
        29.  2018-08-11:"山の日"
        30.  2018-09-17:"敬老の日"
        31.  2018-09-23:"秋分の日"
        32.  2018-09-24:"秋分の日 振替休日"
        33.  2018-10-08:"体育の日"
        34.  2018-11-03:"文化の日"
        35.  2018-11-23:"勤労感謝の日"
        36.  2018-12-23:"天皇誕生日"
        37.  2018-12-24:"天皇誕生日 振替休日"
        38.  2019-01-01:"元日"
        39.  2019-01-14:"成人の日"
        40.  2019-02-11:"建国記念の日"
        41.  2019-03-21:"春分の日"
        42.  2019-04-29:"昭和の日"
-略-

と表示されると思います。このデータをbizカレンダーの臨時休業に入力する用に整形します。

データ整形

bizカレンダーの臨時休業日は

2013-01-02
2013-01-03

の形式で入力します。なので取得したデータをこのような形に整えたいです。以下をconsoleでたたくと

(function ($) {
  $.ajax({
    url:  'https://holidays-jp.github.io/api/v1/date.json',
    dataType:'json'
  }).done(data  => {
    var  holidaysJson  =  $(data);
    $.each(holidaysJson[0], function (i, val) {
      console.log(i);
    });
  });
})(jQuery);

このように表示されると思います。

受け取ったハッシュのキーが日付なのでこちらを使用。

$.each(holidaysJson[0], function(i, val) {
  holidays  +=  i  +  '\n';
});

既に臨時休業日に入力されている値を取得

var  getData  =  $("#temp_holidays").val() +  '\n';

フォームに入力

既に入力されていた値と今回追加したい祝日を入力

$('#temp_holidays').val(getData  +  holidays);

更新ボタンをクリック

$("form").submit();