投稿日:2018/03/13
更新日:2018/03/19
※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);
このように表示されると思います。
2017-01-01
2017-01-02
2017-01-09
2017-02-11
2017-03-20
2017-04-29
2017-05-03
受け取ったハッシュのキーが日付なのでこちらを使用。
$.each(holidaysJson[0], function(i, val) {
holidays += i + '\n';
});
既に臨時休業日に入力されている値を取得
var getData = $("#temp_holidays").val() + '\n';
フォームに入力
既に入力されていた値と今回追加したい祝日を入力
$('#temp_holidays').val(getData + holidays);
更新ボタンをクリック
$("form").submit();