轻量级移动端日期选择器

在移动端进行日期选择想必困扰过不少小伙伴,在PC端我们比较丰富的选择,如jQueryUI的datepicker,但这些插件都比较臃肿,而 且还要依赖一个同样臃肿的库。或许PC上可以忍受比较大的文件,网速相对快嘛。然而在移动端也面临同样的问题,想用一个日期选择器还得依赖一个庞大的UI 库,如mobiscroll。但移动端的网速慢啊,而且要耗流量,用这么一个大家伙就显得无法忍受。

于是,我决定造轮子了。造一个轻量级的、适合在移动端使用的日期选择器。而且只依赖Zepto。(Zepto本身体积小,而且在移动端的使用很普遍了)

关于日期选择器的设计,我的想法是能多简单就多简单,没必要设计很多功能。毕竟是在移动端,而且只完成一件事:日期选择。如果光在日期选择上都需要用户 有很多操作,那说明产品设计的有问题了。另外在操作方式上,移动端更适合滑动的方式来选择,而不是像PC上那样,搞很多小方格来点选。

但需求总是多样化的,为了满足简单的时间选择和复杂的日期选择,我直接写了两套,不同的场景使用各自合适的。下面分别介绍一下:

选择具体时间的mtimer

  先上图:

  

  功能介绍:

mtimer用来选择某一天的具体时间点,需要了解的主要有以下几点:

* 用于选择一个粗略的时间点

* 时间范围可配置

* 通过滑动操作来选择,左右两侧可独立滑动

* 时刻跨度暂设计为半小时

* 样式在独立的css文件中,可自己定制

  技术细节:

* 依赖Zepto1.1.3核心模块

* 滑动操作用了isroll来实现的,自己懒得实现了,代码一并放进了zepto.mtimer.js,使用时无需再次引入iscroll.js

* 点击操作用了github上别人已经封装好的tap事件,没用zepto的

  使用方法:

像使用其他Zepto插件那样使用:

1. 在页面引入相关文件:

<link rel="stylesheet" href="zepto.mtimer.css">
<script src="zepto.js"></script>
<script src="zepto.mtimer.js"></script>

  2. 页面上需要有一个input元素:

<input type="text" id="picktime" value="03-27 15:00" readonly>

  3. 初始化插件:

