Hide Date Picker and apply Font-family

Last Updated on February 10, 2022 by Rakesh Gupta

This is a continuation of my article Lightning Flow tips and tricks, In that, I had discussed various tips and tricks related to Flow. This article goes a step ahead and explains, how to hide a date picker and how you can apply different font-family to your Flow elements. Let’s start with a business use case

Business Use Case 1: –  Rachel Gillett is working as a System administrator at Universal Containers. She has created a Student Registration form using old Flow, as shown in the following screenshot

She wants to remove date picker from the right of Date of birth field in a flow (i.e. Student Registration Form). 

Solution for the above business requirement

1. First of all, embed Student Registration Form, Flow into a Visualforce page, as shown in the following code:

<apex:page>
<br/>
<center>
<font size="5" color="Orange" > Student Registration Form</font>
</center>
<br/>
<flow:interview name="Student_Registraion_Form" finishLocation="{!URLFOR('/home/home.jsp')}" buttonLocation="bottom"/> 
</apex:page>

It will look like the following screenshot

Note: – If you want to display the Next or Finish button at the bottom or top of the page then use buttonLocation=”bottom” or “top”.

2. The next step is to apply cascading style sheets, to remove the date picker. Use the following style sheet to your Visualforce page. 

<apex:page>
<br/>
<center>
<font size="5" color="Orange" > Student Registration Form</font>
</center>
<br/>
<style type="text/css">
div.Datepickerhide span.dateInput span.dateFormat{
display:none;
}
</style>
<apex:page>

Student Registration Form – Without Date Picker

Finally, it will look like the preceding screenshot, after hiding the date picker from Date of birth field.

Business Use Case 2: –  Now she wants to apply Color: Green,  font-family: Courier New to Date of Birth and Communication Address fields of the existing Student Registration Form Flow. 

Solution for the above business requirement

Edit the Visualforce page to incorporate the below mention CSS. Where FlowDate and FlowTextArea are Flow Style Class for Date field label, Text area field label respectively.

.FlowDate {
color: Green;
font-family: Courier New;
}
.FlowTextArea {
color: Green;
font-family: Courier New;
}

once you’re done, reload the Visualforce page, and it will look like the following screenshot

Complete Code:-

<apex:page>
<br/>
<center>
<font size="5" color="Orange" > Student Registration Form</font>
</center>
<br/>
<style type="text/css">
div.Datepickerhide span.dateInput span.dateFormat{
display:none;
}
.FlowDate {
color: Green;
font-family: Courier New;
}
.FlowTextArea {
color: Green;
font-family: Courier New;
}
</style>
<apex:page>