最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
手机网站日期时间选择器(专业为移动而生)
时间:2015-11-17 编辑:简简单单 来源:一聚教程网
这是一个适合移动设备WEB应用的日期和时间拾取器,在桌面版的日期拾取器我们一般用jQuery UI的datepicker插件,而移动手机版的日期拾取器则可以根据项目需求选择与jQuery Mobile配合的mobiscroll.js插件,它提供了友好的日期和时间选择操作界面,且易于配置和使用。
首先我们加载相关插件和样式文件,该插件基于jQuery和jQuery.mobile所以首先需要加载这两个库文件,然后再加载mobiscroll.js插件以及相关CSS文件。
css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
接着在body里放置输入框,这是一个普通的文本输入框,当鼠标单击输入框获得光标时会触发mobiscroll弹出日期拾取器。
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);
好我们再来看一些例子
自定义年月(去掉年月日的"日"滚轮布局):
@{
ViewBag.Title = "taste mobiscroll";
}
@section styles{
}
@section scripts{
}
treelist 示例一:
- 普通班
- VIP班
- 特色班
- 至尊班
- 女子特训班
treelist 示例二:
-
奥迪
- 奥迪A3
- 奥迪A4L
- 奥迪A6L
- 奥迪Q3
- 奥迪Q5
- 奥迪A4
- 奥迪A6
- 奥迪A1
- 奥迪A3(进口)
-
宝马
- 宝马X1
- 宝马i3
- 宝马1系
- 宝马3系
- 宝马5系
-
奔驰
- 奔驰A级
- 奔驰C级
- 奔驰E级
- 奔驰S级
- 奔驰GLK级
- 奔驰CLA级
- 奔驰CLS级
-
上一个: 在线富文本编辑器UMeditor使用例子
-
下一个: angular中$parse详解教程
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31