这是一个适合移动设备WEB应用的日期和时间拾取器,在桌面版的日期拾取器我们一般用jQuery UI的datepicker插件,而移动手机版的日期拾取器则可以根据项目需求选择与jQuery Mobile配合的mobiscroll.js插件,它提供了友好的日期和时间选择操作界面,且易于配置和使用。
HTML
首先我们加载相关插件和样式文件,该插件基于jQuery和jQuery.mobile所以首先需要加载这两个库文件,然后再加载mobiscroll.js插件以及相关CSS文件。
<script src="js/jquery.min.js"></script> <script src="js/jquery.mobile-1.3.0.min.js"></script> <script src="js/mobiscroll.js" type="text/javascript"></script> <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
接着在body里放置输入框,这是一个普通的文本输入框,当鼠标单击输入框获得光标时会触发mobiscroll弹出日期拾取器。
<input id="date" name="date" />
JavaScript
mobiscroll提供了许多选项可以设置,包括定义弹出面板展示方式、最大日期、最小日期、日期格式、结束年份等,也可以将插件本地化,包括设置中文按钮、说明。调用也非常简单,以下是示例代码:
$(function(){ var opt = { preset: 'date', //日期 theme: 'sense-ui', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 dateFormat: 'yy-mm-dd', // 日期格式 setText: '确定', //确认按钮名称 cancelText: '取消',//取消按钮名籍我 dateOrder: 'yymmdd', //面板中日期排列格式 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 hourText: '时',minuteText: "分",ampmText:"上午/下午", endYear:2020 //结束年份 }; $("#date").mobiscroll().date(opt); });
如果只选是时间,则可以这样写:
$("#time").mobiscroll().time(opt);
如果要在面板上显示日期和时间,则这样调用:
$("#datetime").mobiscroll().datetime(opt);
源码下载:javascript适合移动端的日期时间拾取器
一款简洁大方的javascript适合移动端的日期时间拾取器就这样制作完成了,希望大家喜欢。
我正在为我的项目使用角材料。
下面这个示例是Jquery UI 为移动设备开发的日期拾取器插件,这个插件并不包含在Jquery Mobile默认库当中,你需要自己手动include这些文件 日期拾取器 Datepicker 使用说明 Usage Instructions 日期拾取器自动从type="date"属性的输入框中生成 <label for="date">Date Input:</label> <input type=
问题内容: 我知道我可以使用momentjs做任何事情,还可以做一些涉及日期的事情。但是令人尴尬的是,我很难去做一件看起来很简单的事情:得到两次之间的差。 例: 我试过的 我不知道那里的“ 10”是什么。我住在巴西,所以如果相关的话,我们是utc-0300。 结果是持续时间正确的内部值: 所以,我想我的问题是:如何将momentjs持续时间转换为时间间隔?我肯定可以用 但我觉得有一些更 优雅 ,我
问题内容: 我需要改变从一个日期/时间 2014年8月20日15:30:00 看起来像 二○一四年八月二十○日下午3:30 可以使用javascript的Date对象完成此操作吗? 问题答案: 是的,您可以使用本地javascript Date() 对象 及其方法。 例如,您可以创建一个类似以下的函数: 并显示上午/下午和正确的时间。 请记住使用 getFullYear() 方法,而不要使用get
jetpack组合有日期时间选择器视图还是我应该自己创建它?我试着谷歌它,但我找不到准备好使用组件。
本文向大家介绍JavaScript实现移动端滑动选择日期功能,包括了JavaScript实现移动端滑动选择日期功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动选择日期的具体代码,供大家参考,具体内容如下 更多关于滑动效果的专题,请点击下方链接查看: javascript滑动操作汇总 jquery滑动操作汇总 以上就是本文的全部内容,希望对大家的学习有所