[HTML5] datetime-localで，placeholderが表示されない問題を解決する

datetime-localとは

日付と時刻を1つのウィンドウで入力できる，input要素の型です。

詳しくは，MDN Web Docsで説明されておりますので，下記URLからご確認ください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local

ブラウザーの対応状況

2021年1月23日時点の，"Can I Use..."の情報 ( https://caniuse.com/?search=datetime-local ) によると，

• モバイルブラウザー: ほとんどが対応しています。（Opera MiniとKaiOS Browserを除く）
• デスクトップブラウザー: IE，Firefox，Safariが非対応となっています。
  （ただし，SafariのTechnology Preview版では対応とのこと→次期バージョンのSafariは，対応するかも？）

モバイルではほぼ導入が完了している一方で，デスクトップでは導入に消極的です。

結論: アクセスをモバイル端末に限定させるか，Cordovaを利用してアプリにするならば，問題はなさそうです。

本題: Placeholderが表示されない！

なぜかiOS Safari等で，placeholderが表示されません。
そこで，:beforeとカスタム属性を使って，強引に解決させます。

##コード

HTML

<input type="datetime-local" id="target">

CSS

#target {
  position: relative;
  width: 50%;
  height: 10vh;
  font-size: 14px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: 1px solid #333;
 border-radius: 0;
 outline: none;
}
#target::before {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  font-size: 14px;
  line-height: 10vh;
  top: 0;bottom: 0;left: 0; right: 0;
  content: attr(placeholder2);
}
#target:focus{
  background: #333;
  color: #fff;
}

JS

const placeholder="日時を選択",target=document.getElementById('target');
target.setAttribute('placeholder2',placeholder);

const focusplaceholder=()=>{
    event.target.setAttribute('placeholder2', ' ');
}

const inputplaceholder=()=>{
  if(event.target.value){
    event.target.setAttribute('placeholder2', '  ');
  }else{event.target.setAttribute('placeholder2',placeholder);}
}

target.addEventListener("focus",focusplaceholder);
target.addEventListener("input",inputplaceholder);

注意事項

• 上記コードは，モバイルブラウザーでの利用（or Cordovaでの開発）が前提です。
  デスクトップブラウザーの場合，ブラウザーデフォルトの"yyyy/mm/dd --:--"と，上記で設定したplaceholderは重なります。それゆえ，使い物にはならないでしょう。

• コードは，各自で改良していただければと思います。もっと綺麗に書ける方法があれば，ご教示いただければ幸いです。