timgilbert / cljs-pikaday

A ClojureScript interface to the Pikaday javascript date-picker
MIT License
52 stars 9 forks source link

Re-frame compatibility #4

Open paulspencerwilliams opened 8 years ago

paulspencerwilliams commented 8 years ago

Hi, I know you wanted to implement re-frame compatibility to this library and wondered whether you'd managed to progress it at all? If not, would you expect much work to do so, and can I help in anyway?

coyotespike commented 8 years ago

Thought I might chime in here. I found this library very helpful, and I'm a huge of re-frame.

If you look at the source here, reagent.cljs, line 32 reads: :on-select #(when date-atom (reset! date-atom %))}.

I changed this like this: :on-select #(when date-atom (date-dispatcher %))}

This calls a function:

(defn date-dispatcher [date]
  (let [nice-date (.toLocaleDateString date "en" "%d-%b-%Y")]
     (dispatch [:enter-birthdate date])

Following closely the example Tim provides, I then used it like this:

(defn date-picker []
  [:div.form-group
   [:div.input-group
     [:span {:class "input-group-btn"}
      [:button {:class "btn" :type "button"}
       [:span {:class "fui-calendar"}]]]

     [pikaday/date-selector 
      {:date-atom (subscribe [:birthdate])
       :max-date-atom end-date
       :class "form-control"
       :type "text"
       :pikaday-attrs {:max-date today}}]]])

Notice the {:date-atom (subscribe [:birthdate]).

That was all I had to change to use this library with re-frame! Of course, I previously defined :birthdate as my subscription and :enter-birthdate as my handler.

I have since further adapted this to use a multimethod, so that I can easily add different kinds of dates, to use multiple handlers and subscriptions.

manuel-uberti commented 6 years ago

Hi, any progress on this? :)

vmpj commented 6 years ago

This seems to work just fine with re-frame:

[pikaday/date-selector {:date-atom     (re-frame.core/subscribe [:date-value])
                        :pikaday-attrs {:onSelect #(re-frame.core/dispatch [:date-changed %])}}]
manuel-uberti commented 6 years ago

Thank you @vmpj, I will try your solution soon and report back.

manuel-uberti commented 6 years ago

@vmpj: fantastic, it works! Thank you very much.

timgilbert commented 6 years ago

Sorry to have let this slip through the cracks, haven't had a lot of time to work on this library recently. I'll add a note to the README noting @vmpj's approach sometime this weekend.

manuel-uberti commented 6 years ago

@timgilbert actually, I ended up using a custom version of your work: https://github.com/manuel-uberti/boodle/blob/master/src/cljs/boodle/pikaday.cljs

I put a reference to your repository. Hope you don't mind.