こんにちは斉藤です。
もう3月ということで少しずつ雪も溶け始めてきているそんな札幌ですね。
今シーズンは大好きなスノーボードにもたくさん行けたので充実した冬を過ごせました。
2年振りくらいにニセコにも行けたのですが、改めて雪質の良さに感動でした。
北海道の山々よありがとう！！！
カレンダーで日付選択
斉藤
0
1
さて、本日は日付選択の際にカレンダーを使用する方法をメモがてら残しておきます。
使用するのは「jQuery ui Datepicker」です。
ありがたいことに使い方はすごく簡単です。
まずは読み込むファイルをヘッダーに入れます。
＜script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"＞＜/script＞
＜script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"＞＜/script＞
＜script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"＞＜/script＞
＜link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"＞
今回は上記4つを読み込んでみました。
jqueryとjqueryuiと日本語化とカレンダーのcssですね。
次にhtmlです。始まりと終わりの期間を選択するフォームと仮定します。
＜input type="text" id="datepickerFrom"＞
＜input type="text" id="datepickerTo"＞
最後にjavascriptの部分です。
$(function() {
$('#datepickerFrom,#datepickerTo').datepicker();
});
これだけで動いてしまいます。非常にありがたい限りです。
あとはフォーム送信したいものがあればinputでnameやvalueをつけてあげればいいですね！
オプションも色々あったのでやれることも多そうでした！
参考にしたサイト