浏览 5084 次
锁定老帖子 主题:页面上一个日期计算的小东东
精华帖 (0) :: 良好帖 (0) :: 新手帖 (5) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-07-30
最后修改:2010-07-31
_time_period.html.erb <% prefix << '_' unless prefix.blank? %> <a onclick="$('<%= prefix %>unequal').style.display=($('<%= prefix %>unequal').style.display=='none' ? '' : 'none');$('<%= prefix %>widget').style.display='none';$('<%= prefix %>change_type').value = '';$('<%= prefix %>_num').value='';$('<%= prefix %>time_type').value='';$('#<%= prefix %>big').value = '';$('<%= prefix %>less').value='';" >Range</a> <a onclick="$('<%= prefix %>widget').style.display=($('<%= prefix %>widget').style.display=='none' ? '' : 'none');$('<%= prefix %>unequal').style.display='none';$('<%= prefix %>big').value = '';$('<%= prefix %>less').value='';$('<%= prefix %>change_type').value = '';$('<%= prefix %>time_num').value='';$('<%= prefix %>time_type').value='';" >Calc</a><span> = <%= calendar_date_select_tag("#{prefix}equal",nil,:style => "width: 80px;",:embedded => false,:year_range => 30.years.ago..-30.years.ago) %> </span><span id='<%= prefix %>unequal' style='display: none;'>> <%= calendar_date_select_tag("#{prefix}big",nil,:style => "width: 80px;",:embedded => false,:year_range => 30.years.ago..-30.years.ago) %> < <%= calendar_date_select_tag("#{prefix}less",nil,:style => "width: 80px;",:embedded => false,:year_range => 30.years.ago..-30.years.ago ) %> </span> <span id='<%= prefix %>widget' style='display:none;'> <script type="text/javascript"> var equal = $('<%= prefix %>equal'); var change_type = $('<%= prefix %>change_type'); var time_num = $('<%= prefix %>time_num'); var time_type = $('<%= prefix %>time_type'); equal.observe('change', function(event){ count_date(); }); change_type.observe('change', function(event){ count_date(); enter_equal(); }); time_num.observe('change', function(event){ count_date(); enter_equal(); }); time_type.observe('change', function(event){ count_date(); enter_equal(); }); function enter_equal(){ if($F('<%= prefix %>equal')==''){alert('Please enter a date first!');} } function count_date(){ if((!equal.value.blank()) && (!change_type.value.blank()) && (!time_num.value.blank()) && (!time_type.value.blank())){ var time_num_number = Number(time_num.value); if (/^\d+$/.test(String(time_num.value)) && IsDate(equal.value)) { var r = equal.value.match(/^(\d{1,4})([-|\/])(\d{1,2})\2(\d{1,2})$/); var year = Number(r[1]); var month = Number(r[3]); var day = Number(r[4]); if(time_type.value == 0){ $('<%= prefix %>result').value = equal.value; } else { if(change_type.value == 'plus' && time_type.value == 'days'){ day = day + time_num_number; } else if (change_type.value == 'plus' && time_type.value == 'months') { month = month + time_num_number; } else if (change_type.value == 'plus' && time_type.value == 'years'){ year = year + time_num_number; } else if (change_type.value == 'minus' && time_type.value == 'days'){ day = day - time_num_number; } else if (change_type.value == 'minus' && time_type.value == 'months'){ month = month - time_num_number; } else if (change_type.value == 'minus' && time_type.value == 'years'){ year = year - time_num_number; } var result = correct_date(Number(year),Number(month),Number(day)); $('<%= prefix %>result').value = result; } } else { $('<%= prefix %>result').value = ''; } } else { $('<%= prefix %>result').value = ''; } } </script> <select id='<%= prefix %>change_type' style='width: 80px;'> <option value=''>(+/-)</option> <option value='plus'>+</option> <option value='minus'>-</option> </select> <%= text_field_tag("#{prefix}time_num",nil,:style => 'width: 80px;' ) %> <select id='<%= prefix %>time_type' style='width: 80px;' > <option value=''>(d/m/y)</option> <option value='days'>Days</option> <option value='months'>Months</option> <option value='years'>Years</option> </select> <input type='text' readonly='readonly' id='<%= prefix %>result' value='' size=10 /> </span> <%= render :partial => 'time_period',:locals => { :prefix => ''} %> //匹配//yyyy-mm-dd || yyyy/mm/dd function IsDate(str) { var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); if(r==null)return false; var d = new Date(r[1], r[3]-1, r[4]); return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]); } //修正日期 //这里一直想不到很好的实现方法 function correct_date(year,month,day){ var stand_day = day_max(year,month); if(day > stand_day){ day = day - stand_day; month = month + 1; } if(month > 12){ month = month - 12; year = year + 1; } if(day <= 0){ var last_stand_day = day_max(year, month - 1); month = month - 1; day = day + last_stand_day; } if(month <= 0){ month = month + 12; year = year - 1; } if(year <= 0){ alert('invalid year!'); return false; } var str_month = (month >= 10) ? String(month) : '0'+ String(month); var str_day = (day >= 10) ? String(day) : '0'+ String(day); var str = String(year)+'-'+str_month+'-'+str_day; if(IsDate(str)){ return str; } else { return correct_date(year,month,day); } } //当月的最大日期 function day_max(year,month){ if(month==4 || month==6 || month==9 || month==11){ return 30; } else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){ return 31; } else { if(isleap(year)){ return 29; } else { return 28; } } } //是否是闰年 function isleap(year){ return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)) } 关于这段js代码,其实一直在后台有ruby实现的,相对而言,简单很多 if params[:change_type] == "plus" date = params[:equal].to_date + params[:time_num].to_i elsif params[:change_type] == "minus" date = params[:equal].to_date - params[:time_num].to_i end if params[:change_type] == "plus" date = date.months_since(params[:time_num].to_i) elsif params[:change_type] == "minus" date = date.months_ago(params[:time_num].to_i) end 但是考虑到,如果用js的话,可以避免多余的和后台通信,而且以后复用的话,不用在加很多代码。 关于这段js日期计算,冥冥之中感觉应该还有比较更好的写法,对js日期这块不熟悉,希望有经验的能提出意见。 就是他了,year,month,day在这里其实每次只有一个值在变,但是变化的范围不确定。 //修正日期 function correct_date(year,month,day){ var stand_day = day_max(year,month); if(day > stand_day){ day = day - stand_day; month = month + 1; } if(month > 12){ month = month - 12; year = year + 1; } if(day <= 0){ var last_stand_day = day_max(year, month - 1); month = month - 1; day = day + last_stand_day; } if(month <= 0){ month = month + 12; year = year - 1; } if(year <= 0){ alert('invalid year!'); return false; } var str_month = (month >= 10) ? String(month) : '0'+ String(month); var str_day = (day >= 10) ? String(day) : '0'+ String(day); var str = String(year)+'-'+str_month+'-'+str_day; if(IsDate(str)){ return str; } else { return correct_date(year,month,day); } } 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-07-30
LZ的方法语法不够优美
|
|
返回顶楼 | |
发表时间:2010-07-30
最后修改:2010-07-30
Soloara 写道 LZ的方法语法不够优美
方法语法?你指的是help?请明示。谢谢 |
|
返回顶楼 | |
发表时间:2010-07-31
为啥不用模板哪?直接拼字符串可真难维护。
|
|
返回顶楼 | |
发表时间:2010-07-31
最后修改:2010-07-31
鹤惊昆仑 写道 为啥不用模板哪?直接拼字符串可真难维护。
恩,没注意到 。。。我改下。。。 顺便把页面html里的几个相同的js代码也拿出来放一起。 因为有部分代码是旧有的,所以代码风格看上去有点窘。 |
|
返回顶楼 | |
发表时间:2010-07-31
发现je一个bug,我代码贴上去是
yearyear = year - time_num_number; 但是我实际上代码是 year = year - time_num_number; 不信你贴下来看看。。 |
|
返回顶楼 | |