Finalidad: centralizar la llamada al formateo mediante el uso de los oyentes de Jquery.

Funcionalidad: Formateo y autocompletado luego de escribir fragmento o totalidad de la fecha.

1. Debemos establecer todos nuestros items de tipo DatePicker: ( Template Opcional ).

2. 

   

   Al inspeccionar la página para ver cómo APEX genera los items vemos una clase en común para todos ellos que es el de datepicker*.*

3. 

   Utilizando la función de escucha focusout de Jquery podemos utilizar de forma controlada el cambio y con un proceso de base de datos generamos una lógica de formatos para nuestras fechas.

   1. AJAX process

   2. 

      formatDate contiene una función empaquetada que realiza el formato:

   3.  declare
       l_fecha  varchar2(255 char);
       begin
         l_fecha := apex_application.g_x01;
      
         l_fecha := format_date( i_fecha => l_fecha );
      
         apex_json.open_object;
             apex_json.write(p_name => 'ind_error', p_value => 0);
             apex_json.write(p_name => 'l_fecha', p_value => l_fecha);
         apex_json.close_object;
       exception
         when others then
             apex_json.open_object;
                 apex_json.write(p_name => 'ind_error', p_value=> 1);
                 apex_json.write(p_name => 'mensaje', p_value=> replace( replace(sqlerrm, 'ORA-20000:',''), 'ORA-01847:', '' ));
             apex_json.close_object;
       end;
      

   4.  function format_date(
           i_fecha in varchar2
         ) return varchar2
         deterministic
         is
           /*
             author  : @PabloACespedes \(^-^)/
             modified : 20/01/2023 13:06:44
             code refactor
           */
           v_fecha        varchar2(10);
           v_fecha_aux    varchar2(100);
           v_fecha_actual varchar2(10);
         begin
           if regexp_replace(i_fecha, '[^0-9]') is null then
             v_fecha := to_char(sysdate, 'DD/MM/YYYY');
             return v_fecha;
           end if;
      
           v_fecha_aux := regexp_replace(i_fecha, '[^0-9]');
      
           if length(v_fecha_aux) = 1 then
             v_fecha_aux := '0' || v_fecha_aux;
           end if;
      
           v_fecha_actual := to_char(sysdate, 'DDMMYYYY');
      
           v_fecha := v_fecha_aux || substr(v_fecha_actual, length(v_fecha_aux) + 1, 10);
      
           if to_number(substr(v_fecha, 3, 2)) > 12 then
             raise_application_error(-20000, 'El mes se ingresa desde el 1 hasta el 12!');
           end if;
      
           v_fecha := to_date(v_fecha, 'DD/MM/YYYY');
      
           return v_fecha;
      
         end format_date;
      

   5. Una vez definida nuestra estructura de formato vamos al front, dentro de las declaraciones globales realizamos dos funciones para nuestros "cambios" en las fechas

       function formatDate({date}){
          // recibimos el nombre del item de fecha en el parametro date
           apex.server.process('formatDate',
           {
             // enviamos el valor del item enviado
             x01: apex.item( date ).getValue()
           }
           , {success: function(pData){
                // si existe algun inconveniente mostramos un ALERT de APEX
                if (pData.ind_error == 1){
                  apex.message.alert( pData.mensaje, () => apex.item( date ).setValue('') );
                } else {
                  // si no hubo inconvenientes seteamos el valor del item del parametro date
                  apex.item( date ).setValue( pData.l_fecha );
               }
              } 
             }
           );
       }
       // escuchamos los cambios de las clases datepicker
       // llamamos al formateo por su ID, que es el nombre del item
       $( '.datepicker' ).focusout( function () {
           formatDate({date: $(this).attr("id") });
       } );