Skip to Main Content
Posted on

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 11.31.02.000000 AM

    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 10.43.08.000000 AM

    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 11.33.21.000000 AM

    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 11.05.56.000000 AM

    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 10.34.39.000000 AM

    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 09.39.52.000000 AM

    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 11.14.28.000000 AM
    thanks for response solved my problem datepicker function Conflict with js file use in template
  • Jari Laine 04-MAR-13 03.40.20.000000 PM

    Hi Jovaini,

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

    Regards, Jari

  • Mehdi Jovaini 04-MAR-13 08.51.33.000000 AM
    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 07.14.22.000000 PM
    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