I am trying to create a very basic date input by drafting like this.
(defn date-input []
(let [d (r/atom "2024-12-22")]
(fn []
[:input {:id :testing-date-input
:type :date
:value @d
:on-change #(reset! d (-> % .-target .-value))}])))
But it seems I am not allowed to enter 2 consecutive digits for month or day. For example "12" for the month. When I type "1" and then "2", the month changes to "02" not "12".
This behavior puzzled me, so I checked other frontend languages - in JS and F#, this error isn't observed.
Probably I am missing something. Does anyone have a clue?I cannot reproduce it in Chrome. Reagent 1.2.0.
Trying it this way:
1. After the page is rendered, 12/22/2024 is shown in the input
2. I click on 12, it gets selected
3. I press 1 - the subfield becomes 01
4. I press 2 - the subfield becomes 12, focus moves to 22
That's interesting. I am also using Reagent 1.2.0.
This is what I see when I typed in the UI as you said.
At the step 4 of yours, the subfield becomes 02 .
Were you using my code snippet above?
Yes, this is the full code:
(ns hello-world.core
(:require [reagent.core :as r]
[reagent.dom :as rd]))
(defn date-input []
(let [d (r/atom "2024-12-22")]
(fn []
[:input {:id :testing-date-input
:type :date
:value @d
:on-change #(reset! d (-> % .-target .-value))}])))
(defn main []
(rd/render [date-input] (js/document.getElementById "app")))Ah, I am using reagent.dom.client/render (as opposed to what you use, reagent.dom/render) and that creates the issue.
I am 👀 the code to see what's the diff between these render fns.