jQuery mobile で、Datepicker の方法を調べていたのだが、
探し方が悪いのか、github.com で見当たらなくて、、、
gihub の中の /jquery/jquery-mobile/tree/master/experiments/ui-datepicker
ここではなく、http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
のソースからしか入手できなかった。
ここから以下3つを取得
jquery.ui.datepicker.mobile.css
jQuery.ui.datepicker.js
jquery.ui.datepicker.mobile.js
HTML ヘッダには以下の様に記述する。(css , javascript 順番に注意)
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Sample</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.0b2.min.css"/>
<link rel="stylesheet" href="datepick/jquery.ui.datepicker.mobile.css" />
<script src="jquery/jquery-1.6.2.min.js"></script>
<script src="jquery/jquery.mobile-1.0b2.min.js"></script>
<script src="datepick/jQuery.ui.datepicker.js"></script>
<script src="datepick/jquery.ui.datepicker.mobile.js"></script>
</head>
input タグは、上記デモサイトによると、
<input type="date" name="date" id="date" value="" />
type="date" を記述となっている。
これで、jQuery mobile 1.0b2 を試していると、以下のような input フィールドになってしまう。
これを jQuery mobile の標準の入力書式にするには、
type="true" data-type="date"
class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c"
とする。
さらに、このままだと、MM/dd/yyyy 形式の入力書式で、しかも月は英語表記のまま。
これを日本語の書式にしたければ、jQuery.ui.datepicker.js を修正する
31行目付近、「this.regional[""]={ 」の次、以下のように修正する。
closeText:"Done" → closeText:"閉じる"
prevText:"Prev" → prevText:"前月"
nextText:"Next" → currentText:"今日"
monthNames:["January","February","March", ... ,"December"]
→ monthNames:["1月","2月","3月", ... ,"12月"]
dayNamesMin:["Su","Mo","Tu","We","Th","Fr","Sa"]
→ dayNamesMin:["日","月","火","水","木","金","土"]
weekHeader:"Wk" → dateFormat:"yy/mm/dd"
showMonthAfterYear:false → showMonthAfterYear:true
yearSuffix:"" → yearSuffix:"年 "