cljs-pikaday icon indicating copy to clipboard operation
cljs-pikaday copied to clipboard

Re-frame compatibility

Open paulspencerwilliams opened this issue 8 years ago • 7 comments

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?

paulspencerwilliams avatar Oct 04 '15 08:10 paulspencerwilliams

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.

coyotespike avatar Oct 22 '15 01:10 coyotespike

Hi, any progress on this? :)

manuel-uberti avatar Nov 11 '17 15:11 manuel-uberti

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

vmpj avatar Mar 22 '18 09:03 vmpj

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

manuel-uberti avatar Mar 22 '18 09:03 manuel-uberti

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

manuel-uberti avatar Mar 23 '18 13:03 manuel-uberti

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.

timgilbert avatar Mar 23 '18 13:03 timgilbert

@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.

manuel-uberti avatar Mar 26 '18 07:03 manuel-uberti