jquery-rockdatepicker-mobile.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. /**
  2. * rockdatepicker 时间选择插件-手机版本使用
  3. * caratename:雨中磐石(rainrock)
  4. * caratetime:2017-06-19 21:40:00
  5. * email:admin@rockoa.com
  6. * homepage:www.rockoa.com
  7. */
  8. (function ($) {
  9. js.onchangedate = function(){}; //选择时间回调
  10. function rockdatepicker_mobile(options){
  11. var me = this;
  12. this.marr = [31,28,31,30,31,30,31,31,30,31,30,31];
  13. this.weekarr= ['日','一','二','三','四','五','六'];
  14. //初始化
  15. this.init = function(){
  16. for(var i in options)this[i]=options[i];
  17. this.inputarr = ['year','month','day','hour','miners','miao'];
  18. this.inputkey = ['Y','m','d','H','i','s'];
  19. this.initdevvalue();
  20. this.showtoday();
  21. this.setcontent();
  22. };
  23. this.initdevvalue = function(){
  24. if(this.view=='date')this.format='Y-m-d';
  25. if(this.view=='year')this.format='Y';
  26. if(this.view=='month')this.format='Y-m';
  27. if(this.view=='datetime')this.format='Y-m-d H:i:s';
  28. if(this.view=='time')this.format='H:i:s';
  29. if(this.formats)this.format = this.formats;
  30. var lx = this.format;
  31. if(lx=='H:i:00'||lx=='H:i'||lx=='i:s')this.view='time';
  32. var minv = this.mindate;
  33. if(isempt(minv))minv= '1930-01-01 00:00:00';//最小时间
  34. this.mindate = minv;
  35. var maxv = this.maxdate;
  36. if(isempt(maxv))maxv= '2050-12-31 23:59:59';//最大时间
  37. this.maxdate = maxv;
  38. this.max = this.shijienges(this.maxdate)
  39. this.min = this.shijienges(this.mindate);
  40. };
  41. this.showtoday = function(){
  42. var val = this.value;
  43. if(this.inputid!='')val=$('#'+this.inputid+'').val();
  44. if(this.inputobj)val=this.inputobj.value;
  45. if(this.view.indexOf('date')>-1 && val){
  46. if(!this.isdate(val))val = js.now('now');
  47. }
  48. if(this.view=='time'){
  49. if(val==''){val=js.now('now');}else{val=js.now('Y-m-d')+' '+val;}
  50. }
  51. if(val=='')val = js.now(this.view=='datetime' ? 'Y-m-d H:i:00' : this.format, val);
  52. this.nowtext= val;
  53. this.now = this.shijienges(val);
  54. };
  55. this.isdate = function(sj){
  56. if(!sj)return false;
  57. var bo = /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}/.test(sj);
  58. return bo;
  59. };
  60. this.setcontent=function(){
  61. var h = $('body,html').height();
  62. if(h<winHb())h=winHb();
  63. var s = '<div pickermobile="qx" id="pickermobile_div0" style="background:rgba(0,0,0,0.5);width:100%;height:'+h+'px;z-index:9;position:absolute;text-align:center;left:0px;top:0px">';
  64. var inst = 'background:none;border:none;padding:10px 8px;color:#1389D3;font-size:20px';
  65. s+='</div>';
  66. s+='<div id="pickermobile_div1" style="width:100%;background:white;position:fixed;top:30%;z-index:10;">';
  67. s+='<div style="margin:5px;"><table width="100%"><tr>';
  68. if(this.view != 'time'){
  69. s+=' <td style="padding:5px" align="center">';
  70. s+=' <div><input type="button" value="+" pickermobile="y1" style="'+inst+'"></div>';
  71. s+=' <div><select id="pickermobile_input_year" style="width:100%;height:30px">'+this.selectoption(this.min.Y,this.max.Y,this.now.Y)+'</select></div>';
  72. s+=' <div><input type="button" value="-" pickermobile="y2" style="'+inst+'"></div>';
  73. s+=' </td>';
  74. s+=' <td style="padding:5px" align="center">';
  75. s+=' <div><input type="button" value="+" pickermobile="m1" style="'+inst+'"></div>';
  76. s+=' <div><select id="pickermobile_input_month" style="width:100%;height:30px">'+this.selectoption(1,12,this.now.m)+'</select></div>';
  77. s+=' <div><input type="button" value="-" pickermobile="m2" style="'+inst+'"></div>';
  78. s+=' </td>';
  79. s+=' <td style="padding:5px" align="center">';
  80. s+=' <div><input type="button" value="+" pickermobile="d1" style="'+inst+'"></div>';
  81. s+=' <div><select id="pickermobile_input_day" style="width:100%;height:30px">'+this.selectoption(1,31,this.now.d)+'</select></div>';
  82. s+=' <div><input type="button" value="-" pickermobile="d2" style="'+inst+'"></div>';
  83. s+=' </td>';
  84. s+=' <td>日</td>';
  85. }
  86. if(this.view=='datetime' || this.view=='time'){
  87. s+=' <td style="padding:5px" align="center">';
  88. s+=' <div><input type="button" value="+" pickermobile="h1" style="'+inst+'"></div>';
  89. s+=' <div><select id="pickermobile_input_hour" style="width:100%;height:30px">'+this.selectoption(0,23,this.now.H)+'</select></div>';
  90. s+=' <div><input type="button" value="-" pickermobile="h2" style="'+inst+'"></div>';
  91. s+=' </td>';
  92. s+=' <td>:</td>';
  93. s+=' <td style="padding:5px" align="center">';
  94. s+=' <div><input type="button" value="+" pickermobile="i1" style="'+inst+'"></div>';
  95. s+=' <div><select id="pickermobile_input_miners" style="width:100%;height:30px">'+this.selectoption(0,59,this.now.i)+'</select></div>';
  96. s+=' <div><input type="button" value="-" pickermobile="i2" style="'+inst+'"></div>';
  97. s+=' </td>';
  98. }
  99. s+='</tr>';
  100. s+='</table></div>';
  101. s+='<div style="padding-bottom:20px"><table width="100%"><tr><td width="25%" align="center"><input type="button" value="清空" pickermobile="qk" style="background:none;border:none;padding:5px 10px;color:#888888"></td><td width="25%" align="center"><input type="button" value="现在" pickermobile="now" style="background:none;border:none;padding:5px 10px;color:#1389D3"></td><td width="25%" align="center"><input type="button" value="确定" pickermobile="ok" style="background:none;border:none;padding:5px 10px;color:#1389D3"></td><td width="25%" align="center"><input type="button" value="取消" pickermobile="qx" style="background:none;border:none;padding:5px 10px;color:#888888"></td></tr></table></div>';
  102. s+='</div>';
  103. $('body').append(s);
  104. $('[pickermobile]').click(function(){
  105. var lx = $(this).attr('pickermobile');
  106. me.clickbtn(lx);
  107. });
  108. this._changeday();
  109. $('#pickermobile_input_year').change(function(){
  110. me._changeday();
  111. });
  112. $('#pickermobile_input_month').change(function(){
  113. me._changeday();
  114. });
  115. };
  116. this.shijienges = function(sj){
  117. var Y=2017,m=1,d=17,H=0,i=0,s=0,ss1,ss2,ss3,total=0;
  118. ss1 = sj.split(' ');
  119. ss2 = ss1[0].split('-');
  120. Y = parseFloat(ss2[0]);
  121. if(ss2.length>1)m= parseFloat(ss2[1]);
  122. if(ss2.length>2)d= parseFloat(ss2[2]);
  123. if(ss1[1]){
  124. ss3 = ss1[1].split(':');
  125. H = parseFloat(ss3[0]);
  126. i = parseFloat(ss3[1]);
  127. if(ss3.length>2)s= parseFloat(ss3[2]);
  128. }
  129. total = parseFloat(''+Y+''+this.sa(m)+''+this.sa(d)+''+this.sa(H)+''+this.sa(i)+''+this.sa(s)+'');
  130. return {Y:Y,m:m,d:d,H:H,i:i,s:s,total:total};
  131. };
  132. this._changeday=function(){
  133. var o = get('pickermobile_input_day');
  134. if(!o)return;
  135. var Y = parseFloat(get('pickermobile_input_year').value);
  136. var m = parseFloat(get('pickermobile_input_month').value);
  137. var def= parseFloat(o.value);
  138. var max = me.marr[m-1];//这个月最大天数
  139. if(Y%4==0&&m==2)max=29;//判断是不是轮年
  140. if(def>max)def=max;
  141. o.length = 0;
  142. var oi;
  143. for(var i=1;i<=max;i++){
  144. oi = this.sa(i);
  145. o.options.add(new Option(oi,oi));
  146. }
  147. o.value = this.sa(def);
  148. };
  149. this.cancal=function(){
  150. $('#pickermobile_div0').remove();
  151. $('#pickermobile_div1').remove();
  152. };
  153. this.clickbtn=function(lx){
  154. if(lx=='qx')this.cancal();
  155. if(lx=='y1'||lx=='y2')this.addjian('year', lx, this.min.Y,this.max.Y);
  156. if(lx=='m1'||lx=='m2')this.addjian('month', lx, 1,12);
  157. if(lx=='d1'||lx=='d2')this.addjian('day', lx, 1,31);
  158. if(lx=='h1'||lx=='h2')this.addjian('hour', lx, 0,23);
  159. if(lx=='i1'||lx=='i2')this.addjian('miners', lx, 0,59);
  160. if(lx=='now')this.getnow();
  161. if(lx=='ok')this.queding();
  162. if(lx=='qk')this.clearo();
  163. };
  164. this.addjian=function(inp, lx,min,max){
  165. var jg =1;if(lx.indexOf('2')>0)jg=-1;
  166. var o = get('pickermobile_input_'+inp+'');
  167. if(!o)return;
  168. var ye = parseFloat(o.value);
  169. var jgs= ye+jg;
  170. if(jgs<min)jgs=max;
  171. if(jgs>max)jgs=min;
  172. o.value = this.sa(jgs);
  173. if(inp=='year'||inp=='month')this._changeday();
  174. };
  175. this.queding=function(){
  176. var Y=2017,m=1,d=17,H=16,i=26,s=0,o;
  177. var val = this.format;
  178. o = get('pickermobile_input_year');if(o)Y=o.value;
  179. o = get('pickermobile_input_month');if(o)m=o.value;
  180. o = get('pickermobile_input_day');if(o)d=o.value;
  181. o = get('pickermobile_input_hour');if(o)H=o.value;
  182. o = get('pickermobile_input_miners');if(o)i=o.value;
  183. val = val.replace('Y', this.sa(Y));
  184. val = val.replace('m', this.sa(m));
  185. val = val.replace('d', this.sa(d));
  186. val = val.replace('H', this.sa(H));
  187. val = val.replace('i', this.sa(i));
  188. val = val.replace('s', this.sa(s));
  189. var nobj = false;
  190. if(this.inputid&&get(this.inputid)){
  191. nobj = get(this.inputid);
  192. }
  193. if(this.inputobj){
  194. nobj = this.inputobj;
  195. }
  196. if(nobj){
  197. nobj.value=val;
  198. nobj.focus();
  199. js.onchangedate(nobj.name, nobj, val, this);
  200. }
  201. this.cancal();
  202. };
  203. this.clearo=function(){
  204. var val='',nobj = false;
  205. if(this.inputid&&get(this.inputid)){
  206. nobj = get(this.inputid);
  207. }
  208. if(this.inputobj){
  209. nobj = this.inputobj;
  210. }
  211. if(nobj){
  212. nobj.value=val;
  213. nobj.focus();
  214. js.onchangedate(nobj.name, nobj, val, this);
  215. }
  216. this.cancal();
  217. };
  218. this.sa = function(v){
  219. v = parseFloat(v);
  220. var v1 = ''+v+'';
  221. if(v<10)v1='0'+v+'';
  222. return v1;
  223. };
  224. this.getnow=function(){
  225. var now = this.shijienges(js.now('now')),mon= this.inputarr,mons= this.inputkey,i,o;
  226. for(i=0;i<mon.length;i++){
  227. o = get('pickermobile_input_'+mon[i]+'');
  228. if(o)o.value = this.sa(now[mons[i]]);
  229. }
  230. this.queding();
  231. };
  232. this.selectoption=function(min,max,dev){
  233. var s='',oi,sel;
  234. for(var i=min;i<=max;i++){
  235. oi = this.sa(i);
  236. sel= (dev && oi==this.sa(dev))?'selected':'';
  237. s='<option '+sel+' value="'+oi+'">'+oi+'</option>'+s+'';
  238. }
  239. return s;
  240. }
  241. };
  242. $.rockdatepicker_mobile = function(options){
  243. var defaultVal = {
  244. itemsclick:function(){},onshow:function(){},
  245. inputid:'',
  246. value:'',inputobj:false,
  247. format:'Y-m-d',view:'datetime'
  248. };
  249. var can = $.extend({}, defaultVal, options);
  250. var aobj = new rockdatepicker_mobile(can);
  251. aobj.init();
  252. return aobj;
  253. };
  254. })(jQuery);