▲PAGE TOP

2014年5月8日木曜日

入力フォームで日付をカレンダーで入力する



  1. BLOGGERダッシュボード>テンプレート>HTML編集をクリックする
  2. ]]></b:skin> の下にタグ(1)を入力して保存する
  3. フォーム入力タグ<input type="text" .... >に  id="datepicker"を挿入する(例1)
  4. フォームタグと一緒にスクリプト(1)を入力する
  5. 保存して終了
さらにカスタマイズする場合の参考サイト> http://jqueryui.com/datepicker/#date-formats

複数の日付入力フォームを設置する場合は、datepickerに番号つけて重複しないようにする


タグ(1)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"/>


例(1)
<input maxlength="100" name="ご来店希望日(1)" size="25" type="text" id="datepicker" />
<input maxlength="100" name="ご来店希望日(2)" size="25" type="text" id="datepicker2" />
<input maxlength="100" name="ご来店希望日(3)" size="25" type="text" id="datepicker3" />


スクリプト(1)
 <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
 <script>
  $(function() {
    $( "#datepicker2" ).datepicker();
  });
  </script>
 <script>
  $(function() {
    $( "#datepicker3" ).datepicker();
  });
  </script>







COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)