日付の形式を自由に変更したい
Handlebarsで日付の表示形式を指定したくてヘルパー関数を自作。以下のコードをhandlebars.jsの本体を読み込んだ後に記述。
/**
* Handlebars Helper Date Format
* @param {string} datetime - Date format string.
* @param {string} connect - Date connection string.
* @return {string}
*/
Handlebars.registerHelper("formatDate", (datetime, connect) => {
let date = new Date(datetime.replace(/-/g,"/"));
return date.getFullYear() + connect + String(date.getMonth() + 1).padStart(2, "0") + connect + String(date.getDate()).padStart(2, "0");
});
引数datetimeは日付形式のデータを受け取る。引数connectは日付の年月日の区切り文字を受け取る（ハイフンとドットつなぎの2パターンあったので）これを日付クラスに渡してインスタンス生成。この際に日付の形式がハイフンつなぎだった場合、Safariで日付形式と認識してくれずnullが返ってきたのでハイフンをスラッシュに変換してからインスタンスを生成しています。
これで準備完了。
Handlebarsのテンプレート側での使用方法
テンプレート側で以下のように使用します。
{{formatDate "2020-6-19" "."}}
{{ヘルパー関数名 引数1 引数2}}という形式で実装。 ハイフンつなぎの日付データをゼロパディングしてピリオド区切りに表示を変えたい。これが表示されると……
2020.06.19
できた！＼(^O^)／Helper関数便利～。
参考サイト
- Block Helper | Handlebars
- https://handlebarsjs.com/guide/block-helpers.html#simple-iterators
The post Handlebarsで日付のフォーマットを自由に設定できるヘルパー関数（自作） first appeared on てらこや.work.