From 43711f234dfed94461272b0bd625a36886b5d73b Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Tue, 21 Jun 2022 22:59:46 +0800
Subject: [PATCH] fix(console): use custom icon in date input (#1172)

---
 packages/console/src/assets/images/calendar.svg           | 3 +++
 .../console/src/components/TextInput/index.module.scss    | 8 ++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 packages/console/src/assets/images/calendar.svg

diff --git a/packages/console/src/assets/images/calendar.svg b/packages/console/src/assets/images/calendar.svg
new file mode 100644
index 000000000..5a724284b
--- /dev/null
+++ b/packages/console/src/assets/images/calendar.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0013 15.8359C10.1661 15.8359 10.3272 15.7871 10.4643 15.6955C10.6013 15.6039 10.7081 15.4738 10.7712 15.3215C10.8343 15.1692 10.8508 15.0017 10.8186 14.84C10.7865 14.6784 10.7071 14.5299 10.5906 14.4133C10.474 14.2968 10.3255 14.2174 10.1639 14.1853C10.0022 14.1531 9.83467 14.1696 9.6824 14.2327C9.53013 14.2958 9.39998 14.4026 9.30841 14.5396C9.21684 14.6767 9.16797 14.8378 9.16797 15.0026C9.16797 15.2236 9.25577 15.4356 9.41205 15.5919C9.56833 15.7481 9.78029 15.8359 10.0013 15.8359ZM14.168 15.8359C14.3328 15.8359 14.4939 15.7871 14.6309 15.6955C14.768 15.6039 14.8748 15.4738 14.9379 15.3215C15.0009 15.1692 15.0174 15.0017 14.9853 14.84C14.9531 14.6784 14.8738 14.5299 14.7572 14.4133C14.6407 14.2968 14.4922 14.2174 14.3305 14.1853C14.1689 14.1531 14.0013 14.1696 13.8491 14.2327C13.6968 14.2958 13.5666 14.4026 13.4751 14.5396C13.3835 14.6767 13.3346 14.8378 13.3346 15.0026C13.3346 15.2236 13.4224 15.4356 13.5787 15.5919C13.735 15.7481 13.947 15.8359 14.168 15.8359ZM14.168 12.5026C14.3328 12.5026 14.4939 12.4537 14.6309 12.3622C14.768 12.2706 14.8748 12.1404 14.9379 11.9882C15.0009 11.8359 15.0174 11.6683 14.9853 11.5067C14.9531 11.345 14.8738 11.1966 14.7572 11.08C14.6407 10.9635 14.4922 10.8841 14.3305 10.8519C14.1689 10.8198 14.0013 10.8363 13.8491 10.8994C13.6968 10.9624 13.5666 11.0693 13.4751 11.2063C13.3835 11.3433 13.3346 11.5045 13.3346 11.6693C13.3346 11.8903 13.4224 12.1022 13.5787 12.2585C13.735 12.4148 13.947 12.5026 14.168 12.5026ZM10.0013 12.5026C10.1661 12.5026 10.3272 12.4537 10.4643 12.3622C10.6013 12.2706 10.7081 12.1404 10.7712 11.9882C10.8343 11.8359 10.8508 11.6683 10.8186 11.5067C10.7865 11.345 10.7071 11.1966 10.5906 11.08C10.474 10.9635 10.3255 10.8841 10.1639 10.8519C10.0022 10.8198 9.83467 10.8363 9.6824 10.8994C9.53013 10.9624 9.39998 11.0693 9.30841 11.2063C9.21684 11.3433 9.16797 11.5045 9.16797 11.6693C9.16797 11.8903 9.25577 12.1022 9.41205 12.2585C9.56833 12.4148 9.78029 12.5026 10.0013 12.5026ZM15.8346 2.5026H15.0013V1.66927C15.0013 1.44826 14.9135 1.2363 14.7572 1.08002C14.6009 0.923735 14.389 0.835938 14.168 0.835938C13.947 0.835938 13.735 0.923735 13.5787 1.08002C13.4224 1.2363 13.3346 1.44826 13.3346 1.66927V2.5026H6.66797V1.66927C6.66797 1.44826 6.58017 1.2363 6.42389 1.08002C6.26761 0.923735 6.05565 0.835938 5.83464 0.835938C5.61362 0.835938 5.40166 0.923735 5.24538 1.08002C5.0891 1.2363 5.0013 1.44826 5.0013 1.66927V2.5026H4.16797C3.50493 2.5026 2.86904 2.766 2.4002 3.23484C1.93136 3.70368 1.66797 4.33956 1.66797 5.0026V16.6693C1.66797 17.3323 1.93136 17.9682 2.4002 18.437C2.86904 18.9059 3.50493 19.1693 4.16797 19.1693H15.8346C16.4977 19.1693 17.1336 18.9059 17.6024 18.437C18.0712 17.9682 18.3346 17.3323 18.3346 16.6693V5.0026C18.3346 4.33956 18.0712 3.70368 17.6024 3.23484C17.1336 2.766 16.4977 2.5026 15.8346 2.5026ZM16.668 16.6693C16.668 16.8903 16.5802 17.1022 16.4239 17.2585C16.2676 17.4148 16.0556 17.5026 15.8346 17.5026H4.16797C3.94696 17.5026 3.73499 17.4148 3.57871 17.2585C3.42243 17.1022 3.33464 16.8903 3.33464 16.6693V9.16927H16.668V16.6693ZM16.668 7.5026H3.33464V5.0026C3.33464 4.78159 3.42243 4.56963 3.57871 4.41335C3.73499 4.25707 3.94696 4.16927 4.16797 4.16927H5.0013V5.0026C5.0013 5.22362 5.0891 5.43558 5.24538 5.59186C5.40166 5.74814 5.61362 5.83594 5.83464 5.83594C6.05565 5.83594 6.26761 5.74814 6.42389 5.59186C6.58017 5.43558 6.66797 5.22362 6.66797 5.0026V4.16927H13.3346V5.0026C13.3346 5.22362 13.4224 5.43558 13.5787 5.59186C13.735 5.74814 13.947 5.83594 14.168 5.83594C14.389 5.83594 14.6009 5.74814 14.7572 5.59186C14.9135 5.43558 15.0013 5.22362 15.0013 5.0026V4.16927H15.8346C16.0556 4.16927 16.2676 4.25707 16.4239 4.41335C16.5802 4.56963 16.668 4.78159 16.668 5.0026V7.5026ZM5.83464 12.5026C5.99945 12.5026 6.16057 12.4537 6.29761 12.3622C6.43465 12.2706 6.54146 12.1404 6.60454 11.9882C6.66761 11.8359 6.68411 11.6683 6.65196 11.5067C6.6198 11.345 6.54043 11.1966 6.42389 11.08C6.30735 10.9635 6.15886 10.8841 5.99721 10.8519C5.83556 10.8198 5.668 10.8363 5.51573 10.8994C5.36346 10.9624 5.23331 11.0693 5.14174 11.2063C5.05018 11.3433 5.0013 11.5045 5.0013 11.6693C5.0013 11.8903 5.0891 12.1022 5.24538 12.2585C5.40166 12.4148 5.61362 12.5026 5.83464 12.5026ZM5.83464 15.8359C5.99945 15.8359 6.16057 15.7871 6.29761 15.6955C6.43465 15.6039 6.54146 15.4738 6.60454 15.3215C6.66761 15.1692 6.68411 15.0017 6.65196 14.84C6.6198 14.6784 6.54043 14.5299 6.42389 14.4133C6.30735 14.2968 6.15886 14.2174 5.99721 14.1853C5.83556 14.1531 5.668 14.1696 5.51573 14.2327C5.36346 14.2958 5.23331 14.4026 5.14174 14.5396C5.05018 14.6767 5.0013 14.8378 5.0013 15.0026C5.0013 15.2236 5.0891 15.4356 5.24538 15.5919C5.40166 15.7481 5.61362 15.8359 5.83464 15.8359Z" fill="currentColor"/>
+</svg>
diff --git a/packages/console/src/components/TextInput/index.module.scss b/packages/console/src/components/TextInput/index.module.scss
index aa5ae65ee..fd126feff 100644
--- a/packages/console/src/components/TextInput/index.module.scss
+++ b/packages/console/src/components/TextInput/index.module.scss
@@ -48,6 +48,14 @@
 
     &[type='date'] {
       height: 20px;
+
+      &::-webkit-calendar-picker-indicator {
+        background-image: none;
+        background-color: var(--color-icon);
+        mask-image: url('../../assets/images/calendar.svg');
+        width: 16px;
+        height: 18px;
+      }
     }
   }