WebDesigner's Memorandumウェブデザイナーの備忘録

Dashの時間と日付のフォーマット設定方法

Dashでスニペット内に「@time」や「@date」と入力しておくと、ペースト時に自動で時間や日付に変換してくれます。

しかし、時間はデフォルトのままでいいのですが、日付が「Apr 1, 2021」のようなフォーマットで入力されるので、日本人向きではありません。
このフォーマットは設定で変更できるので、使いやすいフォーマットに変更しておきましょう。

フォーマットの変更場所

フォーマットの変更場所は、Dashの環境設定の[Sunippets]タブ内の「Special placeholders」です。
「@time format」が「@time」、「@date format」が「@date」になります。

Dash環境設定の[Sunippets]タブ内の「Special placeholders」

ちなみにですが、「@time」にもフォーマットを指定すれば日付は入れられますし、逆に「@date」に時間を入れることも可能です。

人によっては「時間だけ入力することはないから、@dateで日本語、@timeでスラッシュ区切りの日時を入力できるようにする」みたいな使い方もできます。

ただ、この設定はスニペット上で使用している全ての@time、@dateに影響してしまうので、最初に設定したあとはあまり触らないようにしておいた方が無難でしょう。

フォーマットのサンプル

汎用的に使うことと、2つしか設定できないことを考えると、ある程度フォーマットは絞られてきます。

下記でフォーマットのサンプルを用意したので、コピペして使用ください。

入力出力備考
yyyy年M月d日2021年4月1日 
yyyy/M/d2021/4/1 
yyyyMMdd20210401タイムスタンプとして使用
H時m分19時5分 
HH:mm19:05 
HHmm1905タイムスタンプとして使用
yyyyMMdd_HHmm20210401_1905タイムスタンプとして使用

これ以外のフォーマットを指定したい方は、この先に記述方法をまとめておいたので、それを見ながら指定してください。

フォーマットの記述

DashのフォーマットはUnicode Date Format Patternsが適用されています。
残念なことに曜日を「日」「月」「火」…のように日本語で表記はしてくれないので注意が必要です。

入力出力備考
y20214桁で年が表示される
yy212桁で年が表示される
yyy2021 
yyyy2021 

入力出力備考
M41桁で月が表示される(10・11・12月は2桁)
MM042桁で月が表示される
MMMApr英語で3文字が表示される
MMMMApril英語で表示される
MMMMMA英語の頭文字が表示される

入力出力備考
d1日付が表示される(1桁は1桁のまま表示)
dd012桁で日付が表示される

曜日

入力出力備考
e1日曜日を「1」としたときの曜日の番号が表示される
ee012桁で曜日の番号が表示される
eeeSun英語で3文字が表示される
eeeeSunday英語で表示される

時間

入力出力備考
h712時間表記で時間が表示(1桁は1桁のまま表示)
hh0712時間表記で時間が表示
H1924時間表記で時間が表示(1桁は1桁のまま表示)
HH1924時間表記で時間が表示

入力出力備考
m5分が表示(1桁は1桁のまま表示)
mm05分が表示

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね