0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでHTMLのdate 型 input 要素を作る

Posted at

概要

 先日、HTML・CSS・JS(それとWebGL)を用いたアプリケーションを開発する際に、日付毎に描画が変わる機能が必要になりました。その時に作成したものがこちらになります。

HTMLコード

まずは、自分の作りたい場所に要素を配置して・・・

code.html
<body>
    <input type="date" id="today">
</body>

JavaScriptコード

そこに入れたい内容をJS側で準備するだけ

code.js
//Dateオブジェクトの宣言
var date = new Date();

//上から日、月、年の宣言
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear() - 1;

//1~9月の場合は'01'~'09'表示になるようにする
if(month < 10) month = "0" + month;

//年を1月から前の年の12月にする場合の処理
if(month == 0){
    month = "12";
    year = year - 1;
}

//月と同じように1~9日は'01'~'09'表示になるようにする
if(day < 10) day = "0" + day;

//HTMLのdate型は「年-月-日」の形で構成される為、'-'を付け加えて形にする
var today = year + "-" + month + "-" + day;

//htmlで定義した"today"に挿入
document.getElementById("today").value = today;

以上で完成です。

参考

Dateについて詳しく知りたい方はこちらの方の記事が参考になります

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?