Posted on

Googleカレンダーみたいに開始時刻からの経過時間を日本語で出したい

 システムでイベントの開始時刻と終了時刻を入力する欄が必要な時、開始時刻がインプットされていれば終了時刻を選択する際には開始時刻からの経過時間が表示されていると、ユーザさんにとって分かりやすいですよね(^^)

たとえばこんな感じです↓

開始時刻: - 終了時刻:

これはtimepickerというJQueryのプラグインを使用しています。

Timepicker for JQuery

しかし、元のファイルのままでは、

時間の表示が英語のままで、日本語で表示できません

そこでjquery.timepicker.jsの中身を以下のように少しだけいじりました↓

function _int2duration(seconds)
{
var minutes = Math.round(seconds/60);
if (minutes < 60) {
//			return minutes+' mins'
return minutes+'分'
} else if (minutes == 60) {
//			return '1 hr';
return '1時間';
} else {
var hours = minutes/60
//			return hours.toFixed(1)+' hrs';
return hours.toFixed(1)+'時間';
}
};

_int2durationという関数の中で開始時刻からの経過時間を表示しているので、そこの表記を英語から日本語に直し、UTF-8でファイルを保存しました。
環境によってプルダウンのWidthを上書きしてやる必要もあるかもしれません。

あ、あとJQueryのライブラリももちろん必要ですのでお忘れなく☆