IT仕事

JQueryでカレンダー入力機能

投稿日:

Aフレーム|屋内外のイベント用ディスプレイに。設営工事不要。短期レンタル可能な看板 2014-12-22 18-48-41

以下を参考に、ZeroMailというメールフォームスクリプトにカレンダー入力機能を追加。
Datepicker | jQuery UI 1.10 日本語リファレンス | js STUDIO
他のサイトにあったサンプルコードではJQueryをダウンロードしなければならなかったしその通りにやってみてもうまく動かなかったが、こちらのコードをコピペしたらすぐできた。
作者様、ありがとうございました。

また、Fromで選択した日付をtoの最小値として設定したかったので、こちらは下のサイトを参考にして、コードを追加。
jquery – Set Maximum Date In Chaining Datepicker – Stack Overflow

ところで、フォームのリセットボタンが効かなくなったので、下のサイトを参考に自身のコードのclassをidに書き換え&追加。
【jQuery】formのリセットをで3行で書いてみる at softelメモ

JQuery:

<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.8.3.js”></script>
<script src=”http://code.jquery.com/ui/1.9.2/jquery-ui.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js”></script>
<script>
$(function() {
$( “#datepicker_start” ).datepicker({
// 本日から起算して何日後までを選択できるようにするかを範囲指定
minDate: “1”, // 先頭は本日+1
maxDate: “5”, // 最後は本日+5
onClose: function( selectedDate ) {
var nyd = new Date(selectedDate);
// #datepicker_startで指定した日付から何日後かを指定
nyd.setDate(nyd.getDate() + 10);
$( “#datepicker_end” ).datepicker( “option”,{
minDate: selectedDate,
maxDate: nyd
});
}
});
$( “#datepicker_end” ).datepicker({
onClose: function( selectedDate ) {
$( “#datepicker_start” ).datepicker( “option”, “maxDate”, selectedDate );
}
});
});

// フォームのリセットボタンがJQueryのため効かなくなっているので追加
$(“#myreset”).bind(“click”, function(){
$(this.form).find(“textarea, :text, select”).val(“”).end().find(“:checked”).prop(“checked”, false);
});
</script>

HTML:

<tr>
<th scope=”row”><label for=”end” class=”require”>レンタル終了日</label></th>
<td><span class=”small”>※この日までに発送してください</span><br />
<input type=”text” id=”datepicker_end” /></td>
</tr>

<tr>
<th scope=”row”><label for=”message”>*その他お問合せ</label></th>
<td><textarea name=”message_req” id=”message” cols=”50″ rows=”5″></textarea></td>
</tr>

改めて先人たちに感謝!!

-IT仕事

執筆者:

関連記事

no image

レンタルサーバにあるXOOPSの本番環境をローカルのテスト環境/XAIOに移す手順

ローカルフォルダを上書きするので、手軽な方法でよいのでフォルダとDBのバックアップを取っておく。 まず、サーバ側 XOOPSテーマ、モジュール、Upload、Imagesの各フォルダをローカルのXAI …

no image

Shopifyで注文に付けたタグが消える(日本語の場合)

手入力でタグ付けしても、アプリでタグ付けしても、日本語はダメ。気持ち悪いのは、一度、日本語のタグ付けをして、正しく保存されたように見えても、次に画面遷移したらそれが消えていたり、時間がたったら消えてい …

no image

・・・

山を登り終えたら、海に潜って、空を飛べ・・・みたいな仕事(もちろん比喩)が連日続いていて、クタクタ。 この他に、メール読んだり書いたり、スケジュール確認やら優先順位の組み直しやら、社内の指示やら伝達や …

no image

Excel2013のリボン&タブのカスタマイズで格闘。

今まで、BookのXMLにリボンメニューを仕込むのは難しいのだと思っていた。 実際、Excel2003でアドインメニューを作ったことがあるが、そのときは相当苦労した。 しかし無料のツールを使えば、かな …

no image

IP電話

呉西のケーブルテレビ会社にIP電話を申し込んだら、 「トラブルが多いから内規で設置申し込みを受け付けないようにしている。公表してないが」 と、そこの営業さん。 ここ、市が運営してるところじゃなかったっ …