diff --git a/public-typescript/workOrderMilestoneCalendar.js b/public-typescript/workOrderMilestoneCalendar.js
index b88f2994..9a58d6b3 100644
--- a/public-typescript/workOrderMilestoneCalendar.js
+++ b/public-typescript/workOrderMilestoneCalendar.js
@@ -120,10 +120,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
     };
     workOrderMilestoneDateFilterElement.addEventListener("change", () => {
-        workOrderMilestoneDateStringElement.disabled =
+        workOrderMilestoneDateStringElement.closest("fieldset").disabled =
             workOrderMilestoneDateFilterElement.value !== "date";
         getMilestones();
     });
+    los.initializeDatePickers(workOrderSearchFiltersFormElement);
     workOrderMilestoneDateStringElement.addEventListener("change", getMilestones);
     workOrderSearchFiltersFormElement.addEventListener("submit", getMilestones);
     getMilestones();
diff --git a/public-typescript/workOrderMilestoneCalendar.ts b/public-typescript/workOrderMilestoneCalendar.ts
index e5e0f299..1f3e47b4 100644
--- a/public-typescript/workOrderMilestoneCalendar.ts
+++ b/public-typescript/workOrderMilestoneCalendar.ts
@@ -166,11 +166,13 @@ declare const cityssm: cityssmGlobal;
     };
 
     workOrderMilestoneDateFilterElement.addEventListener("change", () => {
-        workOrderMilestoneDateStringElement.disabled =
+        workOrderMilestoneDateStringElement.closest("fieldset").disabled =
             workOrderMilestoneDateFilterElement.value !== "date";
         getMilestones();
     });
 
+    los.initializeDatePickers(workOrderSearchFiltersFormElement);
+
     workOrderMilestoneDateStringElement.addEventListener("change", getMilestones);
     workOrderSearchFiltersFormElement.addEventListener("submit", getMilestones);
 
