Solved

Apex datepicker disable

Posted on 2012-04-11
12
3,254 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

I remember the day when someone asked me to create a user for an application developement. The user should be able to create views and materialized views and, so, I used the following syntax: (CODE) This way, I guessed, I would ensure that useā€¦
From implementing a password expiration date, to datatype conversions and file export options, these are some useful settings I've found in Jasper Server.
Via a live example, show how to take different types of Oracle backups using RMAN.
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.

691 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