$(‘#picktime‘).mtimer();

  配置参数:

dateStart : new Date(),   //开始日期
dateNum : 10,   //天数
timeStart : 9,   //开始时刻
timeNum : 12,  //小时数
onOk : null,   //点击确定的回调函数
onCancel : null,   //点击取消的回调函数

  基本东西就这么多啦,看一下在线的demo吧:点击这里  记得用chrome模拟移动设备来看哦~或者直接手机扫描下面的二维码:

  

选择年月日的mdater

如果业务需要选择更大范围的年月日,那就使用mtimer他表哥mdater吧,先上截图:

干净清爽有木有,为了最大程度保证轻量级,做到了极简DOM,没有那么多的标签嵌套,没有一个多余的标签。尽管我不喜欢在移动设备上进行点选操作,但既然业务有需求,只能搞成这样的方格了。用法就不介绍了,用过datepicker都知道。

技术细节:

* 依赖Zepto1.1.3核心模块

* 点击操作用了github上别人已经封装好的tap事件,没用zepto的,点击穿透、点击延迟等问题不必再关注。

使用方法:参照上面mtimer

  配置参数:

maxDate : null,   //最大日期
minDate : new Date(1970, 0, 1)   //最小日期

  好吧有点偷懒了~只有两个比较重要的配置,其他的暂时不考虑增加,等以后有需要了再升级吧。

简单介绍到此,下面来看下mdater的在线demo:点击这里。同样,请使用chrome模拟移动设备来体验最佳效果。你有手机?直接扫描下面的二维码:

  

源码下载地址

内附demo自行查看

mtimer : http://files.cnblogs.com/files/lvdabao/mtimer.zip

mdater : http://files.cnblogs.com/files/lvdabao/mdater.zip

时间: 2024-10-09 20:01:40

轻量级移动端日期选择器的相关文章

基于zepto的移动端日期+时间选择插件

前段时间写了两个移动端的日期选择插件:轻量级移动端日期选择器,本来是为特定的场景中使用的,结果有同学反应不够灵活和强大.虽然我的看法是移动端的界面要尽可能简洁,功能要尽可能简单,但是难免还是会有各种各样的场景,有时候确实需要同时选择年.月.日.时.分.秒,日期的格式要能配置,要能显示“上午 下午”......诸如此类. 所以,一下狠心,索性写个全的吧,之前写的是mdater和mtimer俩兄弟,再来个合体的mdatetimer,意为可以同时选择日期和时间,当然你要只选择日期也是可以配置的.操作方

Android基于wheelView的自定义日期选择器(可拓展样式)

基于wheelView的自定义日期选择器 项目要求效果图: 要求 "6月20 星期五" 这一项作为一个整体可以滑动,"7时"."48分"分别作为一个滑动整体. 系统自带的DatePicker.TimePicker大家都知道,只有这种效果: 百度了很多,试了NumberPicker等都不行,本来打算自己写.网友推荐了一个开源组件WheelView,下下来试了试,发现他已经定义的很完善了,在他的基础上拓展很容易. 现将基于wheelView自定义日期

移动端时间选择器(更新1.2.0版本)

开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下. Github地址:https://github.com/IronPans/LazyPicker 效果图: 你也可以扫描二维码用手机体验: 1.2版本体验: 如果你使用PC浏览器,那么你需要切换到手机模式才可使用. 步骤:按F12或鼠标右键--点击检查,再点击控制台左上角的手机模式按钮即可. 地址:点这里 使用方法 引入CSS和JavaScript脚本: <link rel="stylesheet" href=&qu

自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表.变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile.jeasyui.mobile都没有提供这种控件,不知道为什么?

Android笔记之日期选择器

1.主代码 /** * 日期选择器 */ private DatePickerDialog datePickerDialog; /** * 年 */ private int mYear=1993; /** * 月 */ private int mMonth=12-1; /** * 日 */ private int mDay=16; ......................... //构造函数包括mYear, mMonth, mDay用来显示初始日期,同时设置监听 datePickerDial

Mobiscroll手机触屏日期选择器

   最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhone. iPad.Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字就可以选择日期.Mobiscroll作为一款jQuery日期插件可以让用户自定义主题,完全通过CSS文件修改样式,经过测试可以完美使用在iOS4.Android 2.2. Android 2.3

时间,日期选择器

TimePicker(时间选择器) 方法 描述 Integer getCurrentHour () 返回当前设置的小时 Integer getCurrentMinute() 返回当前设置的分钟 boolean is24HourView() 判断是否是24小时制 void setCurrentHour(Integer currentHour) 设置当前的小时数 void setCurrentMinute(Integer currentMinute) 设置当前的分钟 void setEnabled(

JavaScript:日期选择器组件的使用

前言: 在实际项目开发中,日期选择是一个十分常见而且重要的问题,在表单中设计到日期的验证时,如果让用户自己输入时间的话,那么使用正则进行验证其正确性是不可取的,因为他一般只能验证日期的格式,无法准确的验证其日期正确性.此时可以使用日期选择器组件来帮助我们完整. 用法: 使用日期在选择其组件其实很简单,我们只需要在*.html文件里面引入日期选择器的*.js文件,并在input输入框中设置'onclick'事件即可. 演示: 现在我使用两种日期选择器组件进行演示,: 第一个是:My97DatePi

日期选择器:jquery datepicker的使用

helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui 在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式.范围等.我们经常在WEB应用中用到datepicker,比如要求用户输入日期进行相关查询的.我们很早之前就应用datepicker到很多项目中,今天整理成文与大家分享. 查看演示 下载源码 准备工作 首先