CODEWITHSUNDEEP
javascriptoracle-databaseplsqloracle-apex
Vuu
Vuu

Reputation: 1

Oracle APEX dynamically set item value on a datepicker

I am working on an Oracle APEX application where I need to dynamically format a user’s input in a Date Picker item. The desired behavior is:

When the user types 20022025 (for example), the item should automatically reformat it to 20.02.2025 (i.e., DD.MM.YYYY) upon losing focus. If a date is selected using the date picker, the value should remain unchanged. The format mask for the Date Picker is already set to DD.MM.YYYY. Version:Oracle APEX 22.1.7

What I have tried:

//PL/SQL Dynamic Action
declare
begin
  SELECT TO_CHAR(TO_DATE(:BIRTH_DATE, 'DDMMYYYY'), 'DD.MM.YYYY') 
    INTO :BIRTH_DATE
    FROM DUAL;
end;

//PL/SQL with Conditional Formatting
declare
  v_formatted_date varchar2(10);
begin
  if regexp_like(:BIRTH_DATE, '^\d{8}$') then
    v_formatted_date := substr(:BIRTH_DATE, 1, 2) || '.' || 
                        substr(:BIRTH_DATE, 3, 2) || '.' || 
                        substr(:BIRTH_DATE, 5, 4);
  end if;
  :BIRTH_DATE:= v_formatted_date;
end;

//JavaScript Dynamic Action
var pid = $(this.triggeringElement).attr("id");
var value = apex.item(pid).getValue(); 
console.log("value:", value);

if (/^\d{8}$/.test(value)) {
  var formattedValue = value.substring(0, 2) + '.' + 
                       value.substring(2, 4) + '.' + 
                       value.substring(4);
  console.log("Formatted value:", formattedValue);
  apex.item(pid).setValue(formattedValue);
}

//Set Value Action with PL/SQL Function Body
declare
begin
  IF REGEXP_LIKE(:BIRTH_DATE, '^\d{8}$') THEN
    SELECT TO_CHAR(TO_DATE(:BIRTH_DATE, 'DDMMYYYY'), 'DD.MM.YYYY') 
      INTO :BIRTH_DATE
      FROM DUAL;
  end if;
end;

Upvotes: 0

Views: 33

Answers (1)

Koen Lostrie
Koen Lostrie

Reputation: 18565

This can be done with a simple dynamic action. Tested on 24.2 but this should work on older versions too.

Example:

Page Item
  • Page item P287_DATE_3
  • Type Date Picker
  • format mask DD.MM.YYYY
  • Everything else left default.
Dynamic Action
  • Event: Change
  • Item P287_DATE_3
Action
  • Type "Execute Server-side Code"
  • Items to Submit: P287_DATE_3
  • Items to Return: P287_DATE_3
  • Suppress Change Event: On

enter image description here

Source:


DECLARE
    l_date_fmt CONSTANT VARCHAR2(20) := 'DD.MM.YYYY';
    l_date_fmt_short CONSTANT VARCHAR2(20) := 'DDMMYYYY';
    FUNCTION is_valid_date (date_i VARCHAR2, format_mask_i VARCHAR2) RETURN BOOLEAN
    IS
      l_date DATE;
    BEGIN
        -- use the "fx" format exact modifier
        l_date := TO_DATE(date_i,'fx'||format_mask_i);
        RETURN true;
    EXCEPTION WHEN OTHERS THEN
        RETURN false;
    END;
BEGIN
    IF is_valid_date(:P287_DATE_3,l_date_fmt) 
    THEN  
        -- do nothing. Date is already in expected format
        NULL;
    ELSIF is_valid_date(:P287_DATE_3,l_date_fmt_short) THEN   
        -- valid date in DDMMYYY format. Convert.
        :P287_DATE_3 := TO_CHAR(TO_DATE(:P287_DATE_3,l_date_fmt_short),l_date_fmt);
    ELSE
        --invalid date, set to NULL since that cannot be passed to datepicker item
        :P287_DATE_3 := NULL;
    END IF;
END;

Upvotes: 0

Related Questions