uni-app 解决钉钉小程序日期组件uni-datetime-picker不兼容ios问题(转载)

1. 不兼容的写法,uni-datetime-picker 不兼容IOS

<uni-forms-item label="产生时间" required name="generateTime">
    <uni-datetime-picker class="custom-datetime-picker" :disabled="isDisabled"
        v-model="generate.generateTime" :clear-icon="false" :clear="false" />
</uni-forms-item>

2. 兼容的写法,使用 dd.datePicker 实现。

  1. 就是自定义一个 view 然后通过click事件触发dd.datePicker。
<uni-forms-item label="产生时间" required name="generateTime">
    <view @click="showPicker" class="datetime-picker">
        <uni-icons custom-prefix="custom-icon" class="icon-calendar" type="calendar" size="20" color="#c2c6cd"/>
        {{generate.generateTime || '请选择时间'}}
    </view>
</uni-forms-item>
  1. 在优化一下自定义的日期组件的样式
.datetime-picker,.datetime-picker-placeholder{
    width: 100%;
    flex: 1;
    line-height: 1;
    font-size: 14px;
    height: 40px;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding-left:3px;
}

.icon-calendar{
    margin-right:2px;
}

3. 实现效果,自测IOS可以兼容

样式跟uni-ui的 uni-datetime-picker 组件样式一样。

44b28a9da2019a69422a0329573cb517_13088b52de20f0dd866cf8c67172a5d2

在ios上’-‘没法被解析为时间戳的解决方案,使用正则将’-‘替换为’/'。安卓,pc端,ios端均可适配。
代码如下:

//解决ios中不能用'-'解析成时间戳问题
let dateStr  = '2021-04-26 10:26:14'
let newDataStr = dateStr.replace(/\.|\-/g, '/')
let date = new Date(newDataStr);
let timestamp = date.getTime();
console.log(timestamp)

 

转载自:https://xiehao.blog.csdn.net/article/details/134188419

 

posted @ 2025-08-06 11:51  浅巷深念  阅读(85)  评论(0)    收藏  举报