Updating the Date Picker Calendar Used for Custom Date Fields on Web Forms (Aeon 5.2 Web Pages)

Brittany De Gail

Updated March 18, 2024 14:49

The release of Aeon 5.2 included several new and updated web page files to support a new, significantly more accessible date picker calendar tool used for the Date fields in the Aeon web pages:

Updating Custom Date Fields on Web Forms to Use the New Calendar Tool

If you had previously implemented a custom Date field on your web forms using the Aeon 5.1 version of the date picker calendar tool, updating this field to use the new calendar tool will require performing several manual updates to your Aeon web pages following the steps below:

The information in this article only applies to custom fields configured to use the Date data type and cannot be used with custom fields configured to use the DateTime data type. For more information on configuring custom fields, see Unlimited Custom Fields Overview.

Step 1: Perform Required Aeon 5.2 Web Page File Updates: Several new Aeon 5.2 web page files must first be added to your web directory and several existing web page files updated with the new version of those files available in the Aeon 5.2.11 (or later) default web pages package
Step 2: Update Scripting on User Forms (If Necessary): If the field is located on a user web form such as ChangeUserInformation.html, two <script> tags must be added to the code for the web form on which the custom Date field has been configured
Step 3: Update the Code Used for the Custom Date Field on Web Forms: Finally, the code used to implement the custom Date field on the web form must be updated with several required changes

Configuring Web Page Changes Across All Aeon Web Directories

To ensure that the web page changes described in this article are configured consistently across the Aeon web interface, the web page configuration steps below should be performed in each of the web directories configured on your Aeon server. Note that the names used below to refer to each directory may differ from the names used for those directories on your Aeon server based on your institution's specific web configuration:

The Aeon/AeonAuth web directory containing the live, production web page files accessed by users authenticated through basic Aeon authentication
The Aeon_TestWeb/AeonAuth_TestWeb web directory containing the TestWeb files used to test the web pages accessed by basic Aeon authentication users
If remote authentication has been configured for Aeon, ensure that the web directories configured for these users are updated with the new files:
- The RemoteAuth web directory containing the live, production web page files accessed by users authenticated through remote authentication
- The RemoteAuth_TestWeb web directory containing the TestWeb files used to test the web pages accessed by remote authentication users

Step 1: Perform Required Aeon 5.2 Web Page File Updates

Note: If you have already followed the instructions to implement the new Scheduled Date date picker calendar or the new Appointment Scheduling date picker calendar using the Aeon 5.2.11 (or later) web pages, then you do not have to perform the instructions in this section and can skip to step two.

Implementing the new accessible calendar tool will require adding several new Aeon 5.2 web page files to your web directory and modifying existing files according to the instructions below.

Minimum Server Requirement

As the instructions in this article require the updated version of datepicker.min.js included with the Aeon 5.2.11 default web pages release, you must be on Aeon Server v5.2.4 or later to implement the web page changes listed below.

New Files to Add | Files to Overwrite | Files to Overwrite or Modify

New Files to Add

The following files are new in Aeon 5.2 and should be added to your web directory. Please download the Aeon 5.2.11 (or later) default web pages and add the following new files:

CSS folder:
- css\images\fa-calendar.svg
  
  Note: This file should be added to the images subfolder inside the CSS folder
- css\datepicker.min.css
JS folder:
- Copy over the entire 'lang' subfolder containing:
  - js\lang\en-US.js
- js\datepicker.min.js

Files to Overwrite

The following files have been updated and should be overwritten to ensure the latest Aeon 5.2 version of each file is used. Please download the Aeon 5.2.11 (or later) default web pages and overwrite these files with the updated files:

CSS folder:
- css\cookieconsent.min.css
JS folder:
- js\atlasCookieConsent.js
- js\cookieconsent.min.js

Files to Overwrite or Modify

It is strongly recommended to also overwrite the following web page files with the new updated files released for Aeon 5.2. However, if any of these files have been extensively modified for your institution, then the required code changes for each file can be made manually to your existing files following the instructions in the expandable section below:

include_head.html
include_head_request.html
CSS folder:
- css\aeon.css

Click for manual update instructions

css\aeon.css

Change this (default lines 321-330):

/*Caution: Changing form field border color can affect accessibility
For more information see WCAG 1.4.11*/
.form-control,
.form-control:focus,
.custom-select,
.custom-select:focus,
.custom-control .custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
 
    border-color: #757575;
}

To this:

/*Caution: Changing form field border color can affect accessibility
For more information see WCAG 1.4.11*/
.form-control,
.form-control:focus,
.custom-select,
.custom-select:focus,
.custom-control .custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before,
.control-group {
    border-color: #757575;
}

Then add this code to the end of the aeon.css file if not already present:

/* Cookie Consent Styling */

.theme_atlas{
    --cc-bg: #333333;
    --cc-text: #fff;
    --cc-btn-primary-bg: #08415c;
    --cc-btn-primary-text: #fff;
}

.theme_atlas .cc_div a, .theme_atlas .cc_div .cc-link {
    border-color: #d6d6d6;
    color: #d6d6d6;
}

.theme_atlas .cc_div #c-txt{
    color: var(--cc-text);
}

.theme_atlas .c-bn, .theme_atlas .c-bn:hover {
    border: 1px solid #79818B;
}

Then add this code to the end of the aeon.css file:

/* Datepicker styling */

.date-picker-control, .date-picker-control:link, .date-picker-control:visited
{
    background-image: url("images/fa-calendar.svg");
    background-position: 0,0;
}

.date-picker
{
    font-family: 'Open Sans', sans-serif;
    color:#08415c;
}

.date-picker .date-picker-today, .oldie .date-picker .date-picker-today {
    background-image: none;
    background: #fff;
}

