Solved

Apex datepicker disable

Posted on 2012-04-11
12
2,986 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
ID: 37837360
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
ID: 37837398
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
ID: 37837438
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
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.

 

Author Comment

by:vsarma50
ID: 37837459
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
ID: 37837466
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
ID: 37837516
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
 
LVL 20

Expert Comment

by:gatorvip
ID: 37839252
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
ID: 37851831
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
ID: 37858271
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
ID: 37860411
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
ID: 37872167
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
ID: 37965432
thanks very much.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Note: this article covers simple compression. Oracle introduced in version 11g release 2 a new feature called Advanced Compression which is not covered here. General principle of Oracle compression Oracle compression is a way of reducing the d…
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.  …
This video shows how to Export data from an Oracle database using the Datapump Export Utility.  The corresponding Datapump Import utility is also discussed and demonstrated.
This video shows how to configure and send email from and Oracle database using both UTL_SMTP and UTL_MAIL, as well as comparing UTL_SMTP to a manual SMTP conversation with a mail server.

786 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