Gravity has 3 options when creating dates:
Date Picker
Date Field
Date Dropdown
The formatting (or lack) provided with Gravity makes them difficult to format within the Plugin.
Date Picker
The easiest to use is the Date Picker. This displays on the backend and in a generated PDF well. The only issue is that there is text added in the PDF (mPDF created). Add the following to the Custom CSS:
/* Gravity date dropdown on PDF generate - delete "Date Format: MM slash DD slash YYYY"*/
.pdf-body .screen-reader-text{
display: none;
}
Date Field
The date field adds labels and displays vertically. Although it is possible to hide the labels on the backend, they will display in the PDF (below the date fields assuming that you add the float option below).
Below are options to add to Custom CSS to better format:
/* Gravity date field on display backend - align on same line*/
.cm-hipaa-submitted-form-fields .gfield_date_month ,
.cm-hipaa-submitted-form-fields .gfield_date_day ,
.cm-hipaa-submitted-form-fields .gfield_date_year {
display: inline-block;
}
/* Gravity date field on display backend - add spacing*/
.cm-hipaa-submitted-form-fields .gfield_date_day,
.cm-hipaa-submitted-form-fields .gfield_date_year {
margin-left: 7px;
}
/* Gravity date field on display backend - hide MM DD YYYY labels*/
.cm-hipaa-submitted-form-fields .gfield_date_month label,
.cm-hipaa-submitted-form-fields .gfield_date_day label,
.cm-hipaa-submitted-form-fields .gfield_date_year label {
display: none;
}
/* Gravity date field on PDF generate - align on same line*/
.pdf-body .gfield_date_month ,
.pdf-body .gfield_date_day ,
.pdf-body .gfield_date_year {
margin-left: 7px;
float: left;
width: 23px;
}
Date Dropdown
Below is the CSS to align the dates in the display and PDF generate
/* Gravity date Dropdown on display backend- align on same line */
.cm-hipaa-submitted-form-fields .gfield_date_dropdown_month,
.cm-hipaa-submitted-form-fields .gfield_date_dropdown_day,
.cm-hipaa-submitted-form-fields .gfield_date_dropdown_year {
display: inline-block;
}
/* Gravity date Dropdown on display backend -add space separation */
.cm-hipaa-submitted-form-fields .gfield_date_dropdown_day,
.cm-hipaa-submitted-form-fields .gfield_date_dropdown_year{
margin-left: 7px;
}
/* Gravity date Dropdown on PDF generate -align on same line and add spacing */
.pdf-body .gfield_date_dropdown_month,
.pdf-body .gfield_date_dropdown_day,
.pdf-body .gfield_date_dropdown_year{
margin-left: 7px;
float: left;
width: 23px;
}