
日付と年月日を選択するコードを書いているのですが、セレクトボックスの中に、「曜日」を表示させたいのですが、付属画像の場所に曜日も表示させたいです。
どうコードを書いたらよいでしょうか?
回答よろしくお願いいたします。
<!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>

No.3ベストアンサー
- 回答日時:
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>
No.2
- 回答日時:
Datepicker を使っての話しなら、下記ページが参考になると思います。
・bootstrap datepicker を曜日付きで出力するフォーマットの書き方
https://every-rating.com/html-css-js/bootstrap-d …
・jQuery Datepickerのデフォルト日付
https://entereal.co.jp/blog/view/990402
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
日付と年月日を選択するコード...
-
PHPのif文でその処理を途中で抜...
-
フォントの色を変えるには?
-
SMTPサーバの指定なしでメ...
-
FTPコマンドでディレクトリごと...
-
visualstudioでc#のdllができない
-
バッチを用いたフォルダの自動移動
-
拡張子を隠すのは良い事なので...
-
makefile でファイルをコピーす...
-
FORMで送信ボタンと戻るボタン...
-
「@$変数」の「@の意味は?」
-
別ファイルの変数を呼び出した...
-
Apache 2.4でphp-5.3を使いたい...
-
Cronで同じ処理を複数同時に実...
-
include先でのinclude元の変数...
-
CSV出力時の”0”表示(電話番号...
-
phpログファイルの文字化けにつ...
-
【file_exists】ファイルが存在...
-
VB6にてメールを送信する方法
-
PHPで吐き出した画像にリンクを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字化けについて
-
phpの画面表示が真っ白です
-
日付と年月日を選択するコード...
-
PHPでHTLM入力された背...
-
ライブドアブログにPHPスクリプ...
-
phpの質問です
-
PHP→JavaScriptへの書き換え
-
一つのphpファイルでframeset
-
外部PHPファイルの読込みについて
-
phpでテキストファイルへ書き込み
-
PHPをはじめて1日目なので・・・
-
header関数について
-
mb_convert_variablesで変換出...
-
更新pingの送信について
-
Wordpressを利用したソート機能...
-
連番を書き出すなどの単純処理...
-
ここでの ②if($su_d<>"")の比較...
-
文字列の一部を取り出したいの...
-
POSTされた値をEUCで表示したい
-
ローカル環境で動くのに本番環...
おすすめ情報