セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきち

セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきちんと表示
され完璧です。

何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示されて満足です。付属画像参考。

しかし、提示のコードではfirefoxなどのブラウザでも表示されるようにしたいのですが、●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示される今の状況を維持したままどうコードを書いたら
よいでしょうか？

調べたところjQuery UI の Datepickerなどがあるようですが、調べてコードを書いても意味が分からず何も動きませんでした。

●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示される今の状況を維持したままfirefoxなどのブラウザでも表示されるようにしたいのですが、どうコードを書いたら
よいでしょうか？
コードはwandleboxの共有コード内のURL（以下）にあります。


URLの中の白いシートの部分がソースコードです。

回答よろしくお願いいたします。

https://wandbox.org/permlink/tnisdTxbbWaPuqB9

質問者からの補足コメント

• 回答ありがとうございます。
  
  「ご提示の内容で良いのなら（＝ブラウザ限定）、以下の感じではいかがでしょうか？」と書いてあるのですが、
  
  ブラウザ限定と書いてあるのですが、前の質問で提示して下さったコードはクローム限定なのでしょうか？

    補足日時：2021/12/14 16:28

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/12/14 15:07

こんにちは

「UIに関してはブラウザ依存だし、疑似要素はinputには効かないのが本来の仕様」って前回書いたように思いますが・・？
対処方法も併せて記しておいたつもりですけれど・・・
https://oshiete.goo.ne.jp/qa/12711990.html


なんだか、更に、複雑なことにしているようですね。
・・ってか、曜日の表示だけなら、わざわざmoment.jsの必要もないのでは？
どのみち日本語化するのなら、
　let w = new Date(this.value).getDay();
　w = '日月火水木金土'.split('')[w] + '曜日';
でも比較的簡単に求められますので。

この回答へのお礼

ありがとうございます

お礼日時：2021/12/14 16:28

No.2 回答者： fujillin 回答日時： 2021/12/14 18:45

No1です

＞ブラウザ限定と書いてあるのですが、前の質問で～～クローム限定なのでしょうか？
もともと質問者様が想定しているブラウザに対応しているという意味です。


・type=date を使う限り、UIはブラウザ依存です。
・input::before がどのように解釈されるかもブラウザ依存です。
　ですので、各ブラウザで試してみなければわかりません。
（正しくない記述にどう反応するのかは、個々に試してみない限りわからない）

少なくともChrome、Edgeは今のところは同じような反応をするようですし、Firefoxは（正しく）無視します。
他のブラウザやスマホ等のブラウザの場合まではわかりません。

もしも、同じ方式のままでこれに対処したければ「他の要素の疑似要素を用いればよい」と回答しておいたと思いますけれど？
（子要素を持ち得る要素であれば、::beforeが効くのは正しい挙動です。）

この回答へのお礼

ありがとうございます。pleceholerで表示することにします

お礼日時：2021/12/15 13:04