如何使用ext的时间选择控件加上sqlserver实现时间段的查询
1个回答
展开全部
官方给出解决方案如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced VType Examples</title>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.0/bootstrap.js"></script>
<script type="text/javascript">
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);
if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
return true;
},
daterangeText: 'Start date must be less than end date'
});
/*
* ================ Date Range =======================
*/
var dr = Ext.create('Ext.FormPanel', {
renderTo: 'dr',
frame: true,
title: 'Date Range',
bodyPadding: '5px 5px 0',
width: 350,
fieldDefaults: {
labelWidth: 125,
msgTarget: 'side',
autoFitErrors: false
},
defaults: {
width: 300
},
defaultType: 'datefield',
items: [
{
fieldLabel: 'Start Date',
name: 'startdt',
id: 'startdt',
vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
},
{
fieldLabel: 'End Date',
name: 'enddt',
id: 'enddt',
vtype: 'daterange',
startDateField: 'startdt' // id of the start date field
}
]
});
});
</script>
<style type="text/css">
#dr, #pw {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="dr">
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced VType Examples</title>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.0/bootstrap.js"></script>
<script type="text/javascript">
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);
if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
return true;
},
daterangeText: 'Start date must be less than end date'
});
/*
* ================ Date Range =======================
*/
var dr = Ext.create('Ext.FormPanel', {
renderTo: 'dr',
frame: true,
title: 'Date Range',
bodyPadding: '5px 5px 0',
width: 350,
fieldDefaults: {
labelWidth: 125,
msgTarget: 'side',
autoFitErrors: false
},
defaults: {
width: 300
},
defaultType: 'datefield',
items: [
{
fieldLabel: 'Start Date',
name: 'startdt',
id: 'startdt',
vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
},
{
fieldLabel: 'End Date',
name: 'enddt',
id: 'enddt',
vtype: 'daterange',
startDateField: 'startdt' // id of the start date field
}
]
});
});
</script>
<style type="text/css">
#dr, #pw {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="dr">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
