「広告」  

QooQ 記事一覧 の 最終更新日付 表示方法3 ( 日付の日本語表示対応 サンプル )toLocaleDateString()!

Catch-Image (Redirect)

 前回の続きで、今回は「 日付の日本語表示対応 サンプル」となります!
既に利用しているJavaScriptメソッド toLocaleDateString() のみで、どこまで対処できるのか?
前回までは ロケールを指定せずに利用していたため、「使用する機器のロケール」に合わせて「短い形式の日付」が表示されています。
 "日本語"、"韓国語”、"米国"、"英国" などの各国向けのロケールがあり、"米国" だと 「月 日 年」、"英国" だと 「日 月 年」、日本や韓国は 「年 月 日」 の順で、区切り文字も スラッシュ ハイフン など異なります。
 もともと、toLocaleDateString() は ロケールに合わせた日付表示の文字列を返す Dateオブジェクトのメソッドですので...


導入される場合、テーマのバックアップも忘れずに!

  toLocaleDateString() メソッドのみで、下のような 和暦日付(邦歴日付)表示も可能!

Japanese-Date's display format image(Png)

 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(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
        var up_date2 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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(&#39;beforeend&#39;, pub_date2);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString();
var up_date2 =
new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).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(&quot;<data:post.timestampISO8601/>&quot;).toLocaleDateString("ja-jp", date_options2);
		var up_date2 = new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;).toLocaleDateString("ja-jp", date_options2);
	  </script>

 上記のように変更すると、「 2021/5/21 」が「 2021年5月21日(金) 」に! メソッドのみで ほとんどの人は満足できるかと...
ちなみに weekday の "short" を "long" に変更するだけで「 2021年5月21日 金曜日 」と表示。 筆者は小さなスマホでも1行で表示できるよう、最初の設定に落ち着きました。
そのため、更新日付部分のカッコを無くすなど 表示部分の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'>&#160;✏️&#160;<script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, pub_date2);</script>&#12288;🔄&#160;<script>document.currentScript.parentNode.insertAdjacentHTML(&#39;beforeend&#39;, up_date2);</script></p>
	  
      
      <h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
      

 toLocaleDateString() の最初の引数 "ja-jp" が日本用のロケール指定で、2つ目の引数がそのオプションとなります!
以下のサイトで、日付表示を確認しながら 指定できるオプション文字列がわかりますので、いろいろ試してみてくださいね。 それでも満足できない人のみ、「オリジナルのJavaScriptコード」となります。  古いブラウザでなければ、"ja-jp" の代わりに "ja-JP-u-ca-japanese" を指定すると、「 令和3年5月21日(金) 」や「 令和3年5月21日 金曜日 」の和暦表示も可能!



Japanese date format image(Png)

 オリジナルの 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(&quot;<data:post.timestampISO8601/>&quot;);
		var updated		= new Date(&quot;<data:post.lastUpdatedISO8601/>&quot;);
	  </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, &quot;2:1&quot;)'/>
      </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(&#39;beforeend&#39;, pub_date2);</script>
        <!-- 更新マーク -->
        <i aria-hidden='true' class='fas fa-sync-alt' style='margin-left:2.0em'/>
        <!-- 最終更新日 -->
        <span class='updated post-timestamp' expr:title='&quot;Post was updated on &quot; + 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://mac-excel-vba.blogspot.com/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 =  "✏️&nbsp;" + p_date + "";
    if (p_date !== u_date) {    //投稿日と更新日が異なる場合
        ret_string += " 🔄&nbsp;" + 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://mac-excel-vba.blogspot.com/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 =  "✏️&nbsp;" + p_date + "";
    if (p_date !== u_date) {    // 投稿日と更新日が異なる場合
        ret_string += " 🔄&nbsp;" + u_date + "";  // 先頭に漢字SPACE付加
    }
    return ret_string;
}

//]]>
</script>
=================================================
以上です


 以下の JavaScript コードを変更して、実行確認できます!(スマホでも) 

 month : "2-digit", day : "2-digit", に変更して、「月日の前ZERO付加」を確認しましょう! 

 末尾の関数呼び出し部分の引数(「投稿日」と「更新日」)を同じ日付に変更して実行すると、「投稿日付」部分のみ表示されます。






Macブログ ランキング アイコン
最後まで読んでいただき、ありがとうございます。 また、お越しくださいませ。
// アタル
For follow LINE Reader Group!Subscribe to this blog on Feedly!

Next Post Previous Post
1 Comments
  • アタル
    アタル 2021年11月17日 11:35

     2021/01/01 表記、オリジナルの JavaScript コードをわざわざ書かなくても できました!
    (当記事の末尾に 「オリジナルの JavaScript コード」を載せていますが...)

     じつは toLocaleDateStringメソッド のみで 実現でき、
    記事本文「2つ目の掲載HTMLコード」の monthday のパラメータを
    "2-digit" に変更するだけで可能でした!

     以下コードは、記事本文「2つ目の掲載HTMLコード」に上記を適用したもの!

    =====================================
    <script type='text/javascript'>
    //<![CDATA[
    var date_options2 = {
    year : "numeric", //年の形式 この行削除で 年を非表示
    month : "2-digit", //月の形式
    day : "2-digit", //日の形式
    weekday : "short" //曜日の形式 この行削除で 曜日を非表示
    };
    // 20211116 Modify by Ataruchi for 投稿日 2021/01/01(金) の表示形式
    var pub_date2 = new Date("<data:post.timestampISO8601/>").toLocaleDateString("ja-jp", date_options2);
    // 20211116 Modify by Ataruchi for 最終更新日 2021/01/03(日) の表示形式
    var up_date2 = new Date("<data:post.lastUpdatedISO8601/>").toLocaleDateString("ja-jp", date_options2);
    //]]>
    </script>
    =====================================

     上記のコードだけで、pub_date2up_date2 の変数2つは 2021/01/01(金) 表示形式で格納されます。
    もちろん、 weekday の行を削除すれば、末尾の曜日 (金) を非表示に!

     コメントだと、「行先頭の タブ や [space] の文字」が削除されてしまうため 適当に補完が必要。
    見栄えだけの問題なので、動作上 問題はありません。

    今回は、以上です。

Add Comment
comment url
  「広告」