Fork me on GitHub
#reagent
<
2023-06-07
>
Stuart21:06:38

Anyone know of any examples of using re-com datepicker with latest bootstrap ? OR just how to get it working at all. I've tried looking at their demo and the code for it, but it just doesn't work for me. The datepicker drop down doesnt' work at all. Nothing happens when selecting a date, it's like the on-change doesn't fire at all. The inline date picker at least sorta works, but looks crap, the styles are all messed up and from perspective is completely unusable. datepicker-dropdown - Clicking anywhere closes the picker, nothing is fired. regular datepicker - YOu can see the month selector is all messed up I'll put the code in thread.

Stuart21:06:39

Code for displaying datepicker-dropdown that doesn't work at all

(ns exfn.testing.view
  (:require [re-frame.core :as rf]
            [reagent.core :as r]
            [goog.string :as gstring]
            [goog.date.Date]
            [goog.string.format]
            [re-com.core :refer [datepicker datepicker-dropdown at]]
            [re-com.datepicker :refer [iso8601->date datepicker-parts-desc datepicker-dropdown-args-desc]]
            [re-com.validate   :refer [date-like?]]
            [exfn.utilities.events]
            [exfn.utilities.subscriptions]
            [exfn.subscriptions]))

(defn view []
  (let [model (r/atom nil)]
    (fn []
      [:main.col-md-9.ms-sm-auto.col-lg-10.px-md-4
       [:div
        [:div.d-flex.justify-content-between.flex-md-nowrap.align-items-center.pt-3.pb-2.mb-3.border-bottom
         [:h1.h2 "Testing"]]
        [:div.row
         [datepicker-dropdown
          :model model
          :placeholder "Date"
          :show-weeks? false
          :show-today? false
          :start-of-week 0
          :src (at)
          :format        "dd MMM, yyyy"
          :goog? false
          :on-change (fn [v]
                       (prn "date changed" v)
                       (reset! model v))]]]])))

Stuart21:06:50

No errors to the console

Stuart21:06:10

Really struggling with the re-com demo documentation, every page for a particular component seems to have so many other re-com things on it, that I have absolutely no idea what is necessary or not. Also, am I being stupid thinking that basic styling (where it's usable) would work just out the box ? Or is it expected that I should be styling every component of the drop down to get it working. I nabbed the css from the re-com demo site and it slightly improves it, but without that, just using the default styling it looks even worse:

p-himik22:06:16

According to the README, the required Bootstrap version is 3. The latest version is 5. I imagine they aren't entirely backward compatible.

Stuart22:06:14

yeah, i'm on the latest bootstrap, I expect that's the issue.

Stuart22:06:51

I already have a working date picker using a react package,but was hoping to move away from it as it makes building the project more complicated (it requires compiling css from what I remember when I got it working).

p-himik22:06:46

I am yet to encounter the case where compiling CSS is required to get an NPM package working. But I haven't used every React package out there. :) There should be many date pickers to choose from. Re-com's license allows you to just copy the code of the component and adapt it to your needs. Or you can use some NPM package for it. Or a full-on UI framework, like e.g. MUI.

jcb07:06:06

Their use case is quite specific, so, there are a few css 'overrides' in https://github.com/day8/re-com/blob/master/run/resources/public/assets/css/re-com.css which might account for any discrepancies in styling (other than the more obvious version issue). When I've used it for prototyping over the years, I've found having a local copy of their bootstrap file and the above css file to be needed for these kinds of issues.