ThorUI的dataTime日期时间选择器
ThorUI的dataTime日期时间选择器,是日期时间选择器picker-view扩展,日期时间选择器。
具体组件代码参考:https://www.bookstack.cn/read/ThorUI-1.42/166755
props: "type" : 1-日期+时间(年月日+时分) 2-日期(年月日) 3-日期(年月) 4-时间(时分),类型:"Number",默认值:1 "startYear" :年份区间,起始年份,类型:"Number",默认值:1980 "endYear" :年份区间,结束年份,类型:"Number",默认值:2050 "cancelColor":"取消"字体颜色,类型:"String",默认值:"#888" "color":"确定"字体颜色,类型:"String",默认值:"#5677fc" "setDateTime":设置默认显示日期 2019-08-01 || 2019-08-01 17:01 || 2019/08/01 ,类型:"String",默认值:"" methods: "generateArray":生成数组 "getIndex":获取索引 "initSelectValue":初始化日期时间处理 "initData":初始化数据 "setYears":设置年份 "setMonths":设置月份 "setDays":设置日期 "setHours":设置小时 "setMinutes":设置分钟 "show":显示,打开选择器 "hide":隐藏,关闭选择器 "change":picker-view change事件,选择数据 "btnFix":确定事件,传回选择的日期时间
显示效果:
vue使用:
<!-- 选择时间 -->
<input v-if="item.type == 'time'" @click="bindTimeChange(item,index)" v-model="item.default_time" disabled placeholder="请选择时间" class="form-picker input-icon dataTime" />
<!-- 选择时间组件-->
<tui-datetime ref="dateTime" :type="dateTimeType" :radius="true" @confirm="change_time"></tui-datetime>
<!-- 定义 -->
timeIndex:'', dateTimeType: 2,
<!-- 选择时间调用方法 -->
bindTimeChange: function(item,index) { this.timeIndex = index; this.$refs.dateTime.show(); if(item.time_level == 0){ this.dateTimeType = 2 // 年月日 }else{ this.dateTimeType = 7 // 年月日时分秒 } }, change_time: function(e) { this.$set(this.components[this.timeIndex], "default_time", e.result); },
蓦然、回首,那人就在灯火阑珊处
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~