IE11がHTML5カレンダー入力に未対応なので、jQueryのdatepickerを使ってみた。

admin

7年前

chromeなど、HTML5に対応しているブラウザでは入力フォームで

<input type="date" name="input_date">

1	<input type="date" name="input_date">

と書くと、自動的にカレンダー表示してくれる。

ただし、IE11やOperaではHTML5未対応なので、ただの文字列入力になっていまう…。
しょうがないので対応策を調べてみたら、jQueryのdatepickerが良さそう

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.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 type="text/css" rel="stylesheet"  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />

<script>
$(function() {
    $('#input_date').datepicker();
});
</script>

<input type=text id="input_date" name="input_date">

$(function() {

$('#input_date').datepicker();

});

</script>

見た目が少々しょぼいけど、自分でカレンダー実装するよりマシだ！

【追記】
ちゃんとCSSを設定したら、それっぽくなった！

あらかじめ、初期値も設定できる

var date = new Date();
date.setDate(1);  
// 初期値は月初(１日)
$('#since_date').datepicker().datepicker('setDate', date);   
// 初期値は本日
$('#until_date').datepicker().datepicker('setDate','today');

var date = new Date();

date.setDate(1);

// 初期値は月初(１日)

$('#since_date').datepicker().datepicker('setDate', date);

// 初期値は本日

$('#until_date').datepicker().datepicker('setDate','today');

関連記事