在做微信公众号的时候,使用的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移动页面实现时间选择器(年-月-日-时-分)的更多相关文章

  1. oracle截取时间的年/月/日/时/分/秒

    修改日期格式为年月日时分秒: alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss';select to_char(sysdate,'yyy ...

  2. C#WinForm中显示实时时间:年/月/日 时/分/秒 星期X

    //加载窗体时 string weekstr = ""; private void Form22_Load(object sender, EventArgs e) { this.t ...

  3. [Windows]获取当前时间(年/月/日/时/分/秒)

    struct tm* GetCurTime(time_t inTime) { struct tm* curTime = localtime(&inTime); curTime->tm_y ...

  4. ASP.NET C# 日期 时间 年 月 日 时 分 秒 格式及转换(转自happymagic的专栏)

    在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...

  5. ASP.NET 日期 时间 年 月 日 时 分 秒 格式及转换

    在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...

  6. ASP.NET C# 获取当前日期 时间 年 月 日 时 分 秒

    我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...

  7. js将当前时间格式化为年-月-日 时:分:秒

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. mysql 获取系统时间的下一天 年-月-日 时:分:秒

    DAY) as date

  9. Java 获取年 月 日 时 分 秒

    /** * 英文简写(默认)如:2010-12-01 */ public static String FORMAT_SHORT = "yyyy-MM-dd"; /** * 英文全称 ...

随机推荐

  1. ajax post 请求发送 json 字符串

    $.ajax({ // 请求方式 type:"post", // contentType contentType:"application/json", // ...

  2. python进程——生产者消费者

    生产者消费者模型介绍 为什么要使用生产者消费者模型 生产者指的是生产数据的任务,消费者指的是处理数据的任务,在并发编程中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完 ...

  3. 【LeetCode】547. 朋友圈

    题目 班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递性.如果已知 A 是 B 的朋友,B 是 C 的朋友,那么我们可以认为 A 也是 C 的朋友.所谓的朋友圈,是指所有朋友的集 ...

  4. MySQL高可用架构-MMM安装教程

    安装指南: 一.架构以及服务器信息 基本安装包含至少2个数据库服务器和1个监视服务器.本例中使用2个监视服务器和5个数据库服务器(服务器系统为CentOS 7) 用途 IP 主机名 Server-id ...

  5. odoo开发笔记 -- 视图继承扩展

    参考: http://www.jeffzhang.cn/Odoo-Notes-2/ http://blog.csdn.net/zhangfeng1133/article/details/4693517 ...

  6. odoo API装饰器one、model、multi的区别

    1.one装饰器详解 odoo新API中定义方式:    date=fields.Date(string="date",compute="_get_date") ...

  7. crontab命令使用文档.txt

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  8. CompoundScope说明

    A class scope adds capabilities to keep track of changes in relatedclass scopes - this allows client ...

  9. php -- 日期时间

    ----- 017-datetime.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...

  10. Jquery初体验一

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...