jQueryで当日がセレクトされている状態の日付フォームを作っていきたいと思います。6月2日記事
HTMLでセレクトボックスのプルダウンメニューを書くことはできるのですが、今日の日付の部分があらかじめセレクトされているような状況だと、やはりjQueryやphpなどのプログラムを使わなければなりません。。。。うむ・・・HTMLでもできればいいのに・・・と思ったりしますが、ダメなようです。jQueryで書いていきます。
目次
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>
も読み込みます。
<!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>
このようになります。