cljs-pikaday
cljs-pikaday copied to clipboard
Re-frame compatibility
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?
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.
Hi, any progress on this? :)
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 %])}}]
Thank you @vmpj, I will try your solution soon and report back.
@vmpj: fantastic, it works! Thank you very much.
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 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.