日付と年月日を選択するコードを書いているのですが、セレクトボックスの中に、「曜日」を表示させたいのですが、付属画像の場所に曜日も表示させたいです。
どうコードを書いたらよいでしょうか?
回答よろしくお願いいたします。
<!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で質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
前後の全角スペースを削除する...
-
phpでfopen()やfputs()が使えない
-
日付と年月日を選択するコード...
-
phpの画面表示が真っ白です
-
PHPの勉強中の初心者です。
-
CSSの画像をPHPで毎月自動で変...
-
PHP(smarty)についての質問(文...
-
フォントの色を変えるには?
-
PHPのWARNINGをcatchするには
-
onedrive にexcelファイルをア...
-
PHP8を使うと、大量のWarningが...
-
バッチを用いたフォルダの自動移動
-
CSV出力にHTMLが入ってしまう
-
「クラス関数」「メンバ関数」...
-
index.phpって何ですか? 具体...
-
現在位置より2つ上のディレク...
-
透過PNGが透過されない!!
-
PHP 文字列を代入した配列を変...
-
PHPのif文でその処理を途中で抜...
-
$_SESSION 有効期限をブラウザ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
日付と年月日を選択するコード...
-
htmlのエラーについて(デバッグ)
-
文字コードの出力を変更したい
-
文字化けについて
-
前後の全角スペースを削除する...
-
XAMPP1.7.1上でPHPを実行すると...
-
php エラー
-
パスワード認証ページ作りたい...
-
PHP(smarty)についての質問(文...
-
ここでの ②if($su_d<>"")の比較...
-
phpの画面表示が真っ白です
-
mb_convert_variablesで変換出...
-
どうしたら確認ができますか!?
-
html内のphpスクリプトについて
-
機種依存文字の文字化けについて
-
エラー Warning: Cannot modif...
-
【PHP?】header("location : ...
-
javascriptからphpへ変数
-
ローカル環境で動くのに本番環...
-
PEARのXML/Unserializer.phpが...
おすすめ情報