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"; /** * 英文全称 ...
随机推荐
- ajax post 请求发送 json 字符串
$.ajax({ // 请求方式 type:"post", // contentType contentType:"application/json", // ...
- python进程——生产者消费者
生产者消费者模型介绍 为什么要使用生产者消费者模型 生产者指的是生产数据的任务,消费者指的是处理数据的任务,在并发编程中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完 ...
- 【LeetCode】547. 朋友圈
题目 班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递性.如果已知 A 是 B 的朋友,B 是 C 的朋友,那么我们可以认为 A 也是 C 的朋友.所谓的朋友圈,是指所有朋友的集 ...
- MySQL高可用架构-MMM安装教程
安装指南: 一.架构以及服务器信息 基本安装包含至少2个数据库服务器和1个监视服务器.本例中使用2个监视服务器和5个数据库服务器(服务器系统为CentOS 7) 用途 IP 主机名 Server-id ...
- odoo开发笔记 -- 视图继承扩展
参考: http://www.jeffzhang.cn/Odoo-Notes-2/ http://blog.csdn.net/zhangfeng1133/article/details/4693517 ...
- odoo API装饰器one、model、multi的区别
1.one装饰器详解 odoo新API中定义方式: date=fields.Date(string="date",compute="_get_date") ...
- crontab命令使用文档.txt
基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...
- CompoundScope说明
A class scope adds capabilities to keep track of changes in relatedclass scopes - this allows client ...
- php -- 日期时间
----- 017-datetime.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...
- Jquery初体验一
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...