更新记录
1.0.0(2023-09-09)
下载此版本
时间日期输入框,初版发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.4.15 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
属性名 |
类型 |
默认值 |
说明 |
value |
String |
|
输入框的内容,时间格式为"2000-01-20",日期格式为"12:12:12" |
width |
Number |
160 |
输入框的宽度 |
height |
Number |
30 |
输入框的高度 |
fontSize |
Number |
14 |
输入框的内字体大小 |
border |
Boolean |
true |
是否显示边框 |
showSecond |
Boolean |
true |
是否显示秒钟(仅时间组件) |
backgroundColor |
String |
'#fff' |
输入框的背景颜色 |
showBtn |
Boolean |
true |
是否显示当前时间与清空按钮 |
@change |
EventHandle |
|
change事件 |
使用方式:
1.在script中引用组件
import dateInput from '@/components/yh-datetimeInput/dateInput.vue'
import timeInput from '@/components/yh-datetimeInput/timeInput.vue'
export default {
components: {
dateInput,
timeInput
},
data() {
return {
TestDate: "2023-09-09",
TestTime: "09:30:58",
}
}
},
2.在view中放入组件,绑定data中的数据
<view>
<dateInput v-model="TestDate" />
<timeInput v-model="TestTime" />
</view>