diff --git a/cms/static/js/views/settings/main_settings_view.js b/cms/static/js/views/settings/main_settings_view.js
index a023f40232..b80cc3f48e 100644
--- a/cms/static/js/views/settings/main_settings_view.js
+++ b/cms/static/js/views/settings/main_settings_view.js
@@ -126,13 +126,16 @@ CMS.Views.Settings.Details = Backbone.View.extend({
 		var div = this.$el.find(elementName);
 		var datefield = $(div).find(".date");
 		var timefield = $(div).find(".time");
-		var savefield = function(event) { 
+		var savefield = function() { 
 			cacheModel.save(fieldName, new Date(datefield.datepicker('getDate').getTime() 
 					+ timefield.timepicker("getSecondsFromMidnight") * 1000)); 
 		};
 		
+		// instrument as date and time pickers
+		timefield.timepicker();
+		
 		// FIXME being called 2x on each change. Was trapping datepicker onSelect b4 but change to datepair broke that
-		datefield.on('change', savefield);
+		datefield.datepicker({ onSelect : savefield });
 		timefield.on('changeTime', savefield);
 		
 		datefield.datepicker('setDate', this.model.get(fieldName));
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 8487c314e0..4d62bf6c1f 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -216,20 +216,20 @@ from contentstore import utils
                 <span class="detail">Important steps and segments of your course</span>
               </header>
 
-              <div class="row row-col2 datepair">
+              <div class="row row-col2">
                 <h4 class="label">Course Dates:</h4>
                 
                 <div class="field">
                   <div class="input multi multi-inline"  id="course-start">
                     <div class="group">
                       <label for="course-start-date">Start Date</label>
-                      <input type="text" class="start-date date start" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
+                      <input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
                       <span class="tip tip-stacked">First day the course begins</span>          
                     </div>
 
                     <div class="group">
                       <label for="course-start-time">Start Time</label>
-                      <input type="text" class="time start" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off">
+                      <input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off">
                       <span class="tip tip-stacked">(UTC/GMT -5 hours)</span>          
                     </div>
                   </div>
@@ -252,7 +252,7 @@ from contentstore import utils
                 </div>
               </div>
 
-              <div class="row row-col2 datepair">
+              <div class="row row-col2">
                 <h4 class="label">Enrollment Dates:</h4>
                 
                 <div class="field">