1. kanuu

    No comment

    kanuu
Changes in body
Source | HTML | Preview
@@ -1,10 +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部分。どうやら、下記のような形でかけばよいらしす。
+
+```
+<% 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>
+```
+
+![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)
+
+下記のようにコードを変更する。はい。うまく年月日が入った表示に切り替わりました。
+
+```
+<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)
#参考資料
-![Screen Shot 2017-06-08 at 15.36.13.png](https://qiita-image-store.s3.amazonaws.com/0/167850/b0c7e806-ca47-789f-1d97-4bf35427c9e6.png)
[日付データをフォーマット(strftime)](http://railsdoc.com/references/strftime)
[JavaScript の Date は罠が多すぎる](http://qiita.com/labocho/items/5fbaa0491b67221419b4)