日付と年月日を選択するコードを書いているのですが、セレクトボックスの中に、「曜日」を表示させたいのですが、付属画像の場所に曜日も表示させたいです。どうコードを書いたらよいでしょうか？回答よろしくお願いいたします。お問い合わせ /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; /* セレクトボックス中央に配置 */ } /* 文字自体のデザイン */ .auto-style3 { color: #63E02D; font-size: 22px; /* 文字を大きく */ } " />

日付と年月日を選択するコードを書いているのですが、セレクトボックスの中に、「曜日」を表示させたいので

解決済

質問者：hayosato
質問日時：2021/12/10 09:20
回答数：3件

日付と年月日を選択するコードを書いているのですが、セレクトボックスの中に、「曜日」を表示させたいのですが、付属画像の場所に曜日も表示させたいです。

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

<!DOCTYPE html>

<html>

<head>
<meta content="text/html; charset=utf-8" />
<title>お問い合わせ</title>

<style>
/* 入力フォームの位置 */

.auto-style1 {

text-align: center;

}

/* セレクトボックスの位置 */
.auto-style2 {

text-align: center;
/* セレクトボックス中央に配置 */

}

/* 文字自体のデザイン */
.auto-style3 {
color: #63E02D;
font-size: 22px;
/* 文字を大きく */

}

</style>
</head>

<body>
<form action="form1.php" method="post">

<div class="auto-style2">

<input type="date" id="input_date1" class="cal lt_004 hasDatepicker" name="time4"
value="<?php if(isset($time4)){ echo $time4; } ?>" />

</div>

</form>
</body>

</html>

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： naktak
回答日時：2021/12/10 10:43

input type="date"による日付入力ですよね。

これは当然ですが、IE11などのHTML5対応が甘いブラウザではサードパーティ製のDateTimePickerなどを利用しない限り対応できません。
それを前提として、下記となります。

moment.jsを使えばこんな感じでできます。
年月日を個別で入力することはできなくなりますが、不正な値が入ることもありません。

表示内容として『月』、『火』などと、「曜日」が不要なら、
data-date-format="YYYY/MM/DD (dddd)"
を
data-date-format="YYYY/MM/DD (ddd)"
にすればいいです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<title>お問い合わせ</title>
<style>
input.example {
position: relative;
width: 170px;
height: 20px;
color: white;
}

input.example:before {
position: absolute;
left: 1px;
color: black;
content: attr(data-date);
}

input.example::-webkit-datetime-edit-year-field,
input.example::-webkit-datetime-edit-month-field,
input.example::-webkit-datetime-edit-day-field {
display:none;
}
</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>
$(function()
{
moment.locale('ja', {
weekdays: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
weekdaysShort: ['日', '月', '火', '水', '木', '金', '土']
});

$('input').on('change', function() {
if (moment(this.value).isValid())
{
this.setAttribute(
'data-date',
moment(this.value).format(this.getAttribute('data-date-format'))
);
}
else
{
this.setAttribute('data-date', '');
}
}).trigger('change');
});

function getValue()
{
alert($(".example").val()); // 2021-12-10
}
</script>
</head>
<body>

<input type="date">

<input type="date" class="example" data-date-format="YYYY/MM/DD (dddd)">

<button onclick="getValue()">getValue</button>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2021/12/10 13:56

No.2

回答者： bx2
回答日時：2021/12/10 09:55

Datepicker を使っての話しなら、下記ページが参考になると思います。

・bootstrap datepicker を曜日付きで出力するフォーマットの書き方
https://every-rating.com/html-css-js/bootstrap-d …

・jQuery Datepickerのデフォルト日付
https://entereal.co.jp/blog/view/990402

- 3
- 件

通報する

この回答へのお礼

ありがとうございました

通報する

お礼日時：2021/12/10 13:56

No.1

回答者：銀鱗
回答日時：2021/12/10 09:37

んー……質問は、

　・自分で日付から曜日を求める方法を知りたいのか、
　・日付から曜日を求めるCGIやモジュールを教えてほしいのか、
　・拾ってきた曜日を希望する場所に表示させる方法を知りたいのか、
という点が不明ですね。

その点を補足すると詳しい人からピンポイントなアドバイスをもらえると思います。
（「全部教えろ」っては、なしでお願いします）

・・・

ごめんね。
ロジカルな質問ですので、ファジーな思考になれないのです。