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年から専門学校でデザインを学び、卒業後は神戸の制作会社でWeb制作に従事しています。Webrandumは2016年から運営し、ウェブデザイン、フロントエンド開発、WordPress、CSS、JavaScript、制作環境の効率化を中心に、実際に試した内容を執筆しています。

Twitterをフォロー Facebookでいいね