javascript - Dynamic calculations and validation in tabular form in ORACLE APEX 5.0 -

i building tabular form in oracle apex need validate start date , end date.

i have date picker field in tabular form both start date , end date , start date should not accept date less 45 days system date(today's date) , should not greater system date.

i getting error though have given start date today's date. need alert, when start_date less (today's date - 45 days)

i using oracle apex 5.0 version

on page have defined function in "function , global variable declaration" section:

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 within 45 days todays date");                  $('#f10_'+row_id).val(" ");} } 

in tabular form call function having add "custom attributes" field of "start_date" column:

onchange="javascript:f_validate_sd(this);" 

when run page , change date, message "nan" third alert.

i've set example application here: demo

you can check on apex.oracle.com using these credentials:

workspace: apex_checkbox
username: appuser
pwd: demo

defining check:
use real date arithmetic in javascript.

page > function , global variable declaration

i've modified of code i've used in previous answer: 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 selection   // check if datepicker   // check if date has been selected   // if prange @ least number   if ( $(pdateitem).length         && $(pdateitem).data("datepicker")        && $(pdateitem).datepicker("getdate") !== null         && parseint(prange) !== "nan"      )    {             var future = getrange(prange);     var check = $(pdateitem).datepicker("getdate");     var 1 = cuttime(check);     var 2 = cuttime(future);      return 1 <= two;   };   return false; } 

i hate using "onxxx" attributes. obfuscation within own application. if don't know how use javascript or jquery read instead of going easy way out these annoying attributes.
dynamic action fire on change of start date, , fire true actions when condition in expression fulfilled: item not empty (don't fire when user blanks selection) , date beyond 45 day limit.
first action shows alert, , second action blank out field.

dynamic action - check bounds

• event: change
• selection type: jquery selector
• jquery selector: td[headers=start_date] input.hasdatepicker
• condition: javascript expression
• expression: !apex.item(this.triggeringelement).isempty() && !isbetweennowand(this.triggeringelement, 45)

true actions:

action 1: alert

• text: start date has within 45 days of today!
• fire on page load: no

action 2: set value

• set type: javascript expression
• expression: ""
• suppress change event: yes
• fire on page load: no
• affected elements: triggering element

---

ux: don't let users select date past today + 45 through ui start with previous da block manual changes on item (changing date text not using popup) , selections on ui, can disable non-applicable dates in datepicker.
da fire after refresh of tabular form (eg pagination) , on page load. set maximum selectable date of datepicker.

dynamic action - check bounds

• event: after refresh
• selection type: region
• region: (select tabular form region)

action: execute javascript

• code:

  $("td[headers=start_date] input.hasdatepicker").each(function(){   $(this).data("datepicker").settings.maxdate = "+45";  }) 

• no affected elements

• fire on page load: yes

(anyone wondering why i'm not using direct call $("...").datepicker("option","maxdate","+45") : messes datepicker's visuals in universal theme removes classes dialog button)

---

take in account javascript can circumvented. it's not hard manipulate date , able save it. however, it's no real use trying add server validation can specify "for created , modified rows" - trigger validation non-related change on said record. should aware. use validation checks date versus "creation" date of record if have audit column on table.

---

i've built these things in linked application in "page 3 - update tom" can check there.