「みんな教えて! 選手権!!」開催のお知らせ

セレクトボックスで年月日を指定するコードを書いているのですが、 付属画像の上の方に何も選択していない

解決済

  • 質問者：hayosato
  • 質問日時：
  • 回答数：2件

セレクトボックスで年月日を指定するコードを書いているのですが、
付属画像の上の方に何も選択していない場合は、/　/スラッシュしか
表示されないのですが、付属画像の下のように、何もまだ選択していない時
でも、 年 /月 /日 と表示されるようにしたいです。

どうコードを書いたらよいでしょうか？
回答よろしくお願いいたします。

wandboxというサイトの共有コード
コードは以下のURLの白いシートの部分です。

https://wandbox.org/permlink/KwDZjqkEGdM827dR

「セレクトボックスで年月日を指定するコード」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんばんは



＞/　/スラッシュしか表示されないのですが
input[type="date"]のUIは、基本的にブラウザ依存です。
CSSで年月日の表示を消しているので、placeholderでも表示が消えているものと考えられます。
（残りの「/　/」だけ表示されている）
-webkitプレフィックス付きですが、その環境のみで動作すれば良いという考えでいいのでしょうか？
例えば、firefoxで表示すれば、CSSは無視されます。

対応としては、表示を消さずに、普通にplaceholderを利用して表示すれば良いものと思われます。
背景色を設定しているようですので、値がない時だけ表示色にして、値がある時は背景色にするようにしておけば、実質的にはplaceholderだけが表示されるようになるでしょう。
表示の切り替えが面倒なら、datasetの方に「年/月/日」のような文字列を設定することでも、同様の見た目が得られると思います。

ブラウザ決め打ちで良いのなら、上記で対応可能ではないかと思います。
とは言え、「input::before」で表示値を表示しようとしているようですが、input要素は本来は子要素を持たないので、before、afterは効かないのが正しい挙動と思われます。
（こちらもfirefoxで表示してみれば、無視されます。）
同様の仕組みで行うにしても、親要素のbeforeなどを利用する方が確実であるように思われます。

一方で、jQueryを利用しているようですので、いっそのことjQueryのdatepickerを利用する方法もありそうな気がします。
https://jqueryui.com/datepicker/
こちらの場合は、input[type="text"]を使用しているので、好みのplaceholderを設定することが可能になります。

※ なお、ご質問には直接関係はないことですけれど…
ざっと見ただけですが、正しいHTMLとCSSを記すようになさった方がよさそうに感じます。
HTMLではいきなりtd要素の記述が出てきていたり、CSSでは同じ要素に対して異なる指定がされていますが、意図がわかりかねます。
どちらが採用されて、どちらが無視されるかを理解なさっていますか？


ご提示の内容で良いのなら（＝ブラウザ限定）、以下の感じではいかがでしょうか？
※ 不要部分は省いてあります。
※ CDNアドレスは、この掲示板ではリンクに変換されてしまうため、正しく設定し直してください。
（Chromeにて確認）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<title>Sample</title>

<style>
#date1 {
position: relative;
border: 3px solid #63e02d;
padding: 0.5em;
width: 11.5em;
font-size: 1.2em;
color: snow;
background-color: snow;
}
#date1::before {
position: absolute;
left: .2em;
color: black;
background-color: snow;
content: attr(data-date);
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js …
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js …

<script>
$(() => {
moment.locale('ja', {
weekdays: '日月火水木金土'.split('').map(s => s + '曜日')
});
$('#date1').on('change', function() {
const v = moment(this.value), f = 'YYYY/MM/DD (dddd)';
this.dataset.date = v.isValid()? v.format(f):'年/月/日';
this.blur();
}).trigger('change');
});
</script>
</head>
<body>

<form action="#" method="post">
<div>
<span><strong>第1希望：※</strong></span>
<input type="date" id="date1" name="time4" value="" />
</div>
<input type="submit" name="submit" value="確認画面へ" />
</form>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございました。そうでね。

通報する
お礼日時：2021/12/13 21:55

No.2

  • 回答者： naktak
  • 回答日時：

input.example:before { に


white-space: pre;
を追加し、

this.setAttribute('data-date', '');
を
this.setAttribute('data-date', ' 年 /月 /日');

にしたらいかがですか。

ただ、あれこれ求めるのであれば、既に回答がありますが、ブラウザ依存の標準コントロールをハックするようなやり方をせずに、サードパーティ製の精度のいいものを選択して利用した方がいいかと思います。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます。そうですね。

通報する
お礼日時：2021/12/13 21:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報