.date-picker .day-disabled
{
    background-image: none;
    color: #555;
    background-color: #e6e6e6;
}

.day-disabled .date-picker-hover {
    color: #555;
}

.date-picker table {
    border-color: #000;
    border-radius: .25 rem;
    background-image: none;
}

.date-picker td {
    background-image: none;
    border-color: #919191;
    text-shadow: none;
}

.date-picker .date-picker-unused {
   background-color: #fcfcfc;
   background-image: none;
}

.btn-primary-append {
    margin: 0;
}

.btn-secondary-append {
    margin-top: 0;
}

.date-picker .date-picker-highlight {
    color: #333;
}

.date-picker .date-picker-hover {
    text-shadow: none;
    background: #c9e7e9;
    color: #415A76;
    border-color: #000;
}

.date-picker .date-picker-hover.day-disabled {
    background-image: none;
    background-color: #e6e6e6;
}

.date-picker-focus .date-picker-hover {
    animation: none;
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
}

.btn-outline-secondary {
    color: #000;
}

.date-picker-button-active span, .date-picker-control:hover span {
    box-shadow: none;
}

.validation-message {
    font-style: italic;
}

@media (max-width: 767.98px) {
    .mx-w-100 {
        width: 100% !important;
    }
}

include_head_request.html

Add this code to the end of the file:

<script type="text/javascript" src="js/lang/en-US.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>

include_head.html

Change this (default lines 7-12):

 
<link rel="stylesheet" href="css/aeon.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="https://use.fontawesome.com/
releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/
iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" 
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" 
href="css/cookieconsent.min.css" />

To this:

<link rel="stylesheet" type="text/css" href="css/datepicker.min.css"/>
<link rel="stylesheet" href="css/aeon.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="https://use.fontawesome.com/
releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/
iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" 
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" 
href="css/cookieconsent.min.css" />

Step 2: Update Scripting on User Forms (If Necessary)

If the custom Date field is to be used on a user web form (NewUserRegistration.html, NewAuthRegistration.html, ChangeUserInformation.html, or ExpiredUsers.html), then two <script> tags will first need to be added to those pages inside the <head> tags used at the top of the following in the following order:

<script type="text/javascript" src="js/lang/en-US.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>

Example (ChangeUserInformation.html):

This example shows how to implement the new <script> tags on ChangeUserInformation.html. Note that the <script> tags must be placed within the <head> and </head> tags at the top of the form:

<head>
    <title>Aeon - Change User Information</title>
    <#INCLUDE filename="include_head.html">
    <script type="text/javascript" src="js/lang/en-US.js"></script>
    <script type="text/javascript" src="js/datepicker.min.js"></script>
</head>

If the custom Date field is used on a web request form such as DefaultRequest.html, then you do not need to add the <script> tags above to the form.

Step 3: Update the Code Used for the Custom Date Field on Web Forms

After the new Aeon 5.2.11 (or later) web page files have been added to your web directory following the steps above, you can now update the code used to implement the custom date field on your web forms to use the new calendar tool. Please adjust the code for the field on your web form according to the changes noted below, ensuring that you replace [ShortName] in the example code with the short name defined for your custom Date field in the Aeon Customization Manager:

Note: This code requires the updated version of the datepicker.min.js file first released in the Aeon 5.2.11 default web pages. Please ensure that your web directory has been updated with the most recent version of this file before implementing the code changes below.

Change this:

<script>
  $( function() {
    $( "#CustomFields_[ShortName]" ).datepicker();
  } );
</script>

<div class="form-group col-sm-4">
   <label for="CustomFields_[ShortName]">
      <span class="<#ERROR name='ERRORCustomFields.[ShortName]'>">
          [Insert text for field name you want to display here]
      </span>
   </label>
   <div class="input-group">
       <input class="form-control" id="CustomFields_[ShortName]" 
       name="[ContextType].CustomFields.[ShortName]" type="text" 
       aria-describedby="button-datePicker-[shortName]" 
       value="<#PARAM name=
       '[ContextType].CustomFields.[ShortName]'>">
       <div class="input-group-append">
         <button class="btn btn-outline-secondary dateTrigger" 
         type="button" role="button" 
         id="button-datePicker-[shortName]" 
         data-triggerDatePicker="#CustomFields_[ShortName]" 
         aria-label="Calendar">
           <span class="fas fa-calendar ui-datepicker-trigger">
           </span>
         </button>
       </div>
   </div>
  
   <div class="small-notes"  >
       [This text displays in small font under the input field]
        
        
   </div>
</div>

To this:

 
 
 
 
 

<div class="form-group col-sm-4">
   <label for="CustomFields_[ShortName]">
      <span class="<#ERROR name='ERRORCustomFields.[ShortName]'>">
          [Insert text for field name you want to display here]
      </span>
   </label>
   <div class="input-group">
       <input class="form-control" id="CustomFields_[ShortName]" 
       name="[ContextType].CustomFields.[ShortName]" type="text" 
       aria-describedby="[ShortName]Notes" 
       value="<#PARAM name=
       '[ContextType].CustomFields.[ShortName]'>">
      <div id="[ShortName]_datePickerButton" 
      class="input-group-append btn btn-outline-secondary"></div>
       
       
       
       
       
       
       
       
    </div>

   <div class="small-notes" id="[ShortName]Notes">
       [This text displays in small font under the input field] 
       <span class="sr-only"> A button is available 
        to open a calendar.</span>
   </div>
</div>

Updating Custom Date Fields on Web Forms to Use the New Calendar Tool

Step 1: Perform Required Aeon 5.2 Web Page File Updates

New Files to Add

Files to Overwrite

Files to Overwrite or Modify

Step 2: Update Scripting on User Forms (If Necessary)

Step 3: Update the Code Used for the Custom Date Field on Web Forms

Articles in this section