問題背景
通常，在業(yè)務(wù)開發(fā)中邦鲫，我們經(jīng)常會碰到這樣的需求灸叼。通過前臺控制子頁面的日期選擇范圍限定在父頁面的日期選擇的區(qū)間內(nèi)。就像如下這個例子一樣掂碱，采購員授權(quán)明細(xì)界面的起始日期怜姿、失效日期可選擇的值要限定在采購員tab頁的授權(quán)起始日期和授權(quán)終止日期所限定的區(qū)間內(nèi)。
要達(dá)到這種效果疼燥，一般的實現(xiàn)思路是這樣：
1.封裝一個方法openPurAuthDetail(e,startDate,endDate)沧卢，在方法中用kendoWindow來打開明細(xì)頁面，并將授權(quán)起始日期和授權(quán)終止日期傳到明細(xì)頁面醉者。
function openPurAuthDetail(e,startDate,endDate) {
var authDetail = $("#auth-detail-purchaser").kendoWindow({
actions: ["Close"],
width: 700,
height: 300,
title: "采購員"+'<@spring.message "gxp.cus.authdetail"/>',
visible: false,
iframe: true,
modal: true,
content: '${base.contextPath}/gxp/entp/tab/gxp_entp_purchaser_auth.html?startDate='+startDate+'&endDate='+endDate,
}).data("kendoWindow");
authDetail.maximize();
authDetail.center().open();
};
2.在grid的columns的授權(quán)明細(xì)列中將openPurAuthDetail添加為點擊事件
{
title:"授權(quán)明細(xì)",
width: 120,
headerAttributes: {
style: "text-align: center"
},
attributes: {style: "text-align:center;white-space:nowrap;text-overflow:ellipsis;"},
template:function (item) {
var v = "<a id='purchaserAuth' onclick='openPurAuthDetail(event"+",\""+item.authStartDate+"\",\""+item.authEndDate+"\")' class='btn btn-primary k-grid-view'><i class='fa fa-eye'></i> 授權(quán)明細(xì)</a>";
if(!item.purchaserId){
v = "";
}
return v;
}
}
3.在授權(quán)明細(xì)界面收startDate和endDate（此時startDate和endDate均為字符串類型）但狭，然后通過new Date將startDate和endDate轉(zhuǎn)為Date類型，并設(shè)置到kendoDatePicker的min撬即、max配置中立磁。
var startDate = '${RequestParameters.startDate}';
var endDate = '${RequestParameters.endDate}';
...
{
field:'startDate',
title:'<@spring.message "gxp.cus.startdate"/>',
headerAttributes: {
style: "text-align: center"
},
attributes: {style: "white-space:nowrap;text-overflow:ellipsis;"},
format: "{0:yyyy-MM-dd}",
width:120,
editor: function(container, options){
//獲得到期時間
var end = options.model.endDate;
var opts={
format:"yyyy-MM-dd"
}
if(end){
opts.max=end;
}
if(startDate!="null"&&startDate!="")
{
opts.min=new Date(startDate);
}
if(endDate!="null"&&endDate!="")
{
var endDateTem=new Date(endDate);
if(end){
endDateTem=end<endDateTem?end:endDateTem;
}
opts.max=endDateTem;
}
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker(opts);
}
},
{
field:'endDate',
title:'<@spring.message "gxpentpproperty.enddate"/>',
headerAttributes: {
style: "text-align: center"
},
attributes: {style: "white-space:nowrap;text-overflow:ellipsis;"},
format: "{0:yyyy-MM-dd}",
width:120,
editor: function(container, options){
//獲得開始時間
var start = options.model.startDate;
var opts={
format:"yyyy-MM-dd",
}
if(start){
opts.min=start;
}
if(startDate!="null"&&startDate!="")
{
var startDateTem = new Date(startDate);
if(start){
startDateTem=start<startDateTem?startDateTem:start;
}
opts.min=startDateTem;
}
if(endDate!="null"&&endDate!="")
{
opts.max=new Date(endDate);
}
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker(opts);
}
},
問題描述
通過以上方法實現(xiàn)的效果只能在chrome中顯示，在Firefox和Edge中均不能顯示
打開調(diào)試器剥槐，發(fā)現(xiàn)startDate從字符串轉(zhuǎn)成Date類型時出現(xiàn)了錯誤唱歧，只有chrome能正常解析
解決方法
將傳遞到明細(xì)頁面的日期的格式轉(zhuǎn)換成chrome、Firefox、Edge都能解析的格式（如“yyyy-MM-dd”）即可
在hap框架中颅崩，就有這樣的方法
那么几于，只需要在傳遞日期時，調(diào)用這個方法即可
onclick='openPurAuthDetail(event"+",\""+Hap.formatDate(item.authStartDate)+"\",\""+Hap.formatDate(item.authEndDate)+"\")' class='btn btn-primary k-grid-view'><i class='fa fa-eye'></i> 授權(quán)明細(xì)</a>";
