杭州网站设计工作室,中国制造网 做网站费用,网站上线 模板,wordpress旧版本最近在使用uni-app开发 钉钉小程序 #xff0c;遇到一个ios的兼容性问题 uni-datetime-picker 组件在模拟器上可以使用#xff0c;在真机上不生效问题 文章目录 1. 不兼容的写法#xff0c;uni-datetime-picker 不兼容IOS2. 兼容的写法#xff0c;使用 dd.datePicker 实现。… 最近在使用uni-app开发 钉钉小程序 遇到一个ios的兼容性问题 uni-datetime-picker 组件在模拟器上可以使用在真机上不生效问题 文章目录 1. 不兼容的写法uni-datetime-picker 不兼容IOS2. 兼容的写法使用 dd.datePicker 实现。3. 实现效果自测IOS可以兼容 1. 不兼容的写法uni-datetime-picker 不兼容IOS
uni-forms-item label产生时间 required namegenerateTimeuni-datetime-picker classcustom-datetime-picker :disabledisDisabledv-modelgenerate.generateTime :clear-iconfalse :clearfalse /
/uni-forms-item2. 兼容的写法使用 dd.datePicker 实现。
就是自定义一个 view 然后通过click事件触发dd.datePicker。
uni-forms-item label产生时间 required namegenerateTimeview clickshowPicker classdatetime-pickeruni-icons custom-prefixcustom-icon classicon-calendar typecalendar size20 color#c2c6cd/{{generate.generateTime || 请选择时间}}/view
/uni-forms-itemmethods: {// 点击弹窗日期窗口showPicker() {dd.datePicker({format: yyyy-MM-dd HH:mm:ss,// currentDate: 2012-12-12,success: (res) {if (res) {this.generate.generateTime res.date;}},});},
}在优化一下自定义的日期组件的样式
.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 组件样式一样。
