javascript - ORACLE APEX 5.0 中表格形式的动态计算和验证

Question

我正在 oracle apex 中构建表格表单，我需要在其中验证开始日期 和结束日期。

开始日期和结束日期我都有表格形式的日期选择器字段，开始日期不应接受小于 45 的日期距系统日期(今天的日期)的天数，并且不应大于系统日期。

即使我将开始日期设置为今天，我仍然收到错误消息。当 start_date 小于(今天的日期 - 45 天)时，我需要警报

我使用的是ORACLE APEX 5.0版本

我在页面上的“函数和全局变量声明”部分定义了这个函数:

function f_validate_sd(pThis) { 

  var row_id      = pThis.id.substr(4);  
  var start_date  = $('#f10_'+row_id).val();
  //var end_date    = $('#f11_'+row_id).val();


 var currentDate = new Date();
 var dy          = currentDate.getDate();
 var month       = currentDate.getMonth() + 1;
 var year        = currentDate.getFullYear();
 var sd          = (  dy + "-" + month + "-" + year);

 var subdate     = new Date(sd); 
 var numberOfDaysToAdd = 45;
 subdate.setDate(subdate.getDate() - numberOfDaysToAdd );
 var dd          = subdate.getDate();
 var mm          = subdate.getMonth() + 1;
 var yy          = subdate.getFullYear();
 var sub         = ( dd + "-" + mm + "-" + yy );

alert(start_date);
    alert(sub);
alert(start_date - sub );
    alert(sd);

if(start_date < sub  ) {
                 alert("START DATE should be within 45 days from todays date");
                 $('#f10_'+row_id).val(" ");}
}

在表格形式中，我通过将其添加到“START_DATE”列的“自定义属性”字段来调用此函数:

onchange="javascript:f_validate_sd(this);"

当我运行我的页面并更改日期时，消息“NaN”作为第三个警报。

我在这里设置了一个示例应用程序: DEMO

您可以使用这些凭据在 apex.oracle.com 上查看它:

工作区:APEX_CHECKBOX
用户名:appuser
PWD:演示

Answer 1

定义检查:
在 JavaScript 中使用一些真实的日期算法。

页面>函数和全局变量声明

我已经修改了我在之前的回答中使用的一些代码:Comparing dates using Dynamic Action on DatePicker Oracle Apex

function isBetweenNowAnd(pDateItem, pRange){  
  function getRange(pRange){ 
    var future = new Date();
    future.setDate(future.getDate() + pRange);
    return future;
  };

  function cutTime(pDate){
    return new Date(pDate.getFullYear(), pDate.getMonth(), pDate.getDate());
  };

  // check if pDateItem leads to a selection
  // check if it is a datepicker
  // check if a date has been selected
  // if pRange is at least a number
  if ( $(pDateItem).length 
       && $(pDateItem).data("datepicker")
       && $(pDateItem).datepicker("getDate") !== null 
       && parseInt(pRange) !== "NaN"
     ) 
  {        
    var future = getRange(pRange);
    var check = $(pDateItem).datepicker("getDate");
    var one = cutTime(check);
    var two = cutTime(future);

    return one <= two;
  };
  return false;
}

我真的很讨厌使用“onxxx”属性。这只是您自己的应用程序中的混淆。如果您不知道如何使用 javascript 或 jQuery，请继续阅读，而不是使用这些烦人的属性。
此动态操作将在开始日期更改时触发，并且只会在满足表达式中的条件时触发真正的操作:项目不为空(当用户空白选择时不触发)并且日期超出45 天限制。
第一个操作然后显示警报，第二个操作将清空该字段。

动态 Action - 检查边界

• 事件:变化
• 选择类型:jQuery 选择器
• jQuery 选择器:td[headers=START_DATE] input.hasDatepicker
• 条件:JavaScript 表达式
• 表达式:!apex.item(this.triggeringElement).isEmpty() &&
!isBetweenNowAnd(this.triggeringElement, 45)

真实 Action :

操作 1:警报

• 文本:开始日期必须在今天的 45 天内!
• 在页面加载时触发:否

操作 2:设置值

• 集合类型:JavaScript 表达式
• 表达式:""
• 抑制更改事件:是
• 在页面加载时触发:否
• 受影响的元素:触发元素

---

用户体验:不要让用户通过用户界面选择今天+ 45 之后的日期作为开始在以前的 DA 中，您可以阻止对项目进行手动更改(不使用弹出窗口更改日期文本)以及 UI 上的选择，但您也可以在日期选择器中禁用不适用的日期。
此 DA 将在表格形式(例如分页)刷新后以及页面加载时触发。它将设置日期选择器的最大可选日期。

动态 Action - 检查边界

• 事件:刷新后
• 选择类型:地区
• 地区:(选择表格形式地区)

Action :执行 JavaScript

• 代码:

  $("td[headers=START_DATE] input.hasDatepicker").each(function(){
    $(this).data("datepicker").settings.maxDate = "+45"; 
  })
  

• 没有受影响的元素

• 在页面加载时触发:是

(有人想知道为什么我不直接调用 $("...").datepicker("option","maxDate","+45") :这会扰乱日期选择器在通用主题中的视觉效果，因为它会从对话框按钮中删除类)

---

请注意 JavaScript 可以被规避。操作日期并能够保存它并不难。但是，尝试添加服务器验证并没有实际用处，因为您只能指定“用于创建和修改的行”——这将触发对所述记录上的非相关更改。但是你应该知道。如果您的表上有该审计列，您可以使用验证来检查日期与记录的“创建”日期。

---

我已经在“第 3 页 - 更新 TOM”中的链接应用程序中构建了这些东西，因此您可以在那里查看。