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}

Comment Button

Comments

  • Jari Laine 29 Sep 2014  

    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 2014  

    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 7 May 2014  

    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 2013  

    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 2013  

    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 2013  

    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 9 Mar 2013  
    thanks for response solved my problem datepicker function Conflict with js file use in template     
  • Jari Laine 4 Mar 2013  

    Hi Jovaini,

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

    Regards, Jari

        
  • Mehdi Jovaini 4 Mar 2013  
    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 6 Mar 2012  
    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

Search

Archives

Subscribe in a Reader