概要
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>
