weui实现时间选择器

weui --github文档
最近一个项目中要用到日期时间选择器，采用了weui, 但是在其文档中所提供的选择器中，并没有时间选择器，但是有日期选择器以及普通选择器，所以实现思路为，使用普通选择器制作一个时间选择器，在选择日期后，点击确定，马上弹出这个普通选择器，有点踩坑的是在选择完日期后，想调用普通选择器发现不会弹出，解决方案如下：

    function dateMypick(el) {weui.datePicker({title: '请选择日期',className: 'mypick',id: 'datePicker',onConfirm: function (result) {$(el).children('input').val(result[0].label + result[1].label + result[2].label)myformdata.repdate = result[0].label.fluterdate() + '/' + result[1].label.fluterdate() +'/' + result[2].label.fluterdate()// 这一步很关键，事件监听，注意 .mypick 是自定义的类名，即给这个选择器的类名，如果不进行监听，发现timer222()执行后并不会弹出 时间选择器$('.mypick .weui-picker').on('animationend webkitAnimationEnd', function () {timer222()});}})}function timer222() {var mypickerdate = weuivar getData = timedata;setTimeout(function () {mypickerdate.picker(getData, {className: 'mypicksss',title: '请选择时间',onConfirm: function (result) {console.log(result[0].label + result[1].label + result[2].label)var val = $('#prviewtimer').val()myformdata.repdate += ' ' + result[0].label + result[1].label + result[2].label$('#prviewtimer').val(val+' ' + result[0].label + result[1].label + result[2].label)}})}, 100)}

== 实现时间选择器的思路 ==

 // 1.0 使用级联选择器// 2.0 确定级联选择器需要的数据格式// 3.0 先确定最后一列的数据格式，再确定最后一列的上一层的数据格式// 实现代码如下：###数据结构如下：var data = [{label:'09',value:'09',children:[{label: ':',value: ':',children:[{label: '00',value: '00'}]}]}]function getTimerData() {### 生成最后一列数据(mins 分钟)var mins = []for (var  i = 0;i <= 60; i++) {var item = {}item.label= i >= 10? i.toString() : '0' + iitem.value = item .labelmins.push(item)   }### 生成中间 ： 结构var points = []var item1 = {label:':',value:':',children:mins}### 生成全部数据var timedata = []for(var j = 9;j <= 22; i++) { // 可选时间范围为    9点-22点var item2 = {}item2.label =  j >= 10? j.toString() : '0' + jitem2.value = item.labelitem2.children = pointstimedata.push(item2)}return timedata ;
}

weui实现时间选择器相关推荐

iView -- TimePicker 自定义修改时间选择器选择时间面板样式
iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改 ...
UIDatePicker | 时间选择器
一:UIDatePicker的介绍 UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入. 日期选取器的 ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
014_TimePicker时间选择器
1. TimePicker时间选择器 1.1. 用于选择或输入日期. 1.2. 时间选择器属性参数说明类型可选值默认值 value / v-model 绑定值 date(TimePicker ...
JavaScript 数字转汉字+element时间选择器快速选择
window.CN = {1: '一',2: '二',3: '三',4: '四',5: '五',6: '六',7: '七',8: '八',9: '九',0: '零' } window.LEVEL = ...
vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
Android --- 进入页面时，不弹出软键盘。当 EditText 被点击时不弹出软键盘，而是调用其他选择器，比如时间选择器等
功能需求: 1.进入页面时,不弹出软键盘 2.当 EditText 被点击时不弹出软键盘,而是调用其他选择器,比如时间选择器等搜索百度测试: 1.百度上说用 editText.setInputTyp ...
android 开发时间选择器TimePicker的使用
android 开发时间选择器TimePicker的使用 android系统自带时间控件: DatePicker 日期显示控件 DatePickerDialog 日期对话框控件 TimePicke ...
移动端material风格日期时间选择器
好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等);所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动图看看 ...

weui实现时间选择器

weui实现时间选择器相关推荐

最新文章

热门文章