From a05901c0e8554c644691f7ca97ea9f710ea290b2 Mon Sep 17 00:00:00 2001
From: Marco Ancona <marco.ancona@inf.ethz.ch>
Date: Fri, 2 Nov 2018 17:05:57 +0100
Subject: [PATCH 1/4] Handle leading zeros and length limit

Advantages:
- no extra span element for leading zeros (which is difficult to keep aligned to the rest) and makes selection weird
- keep expected behavior for `showLeadingZeros`
- ensures the user does not type more than 2 digits (which is always invalid day)
- the user can type a sequence of numbers, just the last two will be used (this feels like the most natural behavior for this kind of field to me)

I only made this changes to the DatInput, but I could also extend to the other inputs if we agree this makes sense.
---
 src/DateInput/DayInput.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/DateInput/DayInput.jsx b/src/DateInput/DayInput.jsx
index 45f1e512..29450ee5 100644
--- a/src/DateInput/DayInput.jsx
+++ b/src/DateInput/DayInput.jsx
@@ -44,12 +44,11 @@ export default class DayInput extends PureComponent {
     const {
       className, disabled, itemRef, value, onChange, onKeyDown, required, showLeadingZeros,
     } = this.props;
-
+    value = parseInt(value, 10) ? parseInt(value, 10).toString().slice(-2) : "";
+    if (showLeadingZeros && value.length === 1) value = "0" + value;
     const name = 'day';
-    const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
-
+    
     return [
-      (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
       <input
         key="day"
         className={mergeClassNames(

From 8e2ece5133a992a0f9db55b19d7899f2d5339b69 Mon Sep 17 00:00:00 2001
From: Marco Ancona <marco.ancona@inf.ethz.ch>
Date: Fri, 2 Nov 2018 17:11:27 +0100
Subject: [PATCH 2/4] minor

---
 src/DateInput/DayInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DateInput/DayInput.jsx b/src/DateInput/DayInput.jsx
index 29450ee5..534db0e4 100644
--- a/src/DateInput/DayInput.jsx
+++ b/src/DateInput/DayInput.jsx
@@ -76,7 +76,7 @@ export default class DayInput extends PureComponent {
         }}
         required={required}
         type="number"
-        value={value !== null ? value : ''}
+        value={value}
       />,
     ];
   }

From b4578571ad22c1ef4a8496a2ed86ad128e143186 Mon Sep 17 00:00:00 2001
From: Marco Ancona <marco.ancona@inf.ethz.ch>
Date: Fri, 2 Nov 2018 17:17:27 +0100
Subject: [PATCH 3/4] minor

---
 src/DateInput/DayInput.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/DateInput/DayInput.jsx b/src/DateInput/DayInput.jsx
index 534db0e4..8a8b7631 100644
--- a/src/DateInput/DayInput.jsx
+++ b/src/DateInput/DayInput.jsx
@@ -44,8 +44,8 @@ export default class DayInput extends PureComponent {
     const {
       className, disabled, itemRef, value, onChange, onKeyDown, required, showLeadingZeros,
     } = this.props;
-    value = parseInt(value, 10) ? parseInt(value, 10).toString().slice(-2) : "";
-    if (showLeadingZeros && value.length === 1) value = "0" + value;
+    let v = parseInt(value, 10) ? parseInt(value, 10).toString().slice(-2) : "";
+    if (showLeadingZeros && v.length === 1) v = "0" + v;
     const name = 'day';
     
     return [
@@ -76,7 +76,7 @@ export default class DayInput extends PureComponent {
         }}
         required={required}
         type="number"
-        value={value}
+        value={v}
       />,
     ];
   }

From 25d010420ed356fbadfe6489dad4e8ea30c59821 Mon Sep 17 00:00:00 2001
From: Marco Ancona <marco.ancona@inf.ethz.ch>
Date: Fri, 2 Nov 2018 17:24:41 +0100
Subject: [PATCH 4/4] minor

---
 src/DateInput/DayInput.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/DateInput/DayInput.jsx b/src/DateInput/DayInput.jsx
index 8a8b7631..9225ccd6 100644
--- a/src/DateInput/DayInput.jsx
+++ b/src/DateInput/DayInput.jsx
@@ -44,8 +44,8 @@ export default class DayInput extends PureComponent {
     const {
       className, disabled, itemRef, value, onChange, onKeyDown, required, showLeadingZeros,
     } = this.props;
-    let v = parseInt(value, 10) ? parseInt(value, 10).toString().slice(-2) : "";
-    if (showLeadingZeros && v.length === 1) v = "0" + v;
+    let v = parseInt(value, 10) ? parseInt(value, 10).toString().slice(-2) : '';
+    if (showLeadingZeros && v.length === 1) v = '0' + v;
     const name = 'day';
     
     return [
@@ -54,7 +54,6 @@ export default class DayInput extends PureComponent {
         className={mergeClassNames(
           `${className}__input`,
           `${className}__day`,
-          hasLeadingZero && `${className}__input--hasLeadingZero`,
         )}
         disabled={disabled}
         name={name}