close to working dates.

src/cljs/auto_ap/views/utils.cljs

@@ -1,6 +1,7 @@
 (ns auto-ap.views.utils
   (:require [re-frame.core :as re-frame]
             [cljsjs.react-transition-group]
+            [cljsjs.react-datepicker]
             [reagent.core :as reagent]
             [clojure.spec.alpha :as s]
             [cljs-time.coerce :as c]
@@ -38,6 +39,7 @@
     (.preventDefault e)
     (re-frame/dispatch (conj event (.. e -target -value)))))
 
+
 (defn delayed-dispatch [e]
   (fn [x]
     (js/setTimeout #(re-frame/dispatch e) 150)
@@ -52,7 +54,7 @@
 
 (def pretty-long (format/formatter "MM/dd/yyyy HH:mm:ss"))
 (def pretty (format/formatter "MM/dd/yyyy"))
-(def standard (format/formatter "yyyy-MM-MM"))
+(def standard (format/formatter "yyyy-MM-dd"))
 
 (defn date->str
   ([d] (date->str d pretty))
@@ -68,6 +70,10 @@
   (when d
     (format/parse f d)))
 
+(defn dispatch-date-change [event]
+  (fn [e g]
+    (re-frame/dispatch (conj event (date->str (time/from-default-time-zone (c/from-date e)) standard)))))
+
 (defmulti do-bind (fn [a {:keys [type] :as x}]
                     type))
 
@@ -118,9 +124,12 @@
 (defmethod do-bind "date" [dom {:keys [field event subscription class spec] :as keys} & rest]
   (let [field (if (keyword? field) [field] field)
         event (if (keyword? event) [event] event)
+        selected (get-in subscription field)
+        x (str->date selected standard)
+        selected (if (string? selected) (c/to-date (time/to-default-time-zone (time/from-default-time-zone x))) selected )
         keys (assoc keys
-                    :on-change (dispatch-value-change (conj event field)) 
-                    :value (doto (get-in subscription field) println)
+                    :on-change (dispatch-date-change (conj event field)) 
+                    :selected selected
                     :class (str class
                                 (when (and spec (not (s/valid? spec (get-in subscription field))))
                                   " is-danger")))
@@ -160,7 +169,15 @@
 (def css-transition-group
   (reagent/adapt-react-class js/ReactTransitionGroup.CSSTransition))
 
+(def date-picker
+  (do
+    
+    
+    (reagent/adapt-react-class (aget js/DatePicker "default"))))
+
+
 (defn appearing [{:keys [visible? enter-class exit-class timeout]} & children ]
+  
   (let [final-state (reagent/atom visible?)]
     (fn [{:keys [visible?]} & children]
       [css-transition-group {:in visible? :class-names {:exit exit-class :enter enter-class} :timeout timeout :onEnter (fn [] (reset! final-state true )) :onExited (fn [] (reset! final-state false))}