Created
October 4, 2011 01:06
-
-
Save kijtra/1260683 to your computer and use it in GitHub Desktop.
[JavaScript] 「input type="hidden"」に対し、日付の選択プルダウンを表示させる。(要jQuery)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 使用方法 | |
| $('input[name="date"]').dateSelector({ | |
| format:'y-m-d', //日付選択後、hiddenフォームに入る日付の形式。「y」「m」「d」(すべて小文字)がそれぞれ置換されます | |
| date:'today', //初期表示日付。yyyy-mm-ddまたはyyyy/mm/ddまたは「today」もしくは「now」に対応 | |
| year:'2000,+2' //年の範囲。「最小年,最大年」の形式で、年そのものか、「+2(年)」「-3(年)」に対応 | |
| block:false, //年、月、日のプルダウンがまとまったものをブロック要素(div)にするか、インライン要素(span)にするか | |
| before:false, //hiddenフォームの前に挿入する場合はtrue | |
| onchange:function(y,m,d){} //各プルダウンの選択後(全て値が入っている場合)に実行する関数。年、月、日の数値が渡される | |
| }); | |
| */ | |
| ;(function(){ | |
| jQuery.fn.dateSelector=function(conf){ | |
| if(!this.size()){ | |
| return false; | |
| } | |
| var dd=new Date(); | |
| var nowY=dd.getYear(); | |
| nowY+=(nowY<2000) ? 1900 : 0; | |
| var nowM=dd.getMonth()+1; | |
| var nowD=dd.getDate(); | |
| conf=$.extend({ | |
| date:nowY+'-'+('0'+nowM).slice(-2)+'-'+('0'+nowD).slice(-2), | |
| format:'yy-mm-dd', | |
| year:'-5,+2', | |
| block:false, | |
| before:false, | |
| 'class':'', | |
| onchange:function(y,m,d){} | |
| },conf); | |
| var set=function($t,$y,$m,$d){ | |
| if(!$y || !$m || !$d){ | |
| return false; | |
| } | |
| var y=$y.val(); | |
| var m=$m.val(); | |
| var d=$d.val(); | |
| if(y.match(/^\d{4}$/) && m.match(/^\d{1,2}$/) && d.match(/^\d{1,2}$/)){ | |
| var val=conf.format; | |
| val=val.replace('yy',y).replace('mm',('0'+m).slice(-2)).replace('dd',('0'+d).slice(-2)); | |
| $t.val(val); | |
| }else{ | |
| $t.val(''); | |
| } | |
| if(typeof conf.onchange=='function'){ | |
| conf.onchange(y,m,d); | |
| } | |
| return null; | |
| }; | |
| var years=function(d){ | |
| var mn,mx; | |
| var e=conf.year.split(','); | |
| if(e[0].match(/^([\-\+])([0-9]+)/)){ | |
| mn=nowY+(RegExp.$1=='-' ? 0-Number(RegExp.$2) : Number(RegExp.$2)); | |
| }else if(e[0].match(/^\d{4}$/)){ | |
| mn=Number(e[0]); | |
| }else{ | |
| mn=nowY-2; | |
| } | |
| if(e[1].match(/^([\-\+])([0-9]+)/)){ | |
| mx=nowY+(RegExp.$1=='-' ? 0-Number(RegExp.$2) : Number(RegExp.$2)); | |
| }else if(e[1].match(/^\d{4}$/)){ | |
| mx=Number(e[1]); | |
| }else{ | |
| mx=nowY+2; | |
| } | |
| var ops='<option value="">\u5e74</option>'; | |
| for(var i=mn;i<=mx;i++){ | |
| s=(d==i) ? 'selected="selected"' : ''; | |
| ops+='<option value="'+i+'"'+s+'>'+i+'\u5e74</option>'; | |
| if(i==mx){ | |
| return $('<select class="dateselector_year '+conf['class']+'" />').html(ops); | |
| } | |
| } | |
| return null; | |
| }; | |
| var months=function(d){ | |
| var mn=1; | |
| var mx=12; | |
| var ops='<option value="">\u6708</option>'; | |
| for(var i=mn;i<=mx;i++){ | |
| s=(d==i) ? 'selected="selected"' : ''; | |
| ops+='<option value="'+i+'"'+s+'>'+i+'\u6708</option>'; | |
| if(i==mx){ | |
| return $('<select class="dateselector_month '+conf['class']+'" />').html(ops); | |
| } | |
| } | |
| return null; | |
| }; | |
| var days=function(d){ | |
| var mn=1; | |
| var mx=31; | |
| var ops='<option value="">\u65e5</option>'; | |
| for(var i=mn;i<=mx;i++){ | |
| s=(d==i) ? 'selected="selected"' : ''; | |
| ops+='<option value="'+i+'"'+s+'>'+i+'\u65e5</option>'; | |
| if(i==mx){ | |
| return $('<select class="dateselector_day '+conf['class']+'" />').html(ops); | |
| } | |
| } | |
| return null; | |
| }; | |
| this.each(function(){ | |
| if(!this.tagName.match(/^INPUT$/i)){ | |
| return false; | |
| } | |
| var $t=$(this).hide(); | |
| var e,yy,mm,dd; | |
| var date=($t.val()) ? $t.val() : conf.date; | |
| if(date && date.match(/^\d{4}-\d{2}-\d{2}$/)){ | |
| e=date.split('-'); | |
| yy=Number(e[0]); | |
| mm=Number(e[1]); | |
| dd=Number(e[2]); | |
| }else if(date && date.match(/^\d{4}\/\d{2}\/\d{2}$/)){ | |
| e=date.split('/'); | |
| yy=Number(e[0]); | |
| mm=Number(e[1]); | |
| dd=Number(e[2]); | |
| }else{ | |
| if(conf.date=='today' || conf.date=='now'){ | |
| yy=nowY; | |
| mm=nowM; | |
| dd=nowD; | |
| }else{ | |
| yy=''; | |
| mm=''; | |
| dd=''; | |
| } | |
| } | |
| var $y=years(yy); | |
| var $m=months(mm); | |
| var $d=days(dd); | |
| $y.change(function(){ | |
| set($t,$y,$m,$d); | |
| }); | |
| $m.change(function(){ | |
| set($t,$y,$m,$d); | |
| }); | |
| $d.change(function(){ | |
| set($t,$y,$m,$d); | |
| }); | |
| if(date){ | |
| set($t,$y,$m,$d); | |
| } | |
| var obj=$('<'+(conf.block ? 'div' : 'span')+' class="dateselector dateselector_'+$t.attr('name')+'" />').append($y,$m,$d); | |
| if(conf.before){ | |
| $t.before(obj); | |
| }else{ | |
| $t.after(obj); | |
| } | |
| return true; | |
| }); | |
| return this; | |
| }; | |
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(function(){jQuery.fn.dateSelector=function(conf){if(!this.size()){return false}var dd=new Date();var nowY=dd.getYear();nowY+=(nowY<2000)?1900:0;var nowM=dd.getMonth()+1;var nowD=dd.getDate();conf=$.extend({date:nowY+'-'+('0'+nowM).slice(-2)+'-'+('0'+nowD).slice(-2),format:'yy-mm-dd',year:'-5,+2',block:false,before:false,'class':'',onchange:function(y,m,d){}},conf);var set=function($t,$y,$m,$d){if(!$y||!$m||!$d){return false}var y=$y.val();var m=$m.val();var d=$d.val();if(y.match(/^\d{4}$/)&&m.match(/^\d{1,2}$/)&&d.match(/^\d{1,2}$/)){var val=conf.format;val=val.replace('yy',y).replace('mm',('0'+m).slice(-2)).replace('dd',('0'+d).slice(-2));$t.val(val)}else{$t.val('')}if(typeof conf.onchange=='function'){conf.onchange(y,m,d)}return null};var years=function(d){var mn,mx;var e=conf.year.split(',');if(e[0].match(/^([\-\+])([0-9]+)/)){mn=nowY+(RegExp.$1=='-'?0-Number(RegExp.$2):Number(RegExp.$2))}else if(e[0].match(/^\d{4}$/)){mn=Number(e[0])}else{mn=nowY-2}if(e[1].match(/^([\-\+])([0-9]+)/)){mx=nowY+(RegExp.$1=='-'?0-Number(RegExp.$2):Number(RegExp.$2))}else if(e[1].match(/^\d{4}$/)){mx=Number(e[1])}else{mx=nowY+2}var ops='<option value="">\u5e74</option>';for(var i=mn;i<=mx;i++){s=(d==i)?'selected="selected"':'';ops+='<option value="'+i+'"'+s+'>'+i+'\u5e74</option>';if(i==mx){return $('<select class="dateselector_year '+conf['class']+'" />').html(ops)}}return null};var months=function(d){var mn=1;var mx=12;var ops='<option value="">\u6708</option>';for(var i=mn;i<=mx;i++){s=(d==i)?'selected="selected"':'';ops+='<option value="'+i+'"'+s+'>'+i+'\u6708</option>';if(i==mx){return $('<select class="dateselector_month '+conf['class']+'" />').html(ops)}}return null};var days=function(d){var mn=1;var mx=31;var ops='<option value="">\u65e5</option>';for(var i=mn;i<=mx;i++){s=(d==i)?'selected="selected"':'';ops+='<option value="'+i+'"'+s+'>'+i+'\u65e5</option>';if(i==mx){return $('<select class="dateselector_day '+conf['class']+'" />').html(ops)}}return null};this.each(function(){if(!this.tagName.match(/^INPUT$/i)){return false}var $t=$(this).hide();var e,yy,mm,dd;var date=($t.val())?$t.val():conf.date;if(date&&date.match(/^\d{4}-\d{2}-\d{2}$/)){e=date.split('-');yy=Number(e[0]);mm=Number(e[1]);dd=Number(e[2])}else if(date&&date.match(/^\d{4}\/\d{2}\/\d{2}$/)){e=date.split('/');yy=Number(e[0]);mm=Number(e[1]);dd=Number(e[2])}else{if(conf.date=='today'||conf.date=='now'){yy=nowY;mm=nowM;dd=nowD}else{yy='';mm='';dd=''}}var $y=years(yy);var $m=months(mm);var $d=days(dd);$y.change(function(){set($t,$y,$m,$d)});$m.change(function(){set($t,$y,$m,$d)});$d.change(function(){set($t,$y,$m,$d)});if(date){set($t,$y,$m,$d)}var obj=$('<'+(conf.block?'div':'span')+' class="dateselector dateselector_'+$t.attr('name')+'" />').append($y,$m,$d);if(conf.before){$t.before(obj)}else{$t.after(obj)}return true});return this}})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment