Skip to Main Content

Wednesday, April 20, 2011

APEX 4 tabular form datepicker month and year selector

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}

Pagination

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