1. alt
Changes in body
Source | HTML | Preview
@@ -1,91 +1,91 @@
#概要
JSとRailsで時間表示がうまくなかったので、そこの修正をおこなう。
#メモ
![80701be3-76ae-037a-12cf-84c6d60cac3e.png](https://qiita-image-store.s3.amazonaws.com/0/167850/5fd9cd80-5319-5a60-0c9b-b1eae8400441.png)
###変更したい点
- 表示時間に年月を加えたい。(画面上部の時間表示)
Javascriptで書かれているので、JSでの変更
- 出勤時間、退勤時間を時間だけの表示に変更したい。
Railsで書かれているので、Railsの修正
まずはrails部分。どうやら、下記のような形でかけばよいらしす。
-```
+```html+erb
<% time = Time.now # Thu Dec 24 00:00:00 +0900 2011 %>
<%= time.strftime('%Y年%m月%d日 %H:%M:%S') %>
```
下記のコードを変更してみる。
-```
+```html+erb
ユーザーID:<%= r.user_id %><br>
出勤時間:<% if r.timein.present? %><%= r.timein %><% else %>まだ出勤打刻してないよ<% end %><br>
退社時間:<% if r.timeout.present? %><%= r.timeout %><% else %>まだ退勤打刻してないよ<% end %><br>
```
変更後はこちら。ただ単に後ろに記述を書いただけ。
-```
+```html+erb
ユーザー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>
```
時間だけがちゃんと表示されるようになる。
-```
+```html
<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>
```
![Screen Shot 2017-06-08 at 15.44.24.png](https://qiita-image-store.s3.amazonaws.com/0/167850/7bf70bc5-309d-2063-37d0-a1871de5b5d6.png)
次はJSの部分を直してみる。調べてみると、JSのDate()はすこし癖があるらしい。下記を書いてconsole.logで確認してみた。年月日がとれている。これを元にJSを変更する。
![Screen Shot 2017-06-08 at 15.48.59.png](https://qiita-image-store.s3.amazonaws.com/0/167850/e3005c82-558e-b28a-06d1-cf1a29d616f0.png)
下記のようにコードを変更する。はい。うまく年月日が入った表示に切り替わりました。
-```
+```html
<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>
```
![Screen Shot 2017-06-08 at 15.58.19.png](https://qiita-image-store.s3.amazonaws.com/0/167850/7654625c-062c-f80f-ae4e-ca9d1374a55c.png)
#参考資料
[日付データをフォーマット(strftime)](http://railsdoc.com/references/strftime)
[JavaScript の Date は罠が多すぎる](http://qiita.com/labocho/items/5fbaa0491b67221419b4)