QooQ 記事一覧 の 最終更新日付 表示方法３ （ 日付の日本語表示対応 サンプル ）toLocaleDateString()！
前回の続きで、今回は「 日付の日本語表示対応 サンプル」となります！
既に利用しているJavaScriptメソッド toLocaleDateString() のみで、どこまで対処できるのか？
前回までは ロケールを指定せずに利用していたため、「使用する機器のロケール」に合わせて「短い形式の日付」が表示されています。
"日本語"、"韓国語”、"米国"、"英国" などの各国向けのロケールがあり、"米国" だと 「月 日 年」、"英国" だと 「日 月 年」、日本や韓国は 「年 月 日」 の順で、区切り文字も スラッシュ ハイフン など異なります。
もともと、toLocaleDateString() は ロケールに合わせた日付表示の文字列を返す Dateオブジェクトのメソッドですので...
導入される場合、テーマのバックアップも忘れずに！
toLocaleDateString() メソッドのみで、下のような 和暦日付（邦歴日付）表示も可能！
Font Awesome 未使用 テーマの編集
別ページ になりました！ （末尾の「関連記事」参照）
Font Awesome 対応 テーマの編集
別ページ になりました！ （末尾の「関連記事」参照）
日付の日本語表示対応 サンプル
toLocaleDateString() メソッドのみでの対応
<article class='list-item'>
<b:if cond='data:post.timestampISO8601'> <!-- 20210520 Edit Start -->
<script type='text/javascript'>
var pub_date2 = new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date2 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<div class='list-item-img-box'>
<a expr:href='data:post.url'>
<img class='list-item-img' expr:src='data:post.thumbnailUrl'/>
</a>
</div>
</b:if>
<div class='list-item-inner'>
<!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> -->
<p class='list-item-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if(pub_date2 == up_date2){
// 日付が同じときは出力しない
}
else{
var updated_dd = ""+ up_date2 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210520 Edit end -->
<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<p class='list-item-category'>
<b:loop values='data:post.labels' var='label'>
「 pub_date2 」で検索すると、上記ソースコードの5行目が選択されるはずです。
今回は、4〜7行目の4行を修正します！
<script type='text/javascript'>
var pub_date2 =
new Date("<data:post.timestampISO8601/>").toLocaleDateString();
var up_date2 =
new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString();
</script>
太字の2箇所が今まで説明してきたメソッドで、カッコの中が空（から）なのが判るでしょうか？ その左側で「 iso8601形式の "投稿日" あるいは "最終更新日" 」の文字列からそれぞれ、Dateオブジェクトを生成しています。
そのため、「ロケール未指定」となり、パソコンやスマホに既に設定されている各国の「ロケール」に基づいて、日付や時間、通貨記号、温度等が表示されます。 いわゆるデフォルト表示というやつです。 購入直後の「国（言語）」設定で「ロケール」が決まり、パソコンは環境設定からロケールを簡単に変更できます。（スマホはやったことないので、よく分かりません）
なので、外国の方が自分のサイトに訪れた場合、その国の一般的な表記で「短い形式の日付」が表示されます！ もしもあなたのサイトが外国から頻繁にアクセスされるのであれば、現状のままが良いかと...
（話がちょっとそれました） まあ、そんな方はほとんどいないと思いますので、以下に「ロケール指定」表示への変更方法を示します！
<script type='text/javascript'>
var date_options2 = {
year : "numeric", //年の形式 この行削除で、年を非表示
month : "long", //月の形式
day : "numeric", //日の形式
weekday : "short" //曜日 この行削除で、曜日を非表示
};
var pub_date2 = new Date("<data:post.timestampISO8601/>").toLocaleDateString("ja-jp", date_options2);
var up_date2 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString("ja-jp", date_options2);
</script>
上記のように変更すると、「 2021/5/21 」が「 2021年5月21日(金) 」に！ メソッドのみで ほとんどの人は満足できるかと...
ちなみに weekday の "short" を "long" に変更するだけで「 2021年5月21日 金曜日 」と表示。 筆者は小さなスマホでも１行で表示できるよう、最初の設定に落ち着きました。
そのため、更新日付部分のカッコを無くすなど 表示部分のHTMLも若干の変更を加えました。 以下に、そのコードも載せておきますので、5行目の部分を置換してください！’
<div class='list-item-inner'>
<!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> --> <!-- 20210504 Change by Ataruchi for 最終更新日 -->
<p class='list-item-date'> ✏️ <script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>　🔄 <script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', up_date2);</script></p>
<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
toLocaleDateString() の最初の引数 "ja-jp" が日本用のロケール指定で、２つ目の引数がそのオプションとなります！
以下のサイトで、日付表示を確認しながら 指定できるオプション文字列がわかりますので、いろいろ試してみてくださいね。 それでも満足できない人のみ、「オリジナルのJavaScriptコード」となります。
古いブラウザでなければ、"ja-jp" の代わりに "ja-JP-u-ca-japanese" を指定すると、「 令和3年5月21日(金) 」や「 令和3年5月21日 金曜日 」の和暦表示も可能！
オリジナルの JavaScript コード対応 （サンプル）
【2021/11/30追記】コメントに詳細を書きましたが、以下のような長いコードを書かなくても toLocaleDateString() メソッドのみで実現可能なことが判明！
最終的に表示させたい日付文字列を、投稿日は pub_date2 、最終更新日は up_date2 に格納していただければ...
サンプルとして、既に オリジナルの JavaScriptコード（同一日付なら、最終更新日を非表示）が存在する Font Awesome 利用時のコード を改良します。
toLocaleDateString() メソッドで対応できない「 yyyy/mm/dd 」日付形式表示の対応コード！
区切り文字は スラッシュを使用しているが、コンカチネート時 好きな文字に変更して頂ければ...
3〜25行目までを今回は変更。 それ以降はコード表示位置を変えた（インデント調整）のみで、実質コードは変更してません。
「月」と「日」を常に2桁表示させるため、「先頭に 0 を足してから末尾2桁のみ取得」しています。
ちょっとだけコードを解説！ document.currentscript.parentnode で現在実行中の親要素（つまり、pタグ）にHTML要素を追加。 Element.insertAdjacentHTML で追加する詳細位置は、4種類中の "beforeend" を利用して document.write() を代用。 ほかにも Element.insertAdjacentTEXT もあって、用途に合わせて使えそう。 細かくCSS修飾したい場合（idを付加するため）、Element内のコンテンツをまるっと書き換えるだけの innerHTML を利用すれば良いと認識。
<b:if cond='data:post.timestampISO8601'>
<script type='text/javascript'> <!-- 20210522 Edit Start -->
// JavaScript を2つに分割しないと 同期しないようだ かつ [CDATA[ も外した！
var published = new Date("<data:post.timestampISO8601/>");
var updated = new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script type='text/javascript'>
// <![CDATA[
// [ yyyy/mm/dd ] 形式表示のため、 パース後 コンカチ
// 投稿日 パース
var pp_Y = ""+published.getFullYear();
var pp_M = ("0"+(published.getMonth()+1)).slice(-2);
var pp_D = ("0"+published.getDate()).slice(-2);
// 最終更新日 パース
var dd_Y = ""+updated.getFullYear();
var dd_M = ("0"+(updated.getMonth()+1)).slice(-2);
var dd_D = ("0"+updated.getDate()).slice(-2);
// コンカチネート
var pub_date2 = ""+ pp_Y+"/"+pp_M+"/"+pp_D+"";
var up_date2 = ""+ dd_Y+"/"+dd_M+"/"+dd_D+"";
//]]>
</script>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")'/>
</a>
</b:if>
<div class='list-item-inner'>
<!-- <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p> -->
<p class='list-item-date'>
<i aria-hidden='true' class='fas fa-edit' style='margin-right:0.3em'/>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', pub_date2);</script>
<!-- 更新マーク -->
<i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
<!-- 最終更新日 -->
<span class='updated post-timestamp' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601' id='last-modified' itemprop='dateModified' style='margin-left:0.5em;'/>
</p>
<!-- 最終更新日 -->
<script type='text/javascript'>
// <![CDATA[
if (pub_date2 == up_date2) {
// 日付が同じときは出力しない
}
else {
var updated_dd = ""+ up_date2 +"";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script> <!-- 20210522 Edit end -->
2021/11/30 【改良版】関数化したJavaScriptを 以下に記載！（見易く、メンテが簡単）
複数の箇所から呼び出し可能にするため、関数は必ず </head> 直前に追加！
QooQカスタマイズはきちんと関数化していないサンプルが多いようですが、
今回は きっちり 関数化しました！
デフォルトのパラメータ指定だと、2021年5月21日(金) フォーマットで表示！
（iso8601日付フォーマットでなくても、中身が 2021/11/28 や 2021-11-28 フォーマットなら利用可能）
==== QooQ 記事本文 関数の呼び出しサンプル =======
<p id='single-header-date'>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', convDateFormat2('<data:post.timestampISO8601/>', '<data:post.lastUpdatedISO8601/>'));</script>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments > 0'>
<a alt='comment-link1' expr:title='data:post.commentLabelFull' href='#comments'>
<b> 💬 <data:post.numComments/></b> <!-- [n件のコメント]と表示され コメント先頭へJUMP -->
</a>
</b:if>
</b:if>
</p>
==== QooQ 記事一覧 関数の呼び出しサンプル =======
<p class='list-item-date'>
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', convDateFormat2('<data:post.timestampISO8601/>', '<data:post.lastUpdatedISO8601/>'));</script>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments > 0'>
<a alt='comment-link2' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='コメントの表示＆投稿'>
<b> 💬 <data:post.numComments/></b> <!-- [コメント]ポップアップウィンドウを開く -->
</a>
</b:if>
</b:if>
</p>
==== 以下の関数は、</head> 直前に追加 ========
<script type='text/javascript'>
//<![CDATA[
// 2021/11/30 by Ataruchi デフォルト 2021年5月21日(金) の表示形式
// 引数が日付として無効な場合（Dateオブジェクト生成失敗）、"Invalid Date"が返される（ブラウザ毎で違う可能性あり）
// month : "2-digit", day : "2-digit", に変更すれば、月日に前ZERO付加
// https://blog.gadgets-geek.net/2021/05/display-qooq-list-lastUpdatedDay-toLocaleDateString.html
const date_options = { //変換形式の指定パラメータ
year : "numeric", //年の形式 (この行削除で年を非表示)
month : "long", //月の形式
day : "numeric", //日の形式
weekday : "short" //曜日の形式 (この行削除で曜日非表示)
};
function convDateFormat(arg_date) {
let ret_date = new Date("" + arg_date + "").toLocaleDateString("ja-jp", date_options);
if (ret_date.toString() === "Invalid Date") {
return "Invalid Date";
} else {
return ret_date;
}
}
function convDateFormat2(pub_date, up_date) {
let p_date = new Date("" + pub_date + "").toLocaleDateString("ja-jp", date_options);
let u_date = new Date("" + up_date + "").toLocaleDateString("ja-jp", date_options);
if ((p_date.toString() === "Invalid Date") || (u_date.toString() === "Invalid Date")) {
return "Invalid Date";
}
//絵文字を「SVG文字列」と置き換えれば、表示されるはず？
let ret_string = "✏️ " + p_date + "";
if (p_date !== u_date) { //投稿日と更新日が異なる場合
ret_string += " 🔄 " + u_date + ""; //先頭に漢字SPACE付加
}
return ret_string;
}
//]]>
</script>
=================================================
以上です
2021/11/30 【 JetTheme 版】関数化したJavaScriptを 以下に記載！（見易く、メンテが簡単）
複数の箇所から呼び出し可能にするため、関数は必ず </head> 直前に追加！
QooQカスタマイズはきちんと関数化していないサンプルが多いようですが、
今回は きっちり 関数化しました！
デフォルトのパラメータ指定だと、2021年5月21日(金) フォーマットで表示！
JetThemeデフォルトの <data:post.date> と <data:post.lastUpdated> は
Dateオブジェクト生成時にエラー（"Invalid Date"）となるため、
<data:post.date.iso8601/> と <data:post.lastUpdated.iso8601/> を
利用しています。
（iso8601日付フォーマットでなくても、中身が 2021/11/28 や 2021-11-28 フォーマットなら利用可能）
==== 関数の呼び出しサンプル ===================
<b:if cond='data:jwidget.allBylineItems.timestamp'>
<small class='me-2'> <!--.me-2 for margin-right: 0.5rem-->
<script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', convDateFormat2('<data:post.date.iso8601/>', '<data:post.lastUpdated.iso8601/>'));</script>
</small>
</b:if>
//必要なら、コメント数アイコン表示の前に 漢字SPACEを付加（上記 me-2 を変更するか、class指定無しとかで 調整が必要）
==== 以下の関数は、</head> 直前に追加 ========
<script type='text/javascript'>
//<![CDATA[
// 2021/11/30 by Ataruchi デフォルト 2021年5月21日(金) の表示形式
// 引数が日付として無効な場合（Dateオブジェクト生成失敗）、"Invalid Date"が返される（ブラウザ毎で違う可能性あり）
// month : "2-digit", day : "2-digit", に変更すれば、月日に前ZERO付加
// https://blog.gadgets-geek.net/2021/05/display-qooq-list-lastUpdatedDay-toLocaleDateString.html
const date_options = { //変換形式の指定パラメータ
year : "numeric", //年の形式 (この行削除で年を非表示)
month : "long", //月の形式
day : "numeric", //日の形式
weekday : "short" //曜日の形式 (この行削除で曜日非表示)
};
function convDateFormat(arg_date) {
let ret_date = new Date("" + arg_date + "").toLocaleDateString("ja-jp", date_options);
if (ret_date.toString() === "Invalid Date") {
return "Invalid Date";
} else {
return ret_date;
}
}
function convDateFormat2(pub_date, up_date) {
let p_date = new Date("" + pub_date + "").toLocaleDateString("ja-jp", date_options);
let u_date = new Date("" + up_date + "").toLocaleDateString("ja-jp", date_options);
if ((p_date.toString() === "Invalid Date") || (u_date.toString() === "Invalid Date")) {
return "Invalid Date";
}
//絵文字を「SVG文字列」と置き換えれば、表示されるはず？
let ret_string = "✏️ " + p_date + "";
if (p_date !== u_date) { // 投稿日と更新日が異なる場合
ret_string += " 🔄 " + u_date + ""; // 先頭に漢字SPACE付加
}
return ret_string;
}
//]]>
</script>
=================================================
以上です
以下の JavaScript コードを変更して、実行確認できます！（スマホでも）
month : "2-digit", day : "2-digit", に変更して、「月日の前ZERO付加」を確認しましょう！
末尾の関数呼び出し部分の引数（「投稿日」と「更新日」）を同じ日付に変更して実行すると、「投稿日付」部分のみ表示されます。
// アタル
