Javascript memo

Date Modified Tags javascript / memo

Javascript関連のメモ

元号を含んだ日時を表示（令和に対応）。ついでに月末表示

const date = new Date(2020, 5, 0);//日付の引数に0を入れることで月末
//月は0-11で指定するので、「実際の月-1」で指定することになる。
var formatted_date = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era: 'long'}).format(date);
console.log(formatted_date);

で「令和2年5月31日」と表示される。 ただし、ブラウザのバージョンによっては表示されないので、注意が必要。ブラウザに関わらず表示したい場合に使う手段ではない。

参考：JavaScriptが令和に対応。Intl.DateTimeFormatで日付を和暦(元号)表記に変換する

HighChartで日本時間をx軸に利用

チャートを表示するライブラリにHighChartってのを使ってるけど、横軸の時間がUTCになってしまうので、ちょっとはまった。

こうすればいいらしい

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});
var chart = new HighChart(...);

グローバルな設定として使うらしい。 参考（ほぼそのまま）mtcdotcom's blog

HighChartでチャートをクリックするとUncaught TypeError: undefined is not a functionが出る

Chromeでのみ確認。Google翻訳の拡張機能を切ればおk

参考：javascript - highcharts always console error ablout bubble_compiled.js? - Stack Overflow

bootstrap3のタブ変更時に何か実行したい

タブの中身を表示する時に何か実行させたい時は次のようにすればおk

<ul class="nav nav-tabs">
 <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
 <li ><a href="#tab2" data-toggle="tab">Tab2</a></li>
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="tab1">
   Tab1 content
 </div>
 <div class="tab-pane" id="tab2">
   Tab2 content
 </div>
</div>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
    ...
});
</script>

shown.bs.tabってイベントがあるらしい。

参考：Bootstrap 3 jquery event for active tab change - Stack Overflow