Solved

Apex datepicker disable

Posted on 2012-04-11
12
3,126 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Oracle encryption 12 60
join actual table rows based on the column 25 31
Reference datasets inside PL/SQL cursor and dumping queried datasets 3 33
how to tune the query 17 56
Working with Network Access Control Lists in Oracle 11g (part 1) Part 2: http://www.e-e.com/A_9074.html So, you upgraded to a shiny new 11g database and all of a sudden every program that used UTL_MAIL, UTL_SMTP, UTL_TCP, UTL_HTTP or any oth…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
This video shows how to Export data from an Oracle database using the Original Export Utility.  The corresponding Import utility, which works the same way is referenced, but not demonstrated.
This videos aims to give the viewer a basic demonstration of how a user can query current session information by using the SYS_CONTEXT function

749 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