实用插件（九）手机日历插件—

1、点我下载

2、使用方法：

 <!--日历插件3个css-->
<link href="../Mobiscroll/mobiscroll.android-ics-2.5.2.css" rel="stylesheet">
<link href="../Mobiscroll/mobiscroll.animation-2.5.2.css" rel="stylesheet">
<link href="../Mobiscroll/mobiscroll.core-2.5.2.css" rel="stylesheet"><!--日历插件5个js-->
<script src="../Mobiscroll/mobiscroll.core-2.5.2.js"></script>
<script src="../Mobiscroll/mobiscroll.core-2.5.2-zh.js"></script>
<script src="../Mobiscroll/mobiscroll.datetime-2.5.1.js"></script>
<script src="../Mobiscroll/mobiscroll.datetime-2.5.1-zh.js"></script>
<script src="../Mobiscroll/mobiscroll.android-ics-2.5.2.js"></script>

3、初始化日历插件：

$(function(){var currYear=(new Date().getFullYear());var opt={};opt.datetime={preset:'datetime'};opt.date={preset:'date'};opt.time={preset:'time'};opt.default={preset:'datetime',theme:'android-ics light',display:'bottom',modal:'scroller',lang:'zh',dateFormat:'yyyy-mm-dd',controls:['calendar'],startYear:currYear,endYear:currYear+50};var optTime= $.extend(opt['datetime'],opt['default']);$('#time').mobiscroll(optTime);})

4、效果图：

这里写图片描述

5、总结

该插件方便年月日时分秒的控制，以及开始日期和结束日期的联动，无兼容问题。手机端日历优先使用该插件！

PS:更新：demo(要求：开始时间最小为当前系统时间，最大为15天后；结束时间最小为选择的开始时间，最大为选择的开始时间的当天23点59分)
html代码：

 <input type="text" id="startdate" class="form-control bgdate" placeholder="请输入开始时间 "/><input type="text" id="enddate" class="form-control bgdate" placeholder="请输入结束时间 " disabled/>

js代码：

  //初始化日历插件$(function() {var currYear = (new Date().getFullYear());var date = new Date();var nyear = date.getFullYear();var nmonth = date.getMonth();var nday = date.getDate();var nhour = date.getHours();var nminite = date.getMinutes();var now = new Date(nyear, nmonth, nday, nhour, nminite);//设置开始时间最小为现在var last = new Date(nyear, nmonth, nday + 15, 23, 59);//设置开始时间最大为15后var opt = {};opt.datetime1 = {preset: 'datetime',minDate: now,maxDate: last};opt.date = {preset: 'date'};opt.time = {preset: 'time'};opt.default = {preset: 'datetime',theme: 'android-ics light',display: 'bottom',modal: 'scroller',lang: 'zh',dateFormat: 'yyyy-mm-dd',onSelect:function(){var val=$('#startdate').val();able(val);//启用结束时间if(val!=""){var newDate=val.split('-').join('/');var str1=new Date(newDate);var first=val.split(' ')[0];var first=first.split('-').join('/');var str2=new Date(first+' 23:59');opt.datetime2={preset:'datetime',minDate:str1,//设置结束时间最小为开始时间maxDate:str2//设置结束时间最大为开始时间当天的23:59};var optTime2= $.extend(opt['datetime2'],opt['default']);$('#enddate').mobiscroll(optTime2);}
//                checkTime(this);},controls: ['calendar'],startYear: currYear,endYear: currYear + 50};var optTime1 = $.extend(opt['datetime1'], opt['default']);$('#startdate').mobiscroll(optTime1);});//开启结束时间function able(element){if(element !=''){$('#enddate').removeAttr('disabled');}}

6.配置API

        //下面注释部分是上面的参数可以替换改变它的样式// 直接写参数方法//$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });//具体参数定义如下//{//preset: 'date', //日期类型--datatime --time,//theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】//【wp light】【wp】//mode: "scroller",//操作方式【scroller】【clickpick】【mixed】//display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】//dateFormat: 'yyyy-mm-dd', // 日期格式//setText: '确定', //确认按钮名称//cancelText: '清空',//取消按钮名籍我//dateOrder: 'yymmdd', //面板中日期排列格//dayText: '日', //monthText: '月',//yearText: '年', //面板中年月日文字//startYear: (new Date()).getFullYear(), //开始年份//endYear: (new Date()).getFullYear() + 9, //结束年份//showNow: true,//nowText: "明天",  ////showOnFocus: false,//height: 45,//width: 90,//rows: 3,//minDate: new Date()  从当前年，当前月，当前日开始}

实用插件（九）手机日历插件——Mobiscroll相关推荐

jquery日历插件途牛_jquery日历插件SimpleCalendar
插件描述:多功能日历插件SimpleCalendar,带农历.节假日. 更新时间:2019-07-30 16:36:32 更新说明:修复显示undefined Simple-Calendar作用方法 ...
Bootstrap全年日历插件带记事功能
下载地址实用的Bootstrap3带记事功能的全年日历插件.该日历插件使用简单,可以动态在某个日期上设置备忘录,可以自定义高亮日期样式和选择最大日期和最小日期范围等. dd:
javascript日历插件
javascript日历插件原文:javascript日历插件 javascript日历插件最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的 ...
这些年，我们无法忘却的jQuery日历插件
2019独角兽企业重金招聘Python工程师标准>>> CLNDR.js CLNDR.js是一个可创建日历的jQuery插件,支持自定义.该插件不会生成任何标记,而是使用Unders ...
日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）
日历插件的总结,由于在项目中经常用到日历,所以需要总结一下日历插件的用法日历初始化 var date = new Date(); var today = dateUtil.dateFormat(da ...
nextcloud安装日历插件使用并设置导入导出和云端同步(安卓手机和ios手机)
原文链接:https://dsx2016.com/?p=1718 公众号:大师兄2016 安装日历点击右上角头衔在下拉菜单中选择应用选择办公&文本分类安装Calendar插件编辑日历 ...
jQuery实现移动端手机选择日期日历插件
效果图 calendar.css html, body {color: #333;margin: 0;height: 100%;font-family: "Microsoft YaHei&q ...
11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
jquery日历插件途牛_11个实用jQuery日历插件
FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样式,工程师则利用它提供的接口 ...

实用插件（九）手机日历插件——Mobiscroll

实用插件（九）手机日历插件——Mobiscroll相关推荐

最新文章

热门文章