諸事情で 2017/4/30 みたいなものをチェックボックスに応じて 4/30(水) とか 4月30日(水）とかに変更した入力を提供しないといけなくなったのでやってみた。
UIイメージ
[html]
b-monster
[/html]
このチェックボックスに応じて、datepickのインプットボックスの内容が変更される仕立て
DatePicler ui を使えるようにする
[html]
[/html]
こんな感じにgoogle先生から読み込むことにする
一旦動かしてみる
[js]
$(‘#datepick’).datepicker();
[/js]
とりあえずこんな感じに出来る様になる。日付はもちろん yyyy/MM/DD となっている。
これをこれから5/7(日) とか 5月7日 （日)という形に変換する
入力の変化を掴んで処理を動かす
[js]
$(‘#datepick’).datepicker();
$(‘#datepick’).change(function () {
//入力文字列 2017/12/10 みたいな値を取得
var datestr = $(‘#datepick’).val();
//チェックボックスの値を取得
var radioVal = $(‘input[name=’gym’]:checked’).val();
if(datestr){
//配列で格納される [0]2017 
12 
10 となっている
dateArray = datestr.split(‘/’);
//Date型のmonthは0からはじまるので -1をする
var dateObj = new Date(dateArray[0],(dateArray-1),dateArray);
//曜日は配列で返すので定義しておく
var week = [‘日’, ‘月’, ‘火’, ‘水’, ‘木’, ‘金’, ‘土’];
var y = dateObj.getFullYear();
var m = dateObj.getMonth() + 1;
var d = dateObj.getDate();
var w = dateObj.getDay();
if(radioVal == 1){
//5/7(日)
$(‘#datepick’).val(m + ‘/’ + d + ‘(‘ + week[w] + ‘)’);
}else{
$(‘#datepick’).val(m + ‘月’ + d + ‘日(‘ + week[w] + ‘)’);
}
}
});
[/js]
とりあえずこんな感じに動くようになった
最後に・・・・
いったん出来たけど、どちらかというとこの手の入力はdatepickerのオプションで出来ればその方が良いよなぁ。。。ひょっとしたら出来るかもと思ってリファレンスを少し覗いて見たけどなさそうだった・・・
※5/13追記 こんな感じで出来ることが同僚の指摘で分かりました・・・・orz 知らなかった・・・・・
[js]
var format = ‘yy-mm-dd’;
$(‘.datepicker’).datepicker({
dateFormat: format
});
[/js]
