date-field.cljs

(defn Date [props owner]
  "
  Date picker field with popup calendar:
   - can type date
   - can pick date from calendar

  Props:
    :label
    :value
    :on-date-change
    :help
    :required
    :errors
    :is-hidden
    :show-errors
    :addon-before
    :addon-after

  "
  (reify

    om/IDisplayName
    (display-name [_] "Date")

    om/IWillMount
    (will-mount [_]
      (match-state-to-props owner :value normalise-date-string))

    om/IDidMount
    (did-mount [_]
      (let [picker (new js/Pikaday #js
          {:field    (om/get-node owner "datepicker")
           :onSelect #(if-let [on-pikaday (om/get-props owner :on-pikaday)]
                       (on-pikaday (normalise-date-string %)))})]
        (om/set-state! owner :picker picker)))

    om/IDidUpdate
    (did-update [_ old-props old-state]
      (let [new-value (om/get-props owner :value)
            old-value (:value old-props)
            prop-value-changed? (not= old-value new-value)]
        (if prop-value-changed?
          (om/set-state! owner :value (normalise-date-string new-value)))))

    om/IRenderState
    (render-state [_ {:keys [value picker]
                      :or   {on-date-change identity}}]
      (let [{:keys [is-hidden]} props]
        (if-not is-hidden
          (html [:div.form-group {:class (validation-state props)
                                  :style {:width "auto"}}
                 (label-template props)
                 [:div.form-inline
                  [:div.input-group {:key "ig"}
                   [:input.form-control (assoc props
                                          :ref "datepicker"
                                          :on-change #(handle-date-change owner %)
                                          :on-blur #(handle-date-blur owner %)
                                          :value value
                                          :key "ifc")]
                   [:span.input-group-btn
                    [:button.btn {:on-click #(do (if (.isVisible picker)
                                                   (.hide picker)
                                                   (.show picker)))}
                     [:span.glyphicon.glyphicon-calendar]]]]]
                 (help-block-template props)]))))))