Javascript

説明

フォームにカレンダーを表示させたいけど、input type dateではIEとかでは表示されないので使えない場合、jqueryのdatepickerというライブラリ?を使用すれば、簡単にデザイン性が高くIEでも表示可能なカレンダーが作成できます。

使用方法

  1. http://jquery.com/download/からjqueryをダウンロード
  2. あとは下記パスをソースに記述
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui.css" >
<script>
$(function() {
 $("#datepicker").datepicker( { minDate: '+7d'} );   <--7日後以降を指定させる場合yとかでも指定可能
 $("#datepicker").datepicker("option", "buttonImageOnly", true);
});
</script>

フォームで使用する箇所

<input type="text" id="datepicker" name="hogehoge">

参考サイト:http://www.webdesign-fan.com/jquery-ui-datepicker


トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-06-30 (木) 01:40:11