页面使用的是elementui中datepicker组件
<el-form-item label='Start Time:'>
<el-date-picker
v-model="starttime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label='End Time:'>
<el-date-picker
v-model="endtime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
效果
前端axios接口
<script>
export default {
data() {
return {
//时间选择范围
starttime:"",
endtime:"",
}
}
methods:{
// 获取ticket页面的表格数据
getTicket(){
let that = this
var timeRange={
"starttime":that.starttime,
"endtime":that.endtime,
}
that.$axios
.post(that.URL,timeRange)
.then(function(res){
if(res.data.success){
that.ticket=res.data.data;
that.$message({
message: '数据加载成功!',
type: 'success'});
}else{
// 失败的提示
that.$message.error(res.data.msg);
}
})
.catch(function(err){
console.log(err);
})
},
}
</script>
后端使用的是django框架
class Getticketinfo(View):
def post(self, request):
res = []
q_objects = Q()
kwargs = {}
data = json.loads(request.body.decode())
start_time = data.get('starttime','')
if start_time is None:
end_time = data.get('endtime','')
if end_time == '':
# 如果开始时间为空,那么结束时间就往后顺一天,因为django只能过滤时间范围内的数据
end_time = (datetime.datetime.now() + relativedelta(days=1)).strftime('%Y-%m-%d')
kwargs['submitted_time__lte'] = end_time
# if start_time is not null ,then start_time < 'date range' < end_time
else:
end_time = data.get('endtime','')
if end_time == '':
end_time = (datetime.datetime.now() + relativedelta(days=1)).strftime('%Y-%m-%d')
kwargs['submitted_time__range'] = [start_time, end_time]
else:
s = time.strptime(end_time,'%Y-%m-%d')
end_time = (datetime.datetime(*s[:3]) + relativedelta(days=1)).strftime('%Y-%m-%d')
kwargs['submitted_time__range'] = [start_time, end_time]
try:
ticket_query = Ticket.objects.filter(q_objects,**kwargs).order_by('-submitted_time')[:500]
id_list = []
for ticket_obj in ticket_query:
res_tree = {}
res_tree['submitted_time'] = ticket_obj.submitted_time.strftime('%Y-%m-%d %H:%M:%S')
res.append(res_tree)
except:
s_error_log = str(sys.exc_info())
return HttpResponse(json.dumps({'success':False , 'info':s_error_log}), content_type="application/json")
return HttpResponse(json.dumps({'success':True,'Count':ticket_query.count(),'data':res}), content_type="application/json")
效果展示
实现这个功能不止这一个时间条件,而且可能这种方法有点麻烦,后面能优化的话再记录