jQueryで当日がセレクトされている状態の日付フォームを作っていきたいと思います。6月2日記事

HTMLでセレクトボックスのプルダウンメニューを書くことはできるのですが、今日の日付の部分があらかじめセレクトされているような状況だと、やはりjQueryやphpなどのプログラムを使わなければなりません。。。。うむ・・・HTMLでもできればいいのに・・・と思ったりしますが、ダメなようです。jQueryで書いていきます。

目次





jQueryとCSSの読み込み

jQueryとCSSはダウンロードしてもよいのですが、Googleから読み込みます。 http://jqueryui.com/datepicker/にサンプルソースコードが乗っかってるので、それを使います。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

日本の表記の場合2015/06/03なので、そのためのライブラリ

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

も読み込みます。

HTML記述

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryで日付挿入</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
$(function(){
 $("#datepicker").datepicker()

});
</script>

</head>

<body>
<p>日付: <input type="text" id="datepicker"></p>
</body>
</html>

結果

このようになります。



最終更新:2015年06月02日 17:52
添付ファイル