diff --git a/public/javascripts/workOrderMilestoneCalendar.min.js b/public/javascripts/workOrderMilestoneCalendar.min.js
index 54ade08b..69f08c73 100644
--- a/public/javascripts/workOrderMilestoneCalendar.min.js
+++ b/public/javascripts/workOrderMilestoneCalendar.min.js
@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,s=document.querySelector("main").dataset.urlPrefix,r=document.querySelector("#form--searchFilters"),a=r.querySelector("#searchFilter--workOrderMilestoneDateFilter"),t=r.querySelector("#searchFilter--workOrderMilestoneDateString"),i=document.querySelector("#container--milestoneCalendar"),o=a=>{a&&a.preventDefault(),i.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Milestones...</div>',cityssm.postJSON(s+"/workOrders/doGetWorkOrderMilestones",r,r=>{(r=>{if(0===r.length)return void(i.innerHTML='<div class="message is-info"><p class="message-body">There are no milestones that meet the search criteria.</p></div>');i.innerHTML="";const a=cityssm.dateToString(new Date);let t,o="";for(const n of r){o!==n.workOrderMilestoneDateString&&(t&&i.append(t),(t=document.createElement("div")).className="panel",t.innerHTML='<h2 class="panel-heading">'+n.workOrderMilestoneDateString+"</h2>",o=n.workOrderMilestoneDateString);const r=document.createElement("div");r.className="panel-block is-block",!n.workOrderMilestoneCompletionDate&&n.workOrderMilestoneDateString<a&&r.classList.add("has-background-warning-light");let c="";for(const e of n.workOrderLots)c+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(e.mapName)+'"><i class="fas fa-vector-square" aria-label="'+cityssm.escapeHTML(exports.aliases.lot)+'"></i> '+cityssm.escapeHTML(e.lotName)+"</span><br />";for(const e of n.workOrderLotOccupancies)for(const s of e.lotOccupancyOccupants)c+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(s.lotOccupantType)+'"><i class="fas fa-user" aria-label="'+cityssm.escapeHTML(exports.aliases.lotOccupancy)+'"></i> '+cityssm.escapeHTML(s.occupantName)+"</span><br />";r.innerHTML='<div class="columns"><div class="column is-narrow"><span class="icon is-small">'+(n.workOrderMilestoneCompletionDate?'<i class="fas fa-check" aria-label="Completed"></i>':'<i class="far fa-square has-text-grey" aria-label="Incomplete"></i>')+'</span></div><div class="column">'+(0===n.workOrderMilestoneTime?"":n.workOrderMilestoneTimeString+"<br />")+(n.workOrderMilestoneTypeId?"<strong>"+cityssm.escapeHTML(n.workOrderMilestoneType)+"</strong><br />":"")+'<span class="is-size-7">'+cityssm.escapeHTML(n.workOrderMilestoneDescription)+'</span></div><div class="column"><i class="fas fa-circle" style="color:'+e.getRandomColor(n.workOrderNumber)+'" aria-hidden="true"></i> <a class="has-text-weight-bold" href="'+s+"/workOrders/"+n.workOrderId+'">'+cityssm.escapeHTML(n.workOrderNumber)+'</a><br /><span class="is-size-7">'+cityssm.escapeHTML(n.workOrderDescription)+'</span></div><div class="column is-size-7">'+c+"</div></div>",t.append(r)}i.append(t)})(r.workOrderMilestones)})};a.addEventListener("change",()=>{t.disabled="date"!==a.value,o()}),t.addEventListener("change",o),r.addEventListener("submit",o),o()})();
\ No newline at end of file
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,s=document.querySelector("main").dataset.urlPrefix,r=document.querySelector("#form--searchFilters"),a=r.querySelector("#searchFilter--workOrderMilestoneDateFilter"),t=r.querySelector("#searchFilter--workOrderMilestoneDateString"),i=document.querySelector("#container--milestoneCalendar"),o=a=>{a&&a.preventDefault(),i.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Milestones...</div>',cityssm.postJSON(s+"/workOrders/doGetWorkOrderMilestones",r,r=>{(r=>{if(0===r.length)return void(i.innerHTML='<div class="message is-info"><p class="message-body">There are no milestones that meet the search criteria.</p></div>');i.innerHTML="";const a=cityssm.dateToString(new Date);let t,o="";for(const n of r){o!==n.workOrderMilestoneDateString&&(t&&i.append(t),(t=document.createElement("div")).className="panel",t.innerHTML='<h2 class="panel-heading">'+n.workOrderMilestoneDateString+"</h2>",o=n.workOrderMilestoneDateString);const r=document.createElement("div");r.className="panel-block is-block",!n.workOrderMilestoneCompletionDate&&n.workOrderMilestoneDateString<a&&r.classList.add("has-background-warning-light");let c="";for(const e of n.workOrderLots)c+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(e.mapName)+'"><i class="fas fa-vector-square" aria-label="'+cityssm.escapeHTML(exports.aliases.lot)+'"></i> '+cityssm.escapeHTML(e.lotName)+"</span><br />";for(const e of n.workOrderLotOccupancies)for(const s of e.lotOccupancyOccupants)c+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(s.lotOccupantType)+'"><i class="fas fa-user" aria-label="'+cityssm.escapeHTML(exports.aliases.lotOccupancy)+'"></i> '+cityssm.escapeHTML(s.occupantName)+"</span><br />";r.innerHTML='<div class="columns"><div class="column is-narrow"><span class="icon is-small">'+(n.workOrderMilestoneCompletionDate?'<i class="fas fa-check" aria-label="Completed"></i>':'<i class="far fa-square has-text-grey" aria-label="Incomplete"></i>')+'</span></div><div class="column">'+(0===n.workOrderMilestoneTime?"":n.workOrderMilestoneTimeString+"<br />")+(n.workOrderMilestoneTypeId?"<strong>"+cityssm.escapeHTML(n.workOrderMilestoneType)+"</strong><br />":"")+'<span class="is-size-7">'+cityssm.escapeHTML(n.workOrderMilestoneDescription)+'</span></div><div class="column"><i class="fas fa-circle" style="color:'+e.getRandomColor(n.workOrderNumber)+'" aria-hidden="true"></i> <a class="has-text-weight-bold" href="'+s+"/workOrders/"+n.workOrderId+'">'+cityssm.escapeHTML(n.workOrderNumber)+'</a><br /><span class="is-size-7">'+cityssm.escapeHTML(n.workOrderDescription)+'</span></div><div class="column is-size-7">'+c+"</div></div>",t.append(r)}i.append(t)})(r.workOrderMilestones)})};a.addEventListener("change",()=>{t.closest("fieldset").disabled="date"!==a.value,o()}),e.initializeDatePickers(r),t.addEventListener("change",o),r.addEventListener("submit",o),o()})();
\ No newline at end of file
diff --git a/views/workOrder-milestoneCalendar.ejs b/views/workOrder-milestoneCalendar.ejs
index cc569092..1c1eccbc 100644
--- a/views/workOrder-milestoneCalendar.ejs
+++ b/views/workOrder-milestoneCalendar.ejs
@@ -44,12 +44,17 @@
                         </div>
                     </div>
                     <div class="column">
-                        <div class="field">
-                            <label class="label" for="searchFilter--workOrderMilestoneDateString">Milestone Date</label>
-                            <div class="control">
-                                <input class="input" id="searchFilter--workOrderMilestoneDateString" name="workOrderMilestoneDateString" type="date" value="<%= dateTimeFunctions.dateToString(new Date()) %>" disabled required />
+                        <fieldset disabled>
+                            <div class="field">
+                                <label class="label" for="searchFilter--workOrderMilestoneDateString">Milestone Date</label>
+                                <div class="control has-icons-left">
+                                    <input class="input" id="searchFilter--workOrderMilestoneDateString" name="workOrderMilestoneDateString" type="date" value="<%= dateTimeFunctions.dateToString(new Date()) %>" required />
+                                    <span class="icon is-small is-left">
+                                        <i class="fas fa-calendar" aria-hidden="true"></i>
+                                    </span>
+                                </div>
                             </div>
-                        </div>
+                        </fieldset>
                     </div>
                 </div>
             </form>