1.1 版本

1.2 应用场景

报表需要查看时间段的数据

1.3 功能介绍

需求:PC端报表需要查看某个时间段的数据,但是不能超过指定的天数,如果超过天数或者结束时间大于开始时间则给予用户友好提示

2.1 操作步骤

1. 创建日期组件,开始时间start_time和结束时间end_time

2. 开始时间组件控制值编写公式:DATEINMONTH(TODAY(),1)

   3. 结束时间组件控件值编写公式:TODAY()

   4.添加查询按钮并添加点击事件 代码如下:

var start = this.options.form.getWidgetByName("start_time").getValue();  
var end = this.options.form.getWidgetByName("end_time").getValue();      
window.alert = alert;    function alert(data, callback) { 
//回调函数        
var alert_bg = document.createElement('div');        
alert_box = document.createElement('div'),            
alert_text = document.createElement('div'),            
alert_btn = document.createElement('div'),            
textNode = document.createTextNode(data ? data : ''),            
btnText = document.createTextNode('确 定');        
// 控制样式        
css(alert_bg, {            
'position': 'fixed',            
'top': '0',            
'left': '0',            
'right': '0',            
'bottom': '0',            
'background-color': 'rgba(0, 0, 0, 0.1)',            
'z-index': '999999999'        
});        
css(alert_box, {            
'width': '270px',            
'max-width': '90%',            
'font-size': '16px',            
'text-align': 'center',            
'background-color': '#fff',            
'border-radius': '15px',            
'position': 'absolute',            
'top': '50%',            
'left': '50%',            
'transform': 'translate(-50%, -50%)'        
});        
css(alert_text, {            
'padding': '10px 15px',            
'border-bottom': '1px solid #ddd'        
});        
css(alert_btn, {            
'padding': '10px 0',            
'color': '#007aff',            
'font-weight': '600',            
'cursor': 'pointer'        
});        
// 内部结构套入        
alert_text.appendChild(textNode);        
alert_btn.appendChild(btnText);        
alert_box.appendChild(alert_text);        
alert_box.appendChild(alert_btn);        
alert_bg.appendChild(alert_box);        
// 整体显示到页面内        
document.getElementsByTagName('body')[0].appendChild(alert_bg);        
// 确定绑定点击事件删除标签        
alert_btn.onclick = function() {            
alert_bg.parentNode.removeChild(alert_bg);            
if (typeof callback === 'function') {                
callback(); //回调            
}        
}    
}    
function css(targetObj, cssObj) {        
var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';        
for (var i in cssObj) {            
str += i + ':' + cssObj[i] + ';';        
}        
targetObj.style.cssText = str;    
}	
var starttime = this.options.form.getWidgetByName("start_time").getValue();  			
var time = starttime.substring(1,4);			
var Year = new Date().getFullYear(), s = 0, d;                
for (var i = 1; i < 13; i++) {                    
d = new Date(time, i, 0);                    
s += d.getDate();                
};
if( start == "" || start==null){  
//判断开始日期是否为空  alert("开始时间不能为空!");   
//开始日期参数为空时提示  
return false;  
};  
if(end == "" || end==null){  
//判断结束日期是否为空  
alert("结束时间不能为空!");   
//结束日期参数为空时提示  
return false;  
};  
if( start > end){   
//判断开始日期是否大于结束日期  
alert("开始时间不能大于结束时间!");   
//开始日期大于结束日期时提示    
return false;  
}
var startdate = new Date(start);   
//将开始日期转化为Date型
var enddate = new Date(end);    
//将结束日期转化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24);   
//将两个日期相减得出的毫秒数转化为天数
if(subdate >= 31){    
//判断结束日期是否超过开始日期后一年alert("请输入31天以内的时间!");    
//结束日期超过开始日期后的十五天时提示return false;
} 

2.2 效果查看

WorkBook6.cpt

App端需更改Js代码

 App端连接:移动端日期筛选控制