                                      "error")}
                 [:label "Enrollment Cap"]
                 [input-atom :text {} (r/wrap EnrollmentCap swap! form assoc :EnrollmentCap)]]]
-              [:div.two.fields =
-               [:div.required.field {:class (when (and StartTime (:StartTime errors))
-                                              "error")}
-                [:label "Start Time"]
-                [input-atom :datetime-local {}
-                 (r/wrap StartTime swap! form assoc :StartTime)
-                 #(or % (unparse (:date-hour-minute formatters) (now))) ; todo: date inputs clear on input
-                 #(unparse (:date-hour-minute formatters) (from-string %))]]
-               [:div.required.field {:class (when (and EndTime (:EndTime errors))
-                                              "error")}
-                [:label "End Time"]
-                [input-atom :datetime-local {}
-                 (r/wrap EndTime swap! form assoc :EndTime)
-                 #(or % (unparse (:date-hour-minute formatters) (now)))
-                 #(unparse (:date-hour-minute formatters) (from-string %))]]]
+              (let [start-time     (r/wrap StartTime swap! form assoc :StartTime)
+                    end-time       (r/wrap EndTime swap! form assoc :EndTime)
+                    event-start    (let [d (from-string (:StartDate event))]
+                                     (local-date-time (year d) (month d) (day d) (hour d) (minute d)))
+                    event-end      (let [d (from-string (:EndDate event))]
+                                     (local-date-time (year d) (month d) (day d) (hour d) (minute d)))
+                    event-start-js (let [d (from-string (:StartDate event))]
+                                     (to-date (date-midnight (local-date (year d) (month d) (day d)))))
+                    event-end-js   (let [d (from-string (:EndDate event))]
+                                     (to-date (date-midnight (local-date-time (year d) (month d) (day d) 23 59))))]
+                [:div.two.fields
+                 [:div.required.field {:class (when (and StartTime (:StartTime errors))
+                                                "error")}
+                  [:label "Start Time"]
+                  [date-selector {:date-atom start-time
+                                  :max-date-atom end-time
+                                  :pikaday-attrs {:minDate event-start-js
+                                                  :maxDate event-end-js
+                                                  :defaultDate event-start
+                                                  :setDefaultDate false
+                                                  }
+                                  :static-attrs  {:min-date event-start
+                                                  :max-date event-end}}]]
+                 [:div.required.field {:class (when (and EndTime (:EndTime errors))
+                                                "error")}
+                  [:label "End Time"]
+                  [date-selector {:date-atom end-time
+                                  :min-date-atom start-time
+                                  :pikaday-attrs {:minDate event-start-js
+                                                  :maxDate event-end-js
+                                                  :defaultDate event-start
+                                                  :setDefaultDate false
+                                                  }
+                                  :static-attrs  {:min-date event-start
+                                                  :max-date event-end}}]]])
               [:div.field
                [:label "Description"]
                [input-atom :textarea {}

      [alandipert.storage-atom :refer [local-storage]]
      [ajax.core :refer [DELETE GET POST PUT]]
      [cljs-time.coerce :refer [from-string to-string from-long to-long from-date to-date]]
      [cljs-time.core :refer [after? at-midnight now plus minus hours]]
      [cljs-time.format :refer [formatter formatters unparse parse]]
      [datascript :as d]
      [garden.core :refer [css]]

                               (unparse (:date-hour-minute formatters) (parse input-date-time-formatter %))
                               %))
        normalize ; because of GMT
        #(to-date (plus (from-string %) (hours 6)))
        min-date (when (:min-date static-attrs) (:min-date static-attrs))
        max-date (when (:max-date static-attrs) (:max-date static-attrs))
        set-date! (fn [new-date]
                    (when (and date-atom new-date)
                      (if (and min-date max-date)
                        (if (after? (from-date new-date) max-date)
                          (reset! date-atom (out (to-string max-date)))
                          (if (after? min-date (from-date new-date))
                            (reset! date-atom (out (to-string min-date)))
                            (reset! date-atom (out (to-string (minus (from-date new-date) (hours 6)))))))
                        (reset! date-atom (out (to-string (minus (from-date new-date) (hours 6))))))))]
    (r/create-class
      {:component-did-mount
        (fn [this]
