Single Article

APEX 4 tabular form datepicker month and year selector

Category APEX and jQuery

Here is how you can change tabular form datepicker to show date and year selectors.

First, change your date column Display As to be "Text Field".
Then check e.g. using Firebug what is date fields name attribute.
In my example, name for input filed is f06.

Create dynamic Action. Select Advanced

  • Name: Tabular form datepicker
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
     $('input[name="f06"]').datepicker({
      changeMonth:true,
      changeYear:true,
      showButtonPanel:false,
      buttonImageOnly:true,
      showOn:'both',
      buttonImage:"#IMAGE_PREFIX#asfdcldr.gif"
     }).parent("td").addClass("datepicker");
    
  • Selection Type: Region
  • Region: {select your report region}

Comments

  • Jari Laine 29-SEP-14

    Hi Shah,

    Hard to say what could be problem.

    Please create example about problem to apex.oracle.com and share developer login details to workspace

    Regards,
    Jari

        
  • Shah 29-SEP-14

    Hello,

    I am using Apex 4.2.1 version.

    I did follow each step which u had written,& its run proper in tabular form at once in a time. Whenever we do refresh page or came from one page to another page that time not display date picker.It means it look like Text field.

    I have used: Dynamic Action

    My Code :

    $('input[name="f05"],input[name="f06"]').datepicker({

    dateFormat:"dd-M-yy",

    changeMonth:true,

    changeYear:true,

    showButtonPanel:false,

    buttonImageOnly:true,

    showOn:'both',

    yearRange: "-20:+20",

    buttonImage:"/i/asfdcldr.gif"

    }).parent("td").addClass("datepicker");

    Please give me any suggestion.

    Thanking You.

        
  • Mehdi Jovaini 07-MAY-14

    hi

    i have best solution for Datepicker Month and year Selector

    in tabular form apex .

    1. Copy Code in Page Header Or Page Header Template

    
     <script>  
    (function(a,b){
    a.datepicker=function(c,d,e,f){
    var g=null;
    
    if(!d.showTime||d.showTime&&d.showOn=="inline")g=function(a,b){
    if(b.inline){
    var c=b.settings.altField;c.indexOf("#")===0&&(c=c.substr(1,c.length)),c&&$s(c,a)
    }else 
    $s(b.id,a)};
    var h=f,
    i=b.extend({dateFormat:e,duration:"",constrainInput:!1,onSelect:g,locale:h},d),
    j=b.datepicker.regional[f];
    
    i.defaultDate = new Date(j.currentDate);
    i.changeMonth = true;
    i.changeYear  = true;
    i.showOn      = "both";
    i.buttonText  = "Date Picker";
    //alert(i.changeMonth);
    delete j.maxDate,delete j.minDate,delete j.defaultDate,delete j.dateFormat,delete j.yearRange,delete j.numberOfMonths,delete j.altField,i=b.extend(j,i);
    var k=b(c,apex.gPageContext$).datepicker(i);
    b(c,apex.gPageContext$).each(function(){
    a.initPageItem(this.id,{
    enable:function(){
    b("#"+this.id,apex.gPageContext$).datepicker("enable").removeClass("apex_disabled")},disable:function(){
    b("#"+this.id,apex.gPageContext$).datepicker("disable").addClass("apex_disabled")
    },show:function(){
    b("#"+this.id,apex.gPageContext$).parent().children().show()
    },hide:function(){
    b("#"+this.id,apex.gPageContext$).parent().children().hide()
    }
    })
    })
    }
    })(apex.widget,apex.jQuery);
    
      </script>   
    
        
  • Mehdi Jovaini 26-MAY-13

    Solved my problem

    Copy

    apex.jQuery("input[name='f11']").datepicker("option", "minDate", new Date(apex.item("PX_FROM_DATE").getValue()));

    apex.jQuery("input[name='f11']").datepicker("option", "maxDate", new Date(apex.item("PX_TO_DATE").getValue()));

    too URL Target Add Row Btn In tabular

        
  • Jari Laine 26-MAY-13

    Hi M.Jovaini,

    I'm not quite sure what you mean. Maybe you try correct substitution for items like:

    $('input[name="f06"]').datepicker({
     changeMonth:true,
     changeYear:true,
     showButtonPanel:false,
     buttonImageOnly:true,
     showOn:'both',
     minDate:'&Px_min_date.', //Apex_item
     maxDate:'&Px_max_date.', //Apex_item
     buttonImage:"#IMAGE_PREFIX#asfdcldr.gif"
    }).parent("td").addClass("datepicker");

    Regards,
    Jari

        
  • Mehdi Jovaini 26-MAY-13

    Hi Dear

    I Use this Function in tabulare from worked then , i want use Min and Max Date in your function With Apex Item

    $('input[name="f06"]').datepicker({
     changeMonth:true,
     changeYear:true,
     showButtonPanel:false,
     buttonImageOnly:true,
     showOn:'both',
     minDate:#Px_min_date,//Apex_item
     maxDate:#Px_max_date,//Apex_item
     buttonImage:"#IMAGE_PREFIX#asfdcldr.gif"
    }).parent("td").addClass("datepicker");

    thanks For your help Dear

        
  • Mehdi Jovaini 09-MAR-13
    thanks for response solved my problem datepicker function Conflict with js file use in template     
  • Jari Laine 04-MAR-13

    Hi Jovaini,

    Could you please create example to apex.oracle.com ?

    Regards, Jari

        
  • Mehdi Jovaini 04-MAR-13
    Hi all tabular form datepicker month and year selector worked on apex 4.02 and 4.1.1.23 dose not work tabular form datepicker month and year selector in Apex 4.2.1 help me pls     
  • drewD 06-MAR-12
    The following was my code: $('input[name="f13"]').datepicker({ dateFormat:"M-yy", changeMonth:true, changeYear:true, showButtonPanel:false, buttonImageOnly:true, showOn:'both', buttonImage:"#IMAGE_PREFIX#asfdcldr.gif" }).parent("td").addClass("datepicker"); I just found the yearrange option and add it: yearRange: "-35:+0", and all is working. thanks Drew     

Global Right Column

Archives

Subscribe in a Reader