WeUI移动页面实现时间选择器(年-月-日-时-分)
在做微信公众号的时候,使用的WeUI样式,有一个需求是用户选择一个预约时间,需要年月日并精确到小时和分钟。
但是WeUI的picker组件不支持直接显示5列,根据WeUI.js作者的建议,是将日期和时间选择作为两个选择器来实现。
所以我的实现思路是先选择日期,然后自动跳出时间选择,来模仿一个时间选择器。日期属于datepicker,时间属于普通的picker。
效果图:
点击期望时间跳出datepicker:
在选择时间并确定后跳出时间选择,这是一个普通picker:
之后就可以对选择的时间做处理了。
实现方法也很简单:在第一picker选择并消失后,调用第二个picker,这样可以保证连续调用。
关键在于监听第一个picker消失的事件,第一个消失后才能调用第二个。
代码:
$('.ma_expect_date').click(function(event) {
var _this = this;
weui.datePicker({
start: new Date(),
end: 2030,
defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate()],
onConfirm: function(result){
// 二级调用:时间
$('.ma_expect_date_picker .weui-picker').on('animationend webkitAnimationEnd', function() {
show_expect_time_picker(_this, result);
});
},
id: 'ma_expect_date',
className: 'ma_expect_date_picker'
});
});
// -----------------------二级调用:时间
var hours = [],
minites = [],
symbol = [{ label: ':', value: 0 }];
function show_expect_time_picker(_this, date) {
var date = date[0].label + date[1].label + date[2].label;
if (!hours.length) {
for (var i = 0; i< 24; i++) {
var hours_item = {};
hours_item.label = ('' + i).length === 1 ? '0' + i : '' + i;
hours_item.value = i;
hours.push(hours_item);
}
}
if (!minites.length) {
for (var j= 0; j < 60; j++) {
var minites_item = {};
minites_item.label = ('' + j).length === 1 ? '0' + j : '' + j;
minites_item.value = j;
minites.push(minites_item);
}
} weui.picker(hours, symbol, minites, {
defaultValue: [new Date().getHours()+1, 0, 0],
onConfirm: function(result) {
var time = result[0].label + ':' + result[2].label;
var expect_date = date + ' ' + time;
$(_this).find('.weui-cell__ft').text(expect_date);
},
id: 'ma_expect_time'
});
}
WeUI移动页面实现时间选择器(年-月-日-时-分)的更多相关文章
- oracle截取时间的年/月/日/时/分/秒
修改日期格式为年月日时分秒: alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss';select to_char(sysdate,'yyy ...
- C#WinForm中显示实时时间:年/月/日 时/分/秒 星期X
//加载窗体时 string weekstr = ""; private void Form22_Load(object sender, EventArgs e) { this.t ...
- [Windows]获取当前时间(年/月/日/时/分/秒)
struct tm* GetCurTime(time_t inTime) { struct tm* curTime = localtime(&inTime); curTime->tm_y ...
- ASP.NET C# 日期 时间 年 月 日 时 分 秒 格式及转换(转自happymagic的专栏)
在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...
- ASP.NET 日期 时间 年 月 日 时 分 秒 格式及转换
在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...
- ASP.NET C# 获取当前日期 时间 年 月 日 时 分 秒
我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...
- js将当前时间格式化为年-月-日 时:分:秒
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mysql 获取系统时间的下一天 年-月-日 时:分:秒
DAY) as date
- Java 获取年 月 日 时 分 秒
/** * 英文简写(默认)如:2010-12-01 */ public static String FORMAT_SHORT = "yyyy-MM-dd"; /** * 英文全称 ...
随机推荐
- Sentry有什么作用
Sentry是一个异常日志集中收集系统,它可以捕捉到 stack trace, stack locals, preceding events和引发该异常的commit号.而当bug fix后,sent ...
- Stack&&Queue
特殊的容器:容器适配器 stack queue priority_queue:vector+堆算法---->优先级队列 stack: 1.栈的概念:特殊的线性结构,只允许 ...
- Vim实用技巧系列 - tab和空格的转换
有时候,我们会修改一些代码,而这些代码中的tab设定和我们自己的设定不一样.例如,我们自己的设定是以两个空格来代替tab,而要修改的代码则是使用tab.那么,我们应该怎样快速的将又有的tab转换为空格 ...
- Mahout使用(一)
1.HelloMahout.java2.DistanceTest.java3.MahoutDemo.java 1.HelloMahout.java package cn.crxy.mahout; im ...
- centos 7 Mysql5.7 主从复制配置
1.环境 Centos 7 Mysql 5.7 Master 192.168.1.71 Slave01 192.168.1.72 2.分别配置master,slave01 # vi /etc/my. ...
- c++中文件读取
对于C++编译运行文件,我使用过两个编译器,一个是visual studio 2013,另外一个是devcpp,推荐使用devcpp. vs的特点是界面整洁清晰,但是需要收费,这是微软的,并且在电脑上 ...
- apt 下载安装包
1) Try both without sudo, apt-get download will pass and apt-get -d install will fail (root required ...
- Mac 下配置 Python 开发环境
➜ ~ sudo brew install python3 ==> Downloading https://www.python.org/ftp/python/3.5.1/Python-3.5. ...
- 【转】Windows 8 desktop app中dll搜索路径设置的诡异现象,Bug?
原文地址:http://blog.csdn.net/my_business/article/details/8850151 某个桌面程序在win 8上运行异常的问题困扰了我有近一周,今天终于找到了根本 ...
- JavaScript创建对象的方法汇总
JavaScript中的对象 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特性顺序的值.对象的每一个属性或方法都有一个名字 ...