Solved

Apex datepicker disable

Posted on 2012-04-11
12
2,858 Views
Last Modified: 2012-05-14
Hi,

How do I disable date picker item (specifically the date picker pop up).
When I use 'Read Only' option of the item, the format of the date picker becomes absurd. So I need a way to disable/ readonly the date picker.

I am workingon apex Version 4.0

Thanks.
0
Comment
Question by:vsarma50
  • 6
  • 6
12 Comments
 
LVL 20

Expert Comment

by:gatorvip
Comment Utility
What's the point of disabling a date picker? If you just want to display a date, use a label or text field (with read-only set to Always)
0
 

Author Comment

by:vsarma50
Comment Utility
No my requirement is as follows.


I am having a tabular form. I made 2 columns as read only. But when we

add a new row by clicking the Add Row button these columns will be editable for that particular row.

After adding the data and press the submit button that 2 columns will be changed to read only. but one of the column is date column which iam able to make it read only but the icon datepicker is allowing to modify the date,so i want to disable and enable conditionlly as mentioned above. when i click add row the text box is getting editable and should the same with date picker.
0
 
LVL 20

Expert Comment

by:gatorvip
Comment Utility
I set up a test with a date picker in a tabular form - I can't replicate your error where "the format of the date picker becomes absurd" when disabling the date picker (I used the same JavaScript that I previously posted in one of your threads).

Make sure you specify a date format under Column Attributes / Number/Date Format. If you still get an error, please post a screen shot.
0
 

Author Comment

by:vsarma50
Comment Utility
can you please give me the code snippet you used to disable the datepicker. iam trying to disable the datepicker with the same logic you provided but i could not.
thanks.
0
 
LVL 20

Expert Comment

by:gatorvip
Comment Utility
In this instance, "f11" is the array used for the date picker.

<script type="text/javascript">
var f2=document.getElementsByName("f11");
for (var r = 0; r < f2.length; r++)
{
   if(f2[r].value != "")
   {
      f2[r].disabled=true;
   }
}

</script>

Open in new window


If you get any errors, make sure you post them here.
0
 

Author Comment

by:vsarma50
Comment Utility
Hi, The below is the code I used i made the textbox as read only and the datepicker icon to be disabled but still able to see the popup when clicked on the datepicker icon. please find the atteched document with screen shots.

<script type="text/javascript">

var f1=document.getElementsByName("f04");
var f2=document.getElementsByName("f05");
var f3=document.getElementsByName("#f05_0000");

for (var r = 0; r < f1.length; r++)
{
   if(f1[r].value != "")
   {
      f1[r].readOnly=true;
      f2[r].readOnly=true;
      f3[r].disabled=true;

   }
}

</script>
Doc4.doc
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 20

Expert Comment

by:gatorvip
Comment Utility
it looks like the image itself needs to be disabled in a different way, but also in JavaScript

http://roelhartman.blogspot.in/2009/03/how-to-disable-calendar-button.html

example here:
http://apex.oracle.com/pls/otn/f?p=41715:16

If you can't figure it out, I might be able to give you an example later today.
0
 

Author Comment

by:vsarma50
Comment Utility
Hi
thanks for the response.
But iam still not able to disable the datepicker

with the below code how can I incorporate the http://apex.oracle.com/pls/otn/f?p=41715:16
I tried but not working.
here f5 is the date picker in table form.

<script type="text/javascript">

var f1=document.getElementsByName("f04");
var f2=document.getElementsByName("f05");

for (var r = 0; r < f1.length; r++)
{
   if(f1[r].value != "")
   {
      f1[r].readOnly=true;
      f2[r].readOnly=true;

     }
}


 


</script>
0
 
LVL 20

Expert Comment

by:gatorvip
Comment Utility
Sorry, been swamped with some projects.  Are you saying that the code above
a) doesn't disable the text field part of the datepicker
or
b) doesn't disable the image part of the datepicker?

Normally a) shouldn't happen, meaning that at the very least the text field should be disabled. The JavaScript code in the links from my previous post should disable the image too.
0
 

Author Comment

by:vsarma50
Comment Utility
Hi,

Thanks very much for the response.
In the code given by you i didn't made the text box(datepicker) disable but made it as readonly because if I disable then I am getting error when trying to update other fields.
however, I am ok with readonly property of the two textboxes. But only problem how to disable the datapicker image which should be in  after the two lines. thanks once again.

      f1[r].readOnly=true;
      f2[r].readOnly=true;
0
 
LVL 20

Accepted Solution

by:
gatorvip earned 500 total points
Comment Utility
OK, I figured out how to disable the image as well. You can delete the previous code as that only disabled the field.

1. Edit your date picker field in the tabular form and go to the Column Attributes page for the item
2. In the Element  Attributes field, enter the following
class="DatePickerClass"

Open in new window

 (you can choose a different name, just make sure you remember what it is). Save changes.
3. Create a new Dynamic Action - you might want to do dummy entries and then edit the Dynamic Action with the following entries:
Event: Change
Selection Type: jQuery Selector
jQuery Selector: .DatePickerClass (make sure to include the ".")
Condition: No Condition

Add True Action:
Action: Execute JavaScript Code
Fire When Event Result Is: True
Fire On Page Load: yes (checked)

Event Scope: bind

Code
fieldID = 'f11_' + $(this.triggeringElement ).attr('id').substr(4);
if ($(this.triggeringElement ).val() != "") 
{ 
  $("#" + fieldID).datepicker("disable"); 
}

Open in new window

(here you can replace f11 with whatever element corresponds to your date picker)

Apply Changes and Save and your date picker should be disabled.

For future reference, you might want to add JavaScript and/or JQuery to your Topic Areas.
0
 

Author Closing Comment

by:vsarma50
Comment Utility
thanks very much.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Join & Write a Comment

How to Unravel a Tricky Query Introduction If you browse through the Oracle zones or any of the other database-related zones you'll come across some complicated solutions and sometimes you'll just have to wonder how anyone came up with them.  …
From implementing a password expiration date, to datatype conversions and file export options, these are some useful settings I've found in Jasper Server.
This video explains at a high level with the mandatory Oracle Memory processes are as well as touching on some of the more common optional ones.
This video shows information on the Oracle Data Dictionary, starting with the Oracle documentation, explaining the different types of Data Dictionary views available by group and permissions as well as giving examples on how to retrieve data from th…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now