日付の表示方法メモ

#概要
JSとRailsで時間表示がうまくなかったので、そこの修正をおこなう。

#メモ

###変更したい点

• 表示時間に年月を加えたい。（画面上部の時間表示）
  Javascriptで書かれているので、JSでの変更
• 出勤時間、退勤時間を時間だけの表示に変更したい。
  Railsで書かれているので、Railsの修正

まずはrails部分。どうやら、下記のような形でかけばよいらしす。

<% time = Time.now # Thu Dec 24 00:00:00 +0900 2011  %>
<%= time.strftime('%Y年%m月%d日 %H:%M:%S') %>

下記のコードを変更してみる。

ユーザーID：<%= r.user_id %><br>
出勤時間：<% if r.timein.present? %><%= r.timein %><% else %>まだ出勤打刻してないよ<% end %><br>
退社時間：<% if r.timeout.present? %><%= r.timeout %><% else %>まだ退勤打刻してないよ<% end %><br>

変更後はこちら。ただ単に後ろに記述を書いただけ。

ユーザーID：<%= r.user_id %><br>
出勤時間：<% if r.timein.present? %><%= r.timein.strftime('%H:%M:%S') %><% else %>まだ出勤打刻してないよ<% end %><br>
退社時間：<% if r.timeout.present? %><%= r.timeout.strftime('%H:%M:%S') %><% else %>まだ退勤打刻してないよ<% end %><br>

時間だけがちゃんと表示されるようになる。

<script type="text/javascript">
var testtoday = new Date();
var thisYear = set2fig( testtoday.getFullYear() );
var thisMonth = set2fig( testtoday.getMonth() );
var today = set2fig( testtoday.getDate() );
console.log(thisYear);
console.log(thisMonth);
console.log(today);
</script>

次はJSの部分を直してみる。調べてみると、JSのDate()はすこし癖があるらしい。下記を書いてconsole.logで確認してみた。年月日がとれている。これを元にJSを変更する。

下記のようにコードを変更する。はい。うまく年月日が入った表示に切り替わりました。

<p id="RealtimeClockArea2"></p>
<script type="text/javascript">
function set2fig(num) {
   // 桁数が1桁だったら先頭に0を加えて2桁に調整する
   var ret;
   if( num < 10 ) { ret = "0" + num; }
   else { ret = num; }
   return ret;
}
function showClock2() {
   var nowTime = new Date();
   var thisYear = set2fig( nowTime.getFullYear() );
   var thisMonth = set2fig( nowTime.getMonth() );
   var today = set2fig( nowTime.getDate() );
   var nowHour = set2fig( nowTime.getHours() );
   var nowMin = set2fig( nowTime.getMinutes() );
   var nowSec = set2fig( nowTime.getSeconds() );
   var msg = thisYear + "年" + thisMonth + "月" + today + "日" + nowHour + ":" + nowMin + ":" + nowSec;
   document.getElementById("RealtimeClockArea2").innerHTML = msg;
}
setInterval('showClock2()',1000);
</script>

#参考資料

日付データをフォーマット(strftime)
JavaScript の Date は罠が多すぎる