working on calendar.

src/cljs/auto_ap/events.cljs

@@ -74,6 +74,7 @@
 (re-frame/reg-event-db
  ::change-form
  (fn  [db [_ location field value]]
+   (println field value)
    (assoc-in db (into location field) value)))
 
 (re-frame/reg-event-db

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

@@ -13,7 +13,8 @@
             [auto-ap.views.components.modal :refer [modal action-modal]]
             [auto-ap.views.components.typeahead :refer [typeahead]]
             [auto-ap.subs :as subs]
-            [auto-ap.events :as events]))
+            [auto-ap.events :as events]
+            [bulma-calendar.core :as bc]))
 
 (re-frame/reg-sub
  ::invoice-page
@@ -265,6 +266,15 @@
                                     :max outstanding-balance
                                     :step "0.01"}]]]]]])]]])))
 
+(defn my-date [props]
+  (let [cal (r/atom nil)]
+    (r/create-class
+     {:component-did-mount (fn [this]
+                              (reset! cal (new bc (r/dom-node this) (clj->js {:overlay false :dateFormat "mm/dd/yyyy"} )))
+                             nil)
+      :reagent-render (fn [props]
+                        [:input.input (merge props {:on-blur (fn [] (js/setTimeout  100 #(.hide @cal)) )}) ])})))
+
 
 
 (defn new-invoice-modal []
@@ -275,6 +285,7 @@
                    :action-text "Create"
                    :save-event [::create-invoice]
                    :can-submit? (s/valid? ::invoice/invoice data)}
+
      [horizontal-field
       [:label.label  "Vendor"]
       [bind-field
@@ -286,13 +297,14 @@
                    :subscription data}]]]
      [horizontal-field
       [:label.label  "Date"]
-      [bind-field
-       [:input.input {:type "text"
-                      :field [:date]
-                      :event change-event
-                      :spec ::invoice/date
-                      :subscription data}]]]
 
+      
+      [bind-field
+       [my-date {:type "text"
+                 :field [:date]
+                 :event change-event
+                 :spec ::invoice/date
+                 :subscription data}]]] 
      [horizontal-field
       [:label.label  "Company"]
       [bind-field