Ab sofort ist der Login auf der Weboberfläche von git.fh-muenster.de bevorzugt über FH Muenster SSO möglich.

Commit f5e5ae0b authored by Bruno Burke's avatar Bruno Burke 😁

simple datepicker/timepicker without bulma-calendar

parent 2ad40cd4
Pipeline #45105 passed with stages
in 1 minute and 34 seconds
......@@ -15,8 +15,7 @@
"quill": "^1.3.5",
"prismjs": "1.19.0",
"katex": "0.12.0",
"bulma": "0.9.0",
"bulma-calendar": "6.0.0"
"bulma": "0.9.0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0"
......
......@@ -5,8 +5,6 @@
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="node_modules/tinymce/tinymce.js"></script>
<link rel="stylesheet" href="node_modules/bulma/css/bulma.min.css">
<link rel="stylesheet" href="node_modules/bulma-calendar/dist/css/bulma-calendar.min.css">
<script src="node_modules/bulma-calendar/dist/js/bulma-calendar.min.js"></script>
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="css/screen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
......
......@@ -598,7 +598,41 @@
:parse parseDate
:showDaysInNextAndPreviousMonths true})
(defn datepicker
(defn format-date [date]
(let [month (+ (.getMonth date) 1)
day (.getDate date)]
(str (.getFullYear date)
"-"
(when-not (>= month 10)
0)
(+ (.getMonth date) 1)
"-"
(when-not (>= day 10)
0)
day)))
(defn datepicker [{:keys [field-class icon input-class input-size
label-icon value placeholder on-change
label disabled tooltip autocomplete]}]
(fn [{:keys [field-class icon input-class input-size
label-icon value placeholder on-change
label disabled tooltip autocomplete]}]
[:div.field
[:label.label
label]
[:div.control
[:input {:type :date
:disabled disabled
:value (when value
(format-date value))
:on-change #(on-change
(-> %
.-target
.-valueAsDate))}]
]]))
#_(defn datepicker
[{:keys [field-class icon input-class input-size
label-icon value placeholder on-change
label disabled tooltip autocomplete]}]
......@@ -651,7 +685,26 @@
])}
)))
(defn timepicker
(defn timepicker [{:keys [field-class icon input-class input-size
label-icon value placeholder on-change
label disabled tooltip autocomplete]}]
(fn [{:keys [field-class icon input-class input-size
label-icon value placeholder on-change
label disabled tooltip autocomplete]}]
[:div.field
[:label.label
label]
[:div.control
[:input {:type :time
:value value
:on-change #(on-change
(-> %
.-target
.-value))}]
]]))
#_(defn timepicker
[{:keys [field-class icon input-class input-size
value on-change placeholder label
disabled tooltip autocomplete]}]
......
......@@ -36,13 +36,12 @@
:placeholder "PLATZHALTER"
:label "Tags"}]))
(defcard "## Calendar Datepicker")
(defcard "## Datepicker")
(defonce dateinput (reagent/atom (js/Date.)))
(defcard-rg input-datepicker
(fn []
[:div
[:p "Currently not supported..."]
#_[bulma/datepicker
[bulma/datepicker
{:label "Startdatum"
:placeholder "Datum"
:value (if-let [date @dateinput]
......@@ -56,7 +55,7 @@
(.setMonth (.getMonth %))
(.setDate (.getDate %))
(.setFullYear (.getFullYear %)))))
true)}
%)}
]]
))
......@@ -66,6 +65,29 @@
(str @dateinput)]
))
(defcard "## Timepicker")
(defonce timeinput (reagent/atom nil))
(defcard-rg input-datepicker
(fn []
[:div
[bulma/timepicker
{:label "Startzeit"
:placeholder "Zeit"
:value (when-let [time @timeinput]
time)
:on-change #(do
(reset! timeinput
%))}
]]
))
(defcard-rg selected-time
(fn []
[:p
(str @timeinput)]
))
(defcard-rg modal-panel
(fn []
(reagent/with-let [visible? (reagent/atom false)]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment