Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@kanuu

日付の表示方法メモ

More than 3 years have passed since last update.

概要

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

メモ

80701be3-76ae-037a-12cf-84c6d60cac3e.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

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

Screen Shot 2017-06-08 at 15.48.59.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

参考資料

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

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kanuu
かぬです。技術のことをメモしたりします。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?