om InputDatePicker

om InputDatePicker

(ns date-input.core
  (:require-macros [cljs.core.async.macros :refer [go]] )
  (:require  [cljs.core.async :refer [put! chan <!]]
              [om.core :as om :include-macros true]
              [om.dom :as dom :include-macros true]
              [clojure.string :as str]
              [goog.ui.InputDatePicker :as dp])
    (:import [goog.i18n DateTimeFormat DateTimeParse]))

(enable-console-print!)

(def date-format "dd/MM/yyyy")

(defn fmt
  "Format a date using either the built-in goog.i18n.DateTimeFormat.Format enum or a formatting string like \"dd MMMM yyyy\""
  [date-format date]
  (.format (goog.i18n.DateTimeFormat. date-format)
    (js/Date. date)))

(defn parse-date [s]
  (let [p (goog.i18n.DateTimeParse. date-format)
        d (js/Date.)]
    (.strictParse p s d)
    d))


(defn handle-submit [owner]
  (js/alert (om/get-state owner [:date-aller])))

(defn user-inputs
  [data owner]
  (reify
    om/IInitState
    (init-state [_]
     {:date-aller (js/Date.)
      :chan (chan)})
    om/IWillMount
    (will-mount [this]
                (let [chan (om/get-state owner :chan)]
                  (go
                   (loop []
                     (let [[k v] (<! chan)]
                       (prn  k v)
                       (om/set-state! owner [:date-aller] (parse-date v)))
                     (recur)))))
    om/IDidMount
    (did-mount [_]
      (.decorate (goog.ui.InputDatePicker. (goog.i18n.DateTimeFormat. date-format) (goog.i18n.DateTimeParse. date-format) nil nil) (om/get-node owner "dateAller")))
    om/IRenderState
    (render-state [_ {:keys [date-aller chan] :as state}]
                  (let [_ (prn state)]
                   (dom/div #js {:className "form"}
                             (dom/fieldset #js {:className "inputs"}
                                           (dom/div #js {:className "field"}
                                                    (dom/label #js {:className "label"
                                                                    :htmlFor "dateAller"} "Date : ")
                                                    (dom/input #js {:className "date"
                                                                    :ref "dateAller"
                                                                    :id "dateAller"
                                                                    :placeholder "dd/mm/yyyy"
                                                                    ;:value (fmt "dd/MM/yyyy" date-aller)
                                                                    :onBlur #(put! chan [:onBlur (-> % .-target .-value)])
                                                                    :onChange #(put! chan [:onChange (-> % .-target .-value)])
                                                                    }))
                                           (dom/button #js {:onClick #(handle-submit owner)} "Click ")))))))




(om/root
 user-inputs
 {}
 {:target (. js/document (getElementById "app"))})