function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
itsclockworkitsclockwork 

standardStylesheets="false" results in no date picker

How can I get the visualforce's date picker interface to work without setting standardStylesheets to true?

 

The standardStylesheets attribute of <apex:page> controls whether prebuilt visualforce css files will be included in the page. The way I understood it, it would not remove funtionality (html and javascript), but only enhance the way the page looks.

 

A page with standardStylesheets="true" (the default setting) and a date input field, has a calendar datePicker interface appear when someone clicks in the field. Changing standardStylesheets="false" results in a loss of this feature. This behavior happens even if there are no css styles applied.

 

I could use some help. I'm hoping that this is not a bug.

 

 

Best Answer chosen by Admin (Salesforce Developers) 
jwetzlerjwetzler

Just from inspecting the page, yes the js does get pulled in when you use an inputField. I don't know the internals of the date picker so I can't say for sure why it's not appearing. At the very least it's setting classNames. I'm sure it's technically possible to get it to work by overriding our CSS, but that will probably mean a bunch of reverse engineering. Plus it's always dangerous territory because our stylesheets can and do change, and most styles are not supported when customers override them (there are some exceptions in the docs but I don't think they really apply here).

 

Not really the answer you want to hear. Some people have had success using jQuery to create their own DatePicker component, maybe you'd want to look into that? No idea if this one works but I found it on our wiki. http://wiki.developerforce.com/page/Code_Samples#jQuery_DatePicker_Component_for_Selecting_Date_in_VisualForce_Page

All Answers

jwetzlerjwetzler

From the documentation: "By setting this to false, components that require Salesforce.com CSS may not display correctly, and their styling may change between releases."

 

apex:inputField is a component that heavily relies on our CSS. It's not just date fields that won't display properly, I am sure lookup fields and required fields (to name a few) would have the same issues.

itsclockworkitsclockwork

Thanks for your reply. I now know that I've been warned. 

 

Including standardStylesheets would significantly impact many pages and the time and skills it takes to override tens of thousands of css lines to work cross-browser. I have to avoid it.

 

Can I confirm that standardStylesheets strictly omits css and not JavaScript functionality or the like?

 

If it is simply a question of missing css selectors and properties then I could find the necessary ones that would enable this functionality. I don't know why missing css could make something not display at all unless:

• there is a display:none in my own css (which there is not)

OR

• some javascript or similar is somehow dependant on the standardStylesheets

 

Is the issue only due css and therefore able to be resolved with css?

jwetzlerjwetzler

Just from inspecting the page, yes the js does get pulled in when you use an inputField. I don't know the internals of the date picker so I can't say for sure why it's not appearing. At the very least it's setting classNames. I'm sure it's technically possible to get it to work by overriding our CSS, but that will probably mean a bunch of reverse engineering. Plus it's always dangerous territory because our stylesheets can and do change, and most styles are not supported when customers override them (there are some exceptions in the docs but I don't think they really apply here).

 

Not really the answer you want to hear. Some people have had success using jQuery to create their own DatePicker component, maybe you'd want to look into that? No idea if this one works but I found it on our wiki. http://wiki.developerforce.com/page/Code_Samples#jQuery_DatePicker_Component_for_Selecting_Date_in_VisualForce_Page

This was selected as the best answer
itsclockworkitsclockwork

For anyone who may encounter the same challenge:

 

What I've decided to do is use a JavaScript-based date picker. I decided against trying to identify and copy all the relevant CSS selectors and properties in VF standard stylesheets that might enable this VF datePicker. Updates on SalesForce's side could break that kind of work-around. The JavaScript approach will continue to work regardless of future updates in VF.

 

I hope future releases of VF will make the lack of standardStylesheets not result in loss of VF features, but just let the structure look unformatted. It seems like they were able to accomplish this concept with with other components.