読者です 読者をやめる 読者になる 読者になる

気になるガジェット

気になるガジェットについて簡単にまとめたメモブログです

コピペで出来るjQueryでUnixtimeのフォーマット変換方法

f:id:the_beatles:20170120185035p:plain:w1000

仕事でメンテしているシステムの作りが古いため、日付や時間等をUnixtimeに変換してデータベースに保存しています。

このデータはいつのだろうか?と思って日付を見ても、Unixtimeのため、ぱっと見わかりません。

そのため、いちいち変換するのも面倒だなと思っていたため、変換プログラムをHTML + jQueryで書いてみました。

jQuery本体は、何処かのCDNからリンクすれば良いと思われます。

  • jQuery本体のCDN記述サンプル
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head></html>
入門Unixオペレーティングシステム
ジェリー ピーク ジョン ストラング グレース トディノ
オライリージャパン
売り上げランキング: 544,975


Unixtimeを標準フォーマットに変更

基本的には以下のHTMLを<body>タグ内に、jQuery<script>タグ内に記述すれば動作すると思います。

HTML

buttonをクリックすると、sapnのdemo1に変換後の日付と時間を表示させます。

<div class="unix">
  <input class="unix" type="text" name="utime">
  <button class="btn1">変換</button>
  <span class="demo1"></span>
</div>

jQuery

初期表示用のUnixtimeは秒までです。

変換後の日付や時間は、ゼロパディングして表示させます。

$(function() {
  // 初期表示用unixtime取得
  $('.unix').val(Math.floor(date.getTime() / 1000));

  // unixtimeを日付と時間形式に変換するボタンClickアクション
  $( '.btn1' ).click(function(e) {
    // 画面から設定してあるunixtimeを取得
    var unix = $( '.unix' ).val();
    var date = new Date( unix * 1000 );

    // demo1に変換後の日付と時間を設定する
    $('.demo1').text(
      '%year年%month月%day日 %hour時%min分%sec秒'
        .replace( '%year',  date.getFullYear() )
        .replace( '%month', ( '00' + date.getMonth() + 1 ).slice( -2 ) )
        .replace( '%day',   ( '00' + date.getDate()    ).slice( -2 ) )
        .replace( '%hour',  ( '00' + date.getHours()   ).slice( -2 ) )
        .replace( '%min',   ( '00' + date.getMinutes()   ).slice( -2 ) )
        .replace( '%sec',   ( '00' + date.getSeconds()   ).slice( -2 ) )
    );
  });
});

日付と時間形式をUnixtimeに変換

こちらも基本的には同じですが、初期表示用の<select>タグ内の<option>タグをそのまま羅列するのも面倒なため、jQueryで生成してあります。

HTML

<select>タグ内が空になっていますが、ブラウザで表示させた時にjQueryが実行され、例えば月の場合は1月から12月までの<option>タグが追加されます。

<div class="local">
  <input class="year" type="text" name="year" size="4" maxlength="4"><select class="month"></select><select class="day"></select><select class="hour"></select><select class="min"></select><select class="sec"></select><button class="btn2">変換</button>
  <span class="demo2"></span>
</div>

jQuery

eachでループさせて<option>タグを必要数分生成しております。

また、こちらについても、日付と時間はゼロパディングしてあります。

$(function() {
  // 1月から12月のoption設定    
    $.each(new Array(12),function(i) {
      $( '.month' ).append( '<option value=\"%s\">%s</option>'.replace( /%s/g, ( '00' + ( i + 1 ) ).slice(-2) ) );
    });

  // 1日から31日のoption設定    
    $.each(new Array(31),function(i) {
      $( '.day'   ).append( '<option value=\"%s\">%s</option>'.replace( /%s/g, ( '00' + ( i + 1 ) ).slice(-2) ) );
    });

  // 0時から23時のoption設定    
    $.each(new Array(24),function(i) {
      $( '.hour'  ).append( '<option value=\"%s\">%s</option>'.replace( /%s/g, ( '00' + i ).slice(-2) ) );
    });

  // 0分から59分のoption設定    
    $.each(new Array(60),function(i) {
      $( '.min'   ).append( '<option value=\"%s\">%s</option>'.replace( /%s/g, ( '00' + i ).slice(-2) ) );
    });

  // 0秒から59秒のoption設定    
    $.each(new Array(60),function(i) {
      $( '.sec'   ).append( '<option value=\"%s\">%s</option>'.replace( /%s/g, ( '00' + i ).slice(-2) ) );
    });

  // 初期表示用現在時刻取得(ゼロパディング)
  var date = new Date();
  $( '.year'  ).val( date.getFullYear() );
  $( '.month' ).val( ( '00' + date.getMonth() + 1 ).slice(-2) );
  $( '.day'   ).val( ( '00' + date.getDate()    ).slice(-2) );
  $( '.hour'  ).val( ( '00' + date.getHours()   ).slice(-2) );
  $( '.min'   ).val( ( '00' + date.getMinutes()   ).slice(-2) );
  $( '.sec'   ).val( ( '00' + date.getSeconds()   ).slice(-2) );

  // 日付と時間をunixtime形式に変換するボタンClickアクション
  $( '.btn2' ).click(function(e) {

    // 画面から設定してある日付と時間を取得      
    var date = new Date(
        '%year/%month/%day %hour:%min:%sec'
          .replace( '%year',   $( '.year'  ).val() )
          .replace( '%month',  $( '.month' ).val() )
          .replace( '%day',  $( '.day'   ).val() )
          .replace( '%hour',   $( '.hour'  ).val() )
          .replace( '%min',  $( '.min'   ).val() )
          .replace( '%sec',  $( '.sec'   ).val() )
    );

    // demo2にunixtimeを設定する
    $( '.demo2' ).text( date.getTime() / 1000 );
  });    
});