jQuery UI の Datepicker (カレンダーから日付入力)

jQuery UI のDatepickerで入力フォームでお手軽にカレンダーから入力できる。

コードはこんな感じ

<!-- jQuery UI テーマをCDNから読み込み  -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css">

<!-- jQuery, jQuery UI, jQuery UI Datepicker の 日本語化プラグイン をCDNから読み込み  -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/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>

<script type="text/javascript">
$(function(){
var t_date = $("#datepiek_test").val();
$("#datepick_test").datepicker();
$("#datepick_test").datepicker("option", "showOn", 'both');
$("#datepick_test").datepicker("option", "dateFormat", 'yy/mm/dd'); 
$("#datepick_test").val(t_date); }); 
</script>

<input id="datepick_test" type="text" />

$(function(){

var t_date = $("#datepiek_test").val();

$("#datepick_test").datepicker();

$("#datepick_test").datepicker("option", "showOn", 'both');

$("#datepick_test").datepicker("option", "dateFormat", 'yy/mm/dd');

$("#datepick_test").val(t_date); });

</script>

jQueryやjQuery UI を使う場合、CDNを用いる方法と、ダウンロードしてきて使う方法がある。

手っ取り早いのがCDNなので、上記のサンプルをまるっとコピペすれば動くはず。

しかし、自分のサイトに持っておきたい場合や、テーマをあり物でなくて色々とこだわりたい場合は、自分のところに落としてくる。

また、jQuery UI のテーマはその他のUIと共通なので、Datepickerしか使わなくても他のUI用のcssとかもダウンロードしてしまうので、用途に応じてダウンロードビルダーなるページが用意されている。

ちなみに、jQueryとjQuery UI のバージョンの親和性の問題がある。。
jQueryが古いバージョンでjQuery UI だけを最新にすると動作しないときがあるので、ご注意。

Leave a Reply Cancel Reply