feat(h5): 日期类型 picker 在桌面 Chrome、Firefox 浏览器默认使用系统日历

src/platforms/h5/view/components/picker/index.vue

@@ -19,9 +19,10 @@
         />
       </transition>
       <div
+        v-if="!system"
         :class="{ 'uni-picker-toggle': visible }"
         :style="popupStyle.content"
-        class="uni-picker"
+        class="uni-picker-custom"
       >
         <div
           class="uni-picker-header"
@@ -82,6 +83,21 @@
     <div>
       <slot />
     </div>
+    <div
+      v-if="system"
+      class="uni-picker-system"
+    >
+      <input
+        ref="input"
+        :value="valueSync"
+        :type="mode"
+        tabindex="-1"
+        :min="start"
+        :max="end"
+        :class="[system, popupStyle.dock]"
+        @change.stop="_input"
+      >
+    </div>
     <keypress
       :disable="!visible"
       @esc="_cancel"
@@ -107,7 +123,7 @@ function getDefaultStartValue () {
         return year.toString()
       case fields.MONTH:
         return year + '-01'
-      case fields.DAY:
+      default:
         return year + '-01-01'
     }
   }
@@ -125,7 +141,7 @@ function getDefaultEndValue () {
         return year.toString()
       case fields.MONTH:
         return year + '-12'
-      case fields.DAY:
+      default:
         return year + '-12-31'
     }
   }
@@ -176,15 +192,12 @@ export default {
       type: String,
       default: mode.SELECTOR,
       validator (val) {
-        return Object.values(mode).indexOf(val) >= 0
+        return Object.values(mode).includes(val)
       }
     },
     fields: {
       type: String,
-      default: 'day',
-      validator (val) {
-        return Object.values(fields).indexOf(val) >= 0
-      }
+      default: ''
     },
     start: {
       type: String,
@@ -234,7 +247,7 @@ export default {
               return [dateArray[0]]
             case fields.MONTH:
               return [dateArray[0], dateArray[1]]
-            case fields.DAY:
+            default:
               return [dateArray[0], dateArray[1], dateArray[2]]
           }
         }
@@ -263,6 +276,16 @@ export default {
         return type
       }
       return String(navigator.vendor).indexOf('Apple') === 0 && navigator.maxTouchPoints > 0 ? selectorType.PICKER : selectorType.SELECT
+    },
+    system () {
+      if (this.mode === mode.DATE && !Object.values(fields).includes(this.fields) && this.isDesktop && /win|mac/i.test(navigator.platform)) {
+        if (navigator.vendor === 'Google Inc.') {
+          return 'chrome'
+        } else if (/Firefox/.test(navigator.userAgent)) {
+          return 'firefox'
+        }
+      }
+      return ''
     }
   },
   watch: {
@@ -542,7 +565,15 @@ export default {
         value
       })
     },
-    _cancel () {
+    _cancel ($event) {
+      if (this.system === 'firefox') {
+        // Firefox 在 input 同位置区域点击无法隐藏控件
+        const { top, left, width, height } = this.popover
+        const { pageX, pageY } = $event
+        if (pageX > left && pageX < left + width && pageY > top && pageY < top + height) {
+          return
+        }
+      }
       this._close()
       this.$trigger('cancel', {}, {})
     },
@@ -559,6 +590,12 @@ export default {
       if (this.mode === mode.SELECTOR && this.selectorTypeComputed === selectorType.SELECT) {
         this.$refs.select.scrollTop = this.valueArray[0] * 34
       }
+    },
+    _input ($event) {
+      this.valueSync = $event.target.value
+      this.$nextTick(() => {
+        this._change()
+      })
     }
   }
 }
@@ -566,6 +603,7 @@ export default {
 
 <style>
 uni-picker {
+  position: relative;
   display: block;
   cursor: pointer;
 }
@@ -590,11 +628,11 @@ uni-picker[disabled] {
   font-size: 16px;
 }
 
-.uni-picker-container .uni-picker * {
+.uni-picker-container .uni-picker-custom * {
   box-sizing: border-box;
 }
 
-.uni-picker-container .uni-picker {
+.uni-picker-container .uni-picker-custom {
   position: fixed;
   left: 0;
   bottom: 0;
@@ -607,7 +645,7 @@ uni-picker[disabled] {
   transition: transform 0.3s, visibility 0.3s;
 }
 
-.uni-picker-container .uni-picker.uni-picker-toggle {
+.uni-picker-container .uni-picker-custom.uni-picker-toggle {
   visibility: visible;
   transform: translate(0, 0);
 }
@@ -678,37 +716,48 @@ uni-picker[disabled] {
   color: #007aff;
 }
 
-/* .uni-picker {
-  position: relative;
+.uni-picker-container .uni-picker-select {
+  display: none;
 }
-.uni-picker-units {
+
+.uni-picker-system {
   position: absolute;
-  display: flex;
+  display: none;
+  display: block;
+  top: 0;
+  left: 0;
   width: 100%;
-  line-height: 16px;
-  font-size: 14px;
-  top: 50%;
-  margin-top: 22.5px;
-  transform: translateY(-50%);
+  height: 100%;
   overflow: hidden;
-  color: #666666;
-  pointer-events: none;
 }
-.uni-picker-units > div {
-  flex: 1;
-  text-align: center;
-  transform: translateX(2em);
-} */
 
-.uni-picker-container .uni-picker-select {
-  display: none;
+.uni-picker-system > input {
+  position: absolute;
+  border: none;
+  height: 100%;
+  opacity: 0;
+}
+
+.uni-picker-system > input.firefox {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.uni-picker-system > input.chrome {
+  /* 翻转且使用较大字体保证可点击日历按钮 */
+  top: 0;
+  right: 100%;
+  font-size: 9999px;
+  transform-origin: 100% 0;
+  transform: scaleX(-1);
 }
 
 @media screen and (min-width: 500px) and (min-height: 500px) {
   .uni-mask.uni-picker-mask {
     background: none;
   }
-  .uni-picker-container .uni-picker {
+  .uni-picker-container .uni-picker-custom {
     width: 300px;
     left: 50%;
     right: auto;
@@ -729,7 +778,7 @@ uni-picker[disabled] {
     overflow: hidden;
     border-radius: 0 0 5px 5px;
   }
-  .uni-picker-container .uni-picker.uni-picker-toggle {
+  .uni-picker-container .uni-picker-custom.uni-picker-toggle {
     opacity: 1;
     transform: translate(-50%, -50%);
   }