[improved] make date/datetime-local input same height as other input,…

… resolves #868
sciseo · Jun 7, 2016 · 2820a0b · 2820a0b
1 parent d644079
commit 2820a0b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 ### 2016.06 W2
 
+**CSS**:
+
+- `Improved` #868 处理 `date`/`datetime-local` 类型的 `input` 在较旧版本 Safari 等浏览器上高度与其他类型的输入框不一致问题。
+
 **JS**:
 
 - `Fixed` #880 Selected `change` 事件在支持 MutationObserver 的浏览器上无限触发问题。

diff --git a/less/form.less b/less/form.less
@@ -105,6 +105,8 @@ output {
 .@{ns}form textarea,
 .@{ns}form input[type="text"],
 .@{ns}form input[type="password"],
+// `datetime` has been removed from WHATWG HTML
+// https://github.com/whatwg/html/issues/336
 .@{ns}form input[type="datetime"],
 .@{ns}form input[type="datetime-local"],
 .@{ns}form input[type="date"],
@@ -188,6 +190,31 @@ output {
   }
 }
 
+// #868
+// fixes datetime input height on old webkit browsers
+// @see http://stackoverflow.com/questions/18967852/input-type-date-in-ios-7
+input[type="datetime-local"],
+input[type="date"] {
+  .datetime-height(@font-size) {
+    @rem-height: @font-size * (unit(@input-padding) * 2 + @form-line-height);
+    height: floor(unit(@rem-height) * 10 + 2) * 1px;
+  }
+
+  .@{ns}form &,
+  &.@{ns}form-field {
+    .datetime-height(@form-font-size);
+
+    &.@{ns}input-sm {
+      .datetime-height(@form-font-size-sm);
+    }
+
+    .@{ns}input-lg {
+      .datetime-height(@form-font-size-lg);
+    }
+  }
+}
+
+
 /* help text */
 
 .@{ns}form-help {