INPUT type="date"のカレンダーアイコン（calendar-picker-indicator）を
変更する２つの方法 - FontAwesome Webアイコン、画像アイコンに変更。
また、選択した年月日に加えて曜日を表示する。

FORM INPUT type="date"のカレンダーアイコン（calendar-picker-indicator）を好みのFontAwesome Webアイコンまたは画像アイコンに変更 する方法、および選択した年月日に加え曜日を表示する方法を紹介します。
INPUT type="date"のカレンダーアイコンのデフォルトの表示はつぎのとおりです。

  INPUT type="date"の初期値に今日の日付を表示する機能（Javascript）を追加しました - 2023.1.13

1. FontAwesome Webアイコンに変更する｜2. 画像アイコンに変更｜3. 画像アイコンに変更し曜日表示

１. FontAwesome Webアイコンに変更する

FontAwesome Webアイコンに変更するには、FontAwesomeが同梱されたBootstrap 4を使用します。
FontAwesome Webアイコンは、つぎの「FONT AWESOME v.4.7.0」ページにありますので参照してください。

・FONT AWESOME v.4.7.0
  https://fontawesome.bootstrapcheatsheets.com/
・"calendar"で検索するとつぎのアイコンが参照できます
  

FontAwesome Webアイコンに変更する方法は以下のとおりです。

先ず、FontAwesome CSSをBootstrapCDNサイトからインクルード

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

HTML

<input type="date" id="inputdate">

FontAwesome Webアイコン変更CSS


「FONT AWESOME v.4.7.0」ページで必要なアイコンを表示して、
copyボタンをクリック→CSS Ruleをクリックすると、
content:"\f073";
がコピーできます。
この\f073を下コードの１１行目に設定します。 

/* 引用；https://codepen.io/andyftp/pen/EQoKxq */
input[type="date"] {
    position: relative;
}
/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    font-family: FontAwesome;
    content: "\f073";  /* FontAwesome Webアイコンここに設定 */
    color: #555;
    padding: 0 5px;
}
/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #bf1400;
}
/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
z-index:100;
}
/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}
 /* adjust clear button */
 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

INPUT type="date"の初期値に今日の日付を表示するJavascript

INPUT type="date"の表示形式は、つぎのようになります。

/* INPUT type="date"の初期値に今日の日付を表示 */
  window.onload = function () {
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0" + (today.getMonth() + 1)).slice(-2);
    var dd = ("0" + today.getDate()).slice(-2);
    document.getElementById("input type='date'のID名").value = yyyy + '-' + mm + '-' + dd;
  }

まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INPUT type="date"のカレンダーアイコンをFontAwesome Webアイコンに変更するデモ</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* 引用；https://codepen.io/andyftp/pen/EQoKxq */
input[type="date"] {
    position: relative;
}
/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    font-family: FontAwesome;
    content: "\f073";  /* FontAwesome Webアイコンここに設定 */
    color: #555;
    padding: 0 5px;
}
/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #bf1400;
}
/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
z-index:100;
}
/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}
 /* adjust clear button */
 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }
</style>
</head>
<body>
<h3>INPUT type="date"のカレンダーアイコンをFontAwesome Webアイコンに変更するデモ</h3>
<input type="date" id="inputdate">
<script>
/* input type='date'に今日の日付を表示 */
  window.onload = function () {
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0" + (today.getMonth() + 1)).slice(-2);
    var dd = ("0" + today.getDate()).slice(-2);
    document.getElementById("inputdate").value = yyyy + '-' + mm + '-' + dd;
  }
</script>
</body>
</html>

２. 画像アイコンに変更する

画像アイコンに変更する方法は以下のとおりです。

先ず、画像カレンダーアイコンを用意します
・商用利用可能な無料のアイコンをすぐにダウンロードできるアイコン素材配布サイト
https://icon-rainbow.com/tag/%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/
・カレンダー アイコン ? ダウンロード 613 カレンダー アイコン 無料
https://icon-icons.com/ja/%E6%A4%9C%E7%B4%A2/・・・・・

HTML

<input type="date" id="cal-date">

画像アイコン変更CSS

変更する画像アイコンのファイル名を、下ソースコードの19行に設定します。 
input[type="date"]{
    width: 125px;
    position: relative;
}
input[type="date"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}
 
input[type="date"]::-webkit-clear-button{
    -webkit-appearance: none;
}
 
input[type=date]::-webkit-calendar-picker-indicator {
    /* position: absolute;   width: 100%;  height: 100%; */
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(http://urbanqee.com/html/nenrei/img/calender-icon-blue-w16.jpg) no-repeat;
    width: 16px;
    height: 16px;
    border-width: thin;
}
input#cal-date {
  border:1px solid gray; 
  border-radius:10px;
  box-shadow: none;
  padding: 2px 3px;
}
input#cal-date:focus {
  outline: none;
}

まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INPUT type="date"のカレンダーアイコンをFontAwesome Webアイコンに変更するデモ</title>
<style>
input[type="date"]{
    width: 125px;
    position: relative;
}
input[type="date"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button{
    -webkit-appearance: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
    /* position: absolute;   width: 100%;  height: 100%; */
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(http://urbanqee.com/html/nenrei/img/calender-icon-blue-w16.jpg) no-repeat;
    width: 16px;
    height: 16px;
    border-width: thin;
}
input#cal-date {
  border:1px solid gray; 
  border-radius:10px;
  box-shadow: none;
  padding: 2px 3px;
}
input#cal-date:focus {
  outline: none;
}
</style>
</head>
<body>
<h3>INPUT type="date"のカレンダーアイコンを画像アイコンに変更するデモ</h3>
<input type="date" id="cal-date">
<script>
/* input type='date'に今日の日付を表示 */
  window.onload = function () {
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0" + (today.getMonth() + 1)).slice(-2);
    var dd = ("0" + today.getDate()).slice(-2);
    document.getElementById("cal-date").value = yyyy + '-' + mm + '-' + dd;
  }
</script>
</body>
</html>

３. 画像アイコンに変更し、曜日を表示する

画像アイコンに変更し、カレンダーアイコンで選択された年月日に合せて曜日を表示する方法は以下のとおりです。
なお、フォームを送信した場合、曜日は表示だけでサーバへは送信されづ、年月日のみが送信されます。

先ず、画像カレンダーアイコンを用意します
・商用利用可能な無料のアイコンをすぐにダウンロードできるアイコン素材配布サイト
https://icon-rainbow.com/tag/%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/
・カレンダー アイコン ? ダウンロード 613 カレンダー アイコン 無料
https://icon-icons.com/ja/%E6%A4%9C%E7%B4%A2/・・・・・

jsファイル

Jqueryとmomentの２つのjsファイルを使用します。
Moment.jsは、Javascriptで日付を扱うためのライブラリです。CDNで公開されているファイルを使用すると良いでしょう。 
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>

HTML

<input type="date" id="cal-datew" name="datew" value="" />

CSS - 画像アイコン変更よよび曜日設定

変更する画像アイコンのファイル名を、下ソースコードの25行に設定します。 
/*** INPUT date 共通設定 ***/
input[type="date"]{
 position: relative;
 border: 2px solid gray;
 padding: 5px;
 width: 200px;
 font-size: 16px; 
 color: #FFFAFA;
 background-color: #FFFAFA;
}
/*** INPUT-date カレンダーアイコンを画像アイコンに変更 ***/
input[type="date"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button{
    -webkit-appearance: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
    /* position: absolute;   width: 100%;  height: 100%; */
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(http://urbanqee.com/html/nenrei/img/calender-icon-blue-w16.jpg) no-repeat;
    width: 16px;
    height: 16px;
    border-width: thin;
}
/***  曜日設定 ***/
#cal-datew::before {
 position: absolute;
 left: 5px;
 color: black;
 background-color: #FFFAFA;
 content: attr(data-date);
}

javascript - 曜日設定

</boy>タグの直前に配置します。 
/*** 曜日設定 ***/
$(() => {
 moment.locale('ja', {
 weekdays: '日月火水木金土'.split('').map(s => s + '曜日')   // yyyy/mm/dd/ (月曜日)
 });
$('#cal-datew').on('change', function(){
 var ymd = moment(this.value), ymdw = 'YYYY/MM/DD (dddd) ';
 this.dataset.date = ymd.isValid()? ymd.format(ymdw):'年月日を選択して下さい';
 this.blur();
}).trigger('change');
});
・引用参考：曜日設定javascript
・参照：[Javascript] Moment.jsを使って日付を扱おう ｜ 全61件！Moment.js 日付フォーマット実例

まとめ

まとめHTMLデモ（PHP)は、送信確認ができます。 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INPUT type="date"のカレンダーアイコンを画像アイコンに変更し、曜日を表示する</title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<style>
/*** INPUT date 共通設定 ***/
input[type="date"]{
 position: relative;
 border: 2px solid gray;
 padding: 5px;
 width: 200px;
 font-size: 16px; 
 color: #FFFAFA;
 background-color: #FFFAFA;
}
/*** INPUT-date カレンダーアイコンを画像アイコンに変更 ***/
input[type="date"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button{
    -webkit-appearance: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
    /* position: absolute;   width: 100%;  height: 100%; */
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(http://urbanqee.com/html/nenrei/img/calender-icon-blue-w16.jpg) no-repeat;
    width: 16px;
    height: 16px;
    border-width: thin;
}
/***  曜日設定 ***/
#cal-datew::before {
 position: absolute;
 left: 5px;
 color: black;
 background-color: #FFFAFA;
 content: attr(data-date);
}
</style>
</head>
<body>
<h3>INPUT type="date"のカレンダーアイコンを画像アイコンに変更し、曜日を表示するデモ</h3>
<input type="date" id="cal-datew" name="datew" value="" />
<script>
/*** 曜日設定 ***/
$(() => {
 moment.locale('ja', {
 weekdays: '日月火水木金土'.split('').map(s => s + '曜日')   // yyyy/mm/dd/ (月曜日)
 });
$('#cal-datew').on('change', function(){
 var ymd = moment(this.value), ymdw = 'YYYY/MM/DD (dddd) ';
 this.dataset.date = ymd.isValid()? ymd.format(ymdw):'年月日を選択して下さい';
 this.blur();
}).trigger('change');
});
</script>
</body>
</html>

1. FontAwesome Webアイコンに変更する｜2. 画像アイコンに変更｜3. 画像アイコンに変更し曜日表示

サイト内関連リンク：




 最終更新日：2021. 4.17（初版）, 2021.12.18
アクセス解析