はじめに
こんにちは、システム開発チーム「presto」です。
開発業務（プログラミング中）に「こんなツール、あんなツールが身近なところにあったらいいなぁ」と思ったことはありませんか？
ここではそんなツールをVuetifyを使って作ってみたので紹介させてください。
日付変換ツール
今回紹介させていただくのは、日付変換ツールです。
画面は以下の通りです。
使い方
使い方は以下の通りです。
- 時刻を指定する
- ほしいフォーマットの時刻をコピーする
1. 時刻を指定する
指定したタイムゾーンの現在時刻が表示されます。
時刻の指定方法は2通りあります。
- テキストフィールドを直接編集する
- 操作ボタンから編集する
1.1. テキストフィールドを直接編集する
テキストフィールドを直接編集する場合は、所定のフォーマット「YYYY-MM-DD HH:mm:ss」に則って入力します。
以下の画像のように、時刻で表せない数字などもNGです。
入力した時刻がフォーマットに則っていないと、画面の下にエラーメッセージが表示されます。
1.2. 操作ボタンから編集する
操作ボタンから編集する場合は、テキストフィールドの時刻からの相対的な時刻を表示します。
時刻を操作するには上部のボタンを操作してください。
日付を操作するには下部のボタンを操作してください。
2. ほしいフォーマットの時刻をコピーする
デフォルトで用意しているフォーマットは以下の通りです。
これらのテキストフィールドをクリックすることでコピーすることができます。
| フォーマット形式 |
|---|
| ISO 8601 形式 |
| スラッシュ区切り |
| スラッシュ区切り (日付のみ) |
| 区切りなし |
| 区切りなし (日付のみ) |
| UnixTime (ミリ秒) |
| ロケールに合わせた形式 |
| フォーマット指定 |
ロケールに合わせた形式では、「ja（日本）」と「en（米国）」のロケールで標準とされるフォーマットに変換します。
フォーマット指定では、任意のフォーマットを指定することで、時刻をそのフォーマットに則った形式で表示します。
使用可能なフォーマットは、moment.jsのフォーマットに対応しています。
format Moment.js | Docs
まとめ
今回は、日付変換ツールの紹介をさせていただきました。
画像Base64変換ツールの紹介もしていますので、良ければ合わせてご覧ください。
今後もよろしくお願いします。
ありがとうございましたー！