移动端日期插件Mobiscroll.js使用详解


Posted in Javascript onDecember 19, 2016

mobiscroll js日期插件的基础入门案例,移动端开发过程中可能会用到。

<html>
  <head>
    <meta charset="UTF-8">
    <title>mobiscroll</title>
    <link type="text/css" rel="stylesheet" href="../js/mobiscroll.custom-2.6.2.min.css" />
  </head>
  <body>
    <!--mobiscroll会将表单控件的value属性与插件的输入值绑定-->
    <input id="date" name="date" /><br />
    <input id="time" name="time" /><br />
    <input type="button" value="showTime" onclick="showTime()">

  <!--一般将js脚本文件放在body元素的底部就是为了加快网页的加载,因为网页的加载和脚本的加载是分开的-->
  <script src="../js/jquery-3.1.0.js"></script>
  <script src="../js/mobiscroll.custom-2.6.2.min.js"></script>
  <script> 
//初始化日期控件
/** 日期控件  start */
var now = new Date();
var currYear = now.getFullYear();
var currMonth = now.getMonth() + 1;
var currDay = now.getDate();

//mobiScroll插件选项
var opt1 = {
  preset : 'date', //日期,可选:date\datetime\time\tree_list\image_text\select
  theme : 'android-ics light', //皮肤样式,可选:default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
  display : 'modal', //显示方式 ,可选:modal\inline\bubble\top\bottom
  mode : 'scroller', //日期选择模式,可选:scroller\clickpick\mixed
  lang : 'zh',
  dateFormat : 'yyyy-mm-dd', // 面板日期格式
  setText : '确认', //确认按钮名称
  cancelText : '取消', //取消按钮名籍我
  dateOrder : 'yyyymmdd', //面板中日期排列格式
  dayText : '日',
  monthText : '月',
  yearText : '年', //面板中年月日文字
  showNow : false,
  nowText : "今",
  endYear: currYear +100, //结束年份
  minDate: new Date(currYear, currMonth - 1, currDay+1),
  onSelect:function(textVale,inst){ //选中时触发事件
    console.log("我被选中了.....");
  },
  onClose:function(textVale,inst){ //插件效果退出时执行 inst:表示点击的状态反馈:set/cancel
    console.log("textVale--"+textVale);
    console.log(this.id);//this表示调用该插件的对象
  }
};

//时间面板显示日期
\$("#date").mobiscroll().date(opt1); 
//面板显示时间
\$("#time").mobiscroll().time(opt1);

function showTime(){
  alert($('#date').val());
}
</script> 
  </body>
</html>

移动端日期插件Mobiscroll.js使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
js实现文字选中分享功能
Jan 25 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
JavaScript闭包和范围实例详解
Dec 19 #Javascript
JS前端笔试题分析
Dec 19 #Javascript
利用vue实现模态框组件
Dec 19 #Javascript
JS中如何实现复选框全选功能
Dec 19 #Javascript
BootStrapValidator校验方式
Dec 19 #Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 #Javascript
JavaScript中this的用法实例分析
Dec 19 #Javascript
You might like
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
初识Laravel
2014/10/30 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
微信小程序开发探究
2016/12/27 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python实现大文本文件分割
2019/07/22 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Python编写单元测试代码实例
2020/09/10 Python
Python: glob匹配文件的操作
2020/12/11 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
辞职信怎么写?
2019/05/21 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL