Merge branch 'dash8'

day8 · Jul 23, 2024 · 0527d66 · 0527d66
2 parents 68a36f5 + f21c1f5
commit 0527d66
Show file tree

Hide file tree

Showing 5 changed files with 1,029 additions and 4 deletions.
diff --git a/run/resources/public/assets/css/re-com.css b/run/resources/public/assets/css/re-com.css
@@ -744,6 +744,126 @@ fieldset[disabled] .btn {
     background-color: #F7F7F7
 }
 
+/*daterange*/
+
+.rc-daterange-td-basic {
+  padding: 5px;
+  width: 30px;
+  text-align: center;
+  color: #2c2d2ecb;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+.daterange-default-td:hover {
+  cursor: pointer;
+  background: #357ebd;
+  color: #FFF;
+  /*background-color: #889afd3b*/
+}
+
+.daterange-week {
+  font-size: 80%;
+  width: 14px;
+  text-align: left;
+  color: #ccc
+}
+
+.daterange-interval-td {
+  background-color: #b0d2ffb4;
+}
+
+.daterange-interval-td:hover {
+  cursor: pointer;
+  background: #357ebd;
+  color: #FFF;
+  /*background-color: #50b4db*/
+}
+
+.daterange-start-td {
+  cursor: pointer;
+  background-color: #3ab0ffbd;
+  border-radius: 5px 0px 0px 5px;
+}
+
+.daterange-end-td {
+  cursor: pointer;
+  background-color: #3ab0ffbd;
+  border-radius: 0px 5px 5px 0px;
+}
+
+.daterange-start-end-td {
+  cursor: pointer;
+  background-color: #3ab0ffbd;
+  border-radius: 5px 5px 5px 5px;
+}
+
+.daterange-start-td:hover, .daterange-end-td:hover, .daterange-start-end-td:hover {
+  cursor: pointer;
+  color: white;
+  background-color: #357ebd;
+}
+
+.daterange-temp-td {
+  background-color: #889afd3b;
+}
+
+.daterange-temp-td:hover {
+  background-color: #357ebd;
+  border-radius: 0px 5px 5px 0px;
+  cursor: pointer;
+  color: white;
+}
+
+.rc-daterange-nav-icon {
+  height: 24px;
+  width: 24px;
+}
+
+.rc-daterange-nav-button:hover {
+  background-color: #357ebd;
+  cursor: pointer;
+  color: white;
+}
+
+.rc-daterange-nav-button path {
+  fill: #357ebd;
+}
+
+.rc-daterange-nav-button:hover path {
+  fill: #FFF
+}
+
+.daterange-day-title {
+  text-align: center;
+  font-weight: 500;
+  padding: 4px;
+}
+
+.daterange-disabled-td {
+  opacity: 0.4;
+}
+
+.daterange-today {
+  background-color: #ffd413;
+  border-radius: 100px;
+}
+
+.daterange-today:hover {
+  cursor: pointer;
+  color: white;
+  background-color: #9e8100;
+}
+
+.rc-daterange-month-title {
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.rc-daterange-year-title {
+  font-weight: 630;
+}
+
 /*----------------------------------------------------------------------------------------
   END OF DATE PICKER SECTION...
 

diff --git a/src/re_com/datepicker.cljs b/src/re_com/datepicker.cljs
@@ -505,6 +505,7 @@
     [{:name :model          :required false                               :type "satisfies DateTimeProtocol | r/atom" :validate-fn date-like?                :description [:span "the selected date. If provided, should pass pred " [:code ":selectable-fn"] ". If not provided, (now->utc) will be used and the returned date will be a " [:code "goog.date.UtcDateTime"]]}
      {:name :on-change      :required true                                :type "satisfies DateTimeProtocol -> nil"   :validate-fn fn?                       :description [:span "called when a new selection is made. Returned type is the same as model (unless model is nil, in which case it will be " [:code "goog.date.UtcDateTime"] ")"]}
      {:name :disabled?      :required false  :default false               :type "boolean | atom"                                                             :description "when true, the user can't select dates but can navigate"}
+     {:name :initial-display :required false                              :type "satisfies DateTimeProtocol | r/atom" :validate-fn date-like?                :description "set the months shown when no model is selected, defaults to the current month"}
      {:name :selectable-fn  :required false  :default "(fn [date] true)"  :type "function"                            :validate-fn fn?                       :description "This predicate function is called with one argument, the date. If it answers false, day will be shown disabled and can't be selected."}
      {:name :show-weeks?    :required false  :default false               :type "boolean"                                                                    :description "when true, week numbers are shown to the left"}
      {:name :show-today?    :required false  :default false               :type "boolean"                                                                    :description "when true, today's date is highlighted"}
@@ -521,12 +522,12 @@
      {:name :debug-as       :required false                               :type "map"                                 :validate-fn map?                      :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}]))
 
 (defn datepicker
-  [& {:keys [model] :as args}]
+  [& {:keys [model initial-display] :as args}]
   (or
    (validate-args-macro datepicker-args-desc args)
    (let [external-model (reagent/atom (deref-or-value model))  ;; Set model type in stone on creation of this datepicker instance
          internal-model (reagent/atom @external-model)         ;; Holds the last known external value of model, to detect external model changes
-         display-month  (reagent/atom (cljs-time/first-day-of-the-month (or @internal-model (now->utc))))]
+         display-month  (reagent/atom (cljs-time/first-day-of-the-month (or @internal-model initial-display (now->utc))))]
      (fn datepicker-render
        [& {:keys [model on-change disabled? start-of-week hide-border? class style attr parts src debug-as]
            :or   {start-of-week 6} ;; Default to Sunday
@@ -540,7 +541,7 @@
           (when (not= @external-model latest-ext-model) ;; Has model changed externally?
             (reset! external-model latest-ext-model)
             (reset! internal-model latest-ext-model)
-            (reset! display-month  (cljs-time/first-day-of-the-month (or @internal-model (now->utc)))))
+            (reset! display-month  (cljs-time/first-day-of-the-month (or @internal-model initial-display (now->utc)))))
           [main-div-with
            [:table
             (merge
@@ -597,7 +598,8 @@
   (or
    (validate-args-macro datepicker-dropdown-args-desc args)
    (let [shown?         (reagent/atom false)
-         cancel-popover #(reset! shown? false)]
+         cancel-popover #(reset! shown? false)
+         position       :below-left]
      (fn datepicker-dropdown-render
        [& {:keys [model show-weeks? on-change format goog? no-clip? placeholder width disabled? position-offset position src debug-as]
            :or {no-clip? true, position-offset 0, position :below-left}