close to working dates.

src/cljs/auto_ap/views/pages/unpaid_invoices.cljs

@@ -19,7 +19,7 @@
             [auto-ap.views.components.invoices.side-bar :refer [invoices-side-bar]]
             [auto-ap.expense-accounts :as expense-accounts]
             [auto-ap.entities.invoices-expense-accounts :as invoices-expense-accounts]
-            [auto-ap.views.utils :refer [active-when dispatch-event bind-field horizontal-field date->str date-time->str str->date pretty standard]]
+            [auto-ap.views.utils :refer [active-when dispatch-event bind-field horizontal-field date->str date-time->str str->date pretty standard date-picker]]
             [auto-ap.utils :refer [by replace-if]]
             [auto-ap.views.pages.check :as check]
             [auto-ap.views.components.invoice-table :refer [invoice-table] :as invoice-table]
@@ -259,7 +259,7 @@
     (-> db 
         (forms/start-form ::new-invoice  {:client-id (:id @(re-frame/subscribe [::subs/client]))
                                           :status :unpaid
-                                          :date (date->str (c/now) standard)
+                                          #_#_:date (date->str (c/now) standard)
                                           :location (first (:locations @(re-frame/subscribe [::subs/client])))}))}))
 
 (re-frame/reg-event-db
@@ -557,6 +557,7 @@
  ::can-submit-edit-invoice
  :<- [::forms/form ::new-invoice]
  (fn [{:keys [data status]} _]
+   (println (s/explain-data ::invoice/invoice data))
    (let [min-total (if (= (:total (:original data)) (:outstanding-balance (:original data)))
                      nil
                      (- (:total (:original data)) (:outstanding-balance (:original data))))]
@@ -610,6 +611,7 @@
                       :spec ::invoice/date
                       :subscription handwrite-checks}]]]
 
+
      [horizontal-field
       [:label.label  "Check number"]
       [bind-field
@@ -698,12 +700,30 @@
        [:p.help  "Date"]
        [:div.control
         [bind-field
-         [:input.input {:type "date"
+         [date-picker {:class-name "input"
+                       :class "input"
+                       :format-week-number (fn [] "")
+                       :previous-month-button-label ""
+                       :placeholder "mm/dd/yyyy"
+                       :next-month-button-label ""
+                       :next-month-label ""
+                       :type "date"
+                       :field [:date]
+                       :event change-event
+                       :spec ::invoice/date
+                       :subscription data}]
+         #_[:input.input {:type "date"
                         :field [:date]
                         :event change-event
                         :spec ::invoice/date
                         :subscription data}]]]]
 
+      
+      #_[horizontal-field
+       [:label.label "Date 2 "]
+       
+       ]
+
       [:div.field
        [:p.help  "Invoice #"]
        [:div.control

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))}