javascript 日付をtick単位に変換する

作成日 2022.10.17
javascript
javascript

javascriptで、日付をtick単位に変換するサンプルコードを記述してます。

1. 環境
2. 日付をtick単位に変換
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

日付をtick単位に変換

日付をtick単位に変換するには、
1. getTime()を使用してUNIXエポック秒に変換
2. tick数 (10,000)掛け
3. offset値を追加します

function tick(date) {

  const offset = 621355968000000000;

  const tickNum = 10000;

  const ticks = ( date.getTime() * tickNum ) + offset;

  return ticks;
  
}

console.log( tick(new Date('2022-01-01')) );
// 637765920000000000

ちなみに、関数は1行で記述することができます。

const tick = (date) => ( date.getTime() * 10000 ) + 621355968000000000;

サンプルコード

以下は、
「取得」ボタンをクリックすると、フォームから取得した日付をtick単位に変換して表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

三項演算子を使ってif文を1行で書く

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:200px">

    <h2><span id="result" class="badge badge-dark">結果</span></h2>

    <form>
      <div class="form-group">
        <label class="bmd-label-floating">日付</label>
        <input type="date" id="setDate">
      </div>
    </form>

    <button type="button" onclick="toTicks()" class="btn btn-dark mt-1">
      取得
    </button>

  </div>

  <script>    

    const toTicks = () => {

      result.textContent = ( new Date(setDate.value).getTime() * 10000 ) + 621355968000000000;

    }

  </script>
</body>

</html>

変換されていることが確認できます。