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);
            },

          

posted @ 2022-06-16 15:21  蓦然JL  阅读(341)  评论(0编辑  收藏  举报
访问主页
关注我
关注微博
私信我
返回顶部