日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）

日历插件的总结，由于在项目中经常用到日历，所以需要总结一下日历插件的用法

 日历初始化
var date = new Date();
var today = dateUtil.dateFormat(dateUtil.DATE_PATTERN, date);
me.find("#calendar").val(today);
me.find('#calendar').mobiscroll().calendar({
    theme: 'mobiscroll',
    lang: 'zh',
    display: 'bubble',
    closeOnSelect: true,
    mode: 'clickpick',
    buttons: [],
    dateFormat: 'yy-mm-dd'
});

<div class="calendar-wrap"><span>评价时间：</span> <span class="mobi-calendar iconfont icon-calendar"><input name=""type="text" id="calendar" readonly class="" value=""></span>
</div>

'mobiscroll' : '../lib/mobiscroll.custom-2.17.0.min',

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

    <!--mobiscroll会将表单控件的value属性与插件的输入值绑定--><input id="date" name="date" /><br /><input id="time" name="time" /><br /><input type="button" value="showTime" onclick="showTime()">

引入mobiscroll.js插件：

<!--一般将js脚本文件放在body元素的底部就是为了加快网页的加载，因为网页的加载和脚本的加载是分开的--><script src="../js/jquery-3.1.0.js"></script><script src="../js/mobiscroll.custom-2.6.2.min.js"></script>

JavaScript操作代码：

//初始化日期控件
/** 日期控件    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/cancelconsole.log("textVale--"+textVale);console.log(this.id);//this表示调用该插件的对象
}
};//时间面板显示日期
\$("#date").mobiscroll().date(opt1);
//面板显示时间
\$("#time").mobiscroll().time(opt1); function showTime(){alert($('#date').val());
}
项目中遇到的日历插件
1.微信教师端日历的用法

<div name="calendar"></div>

/**
 * 页面初始化加载 调用时间控件插件
 */
TimeTable.prototype.showCalendar = function() {
   var me = this;
   var today = new Date();
   date = dateUtil.dateFormat(dateUtil.DATE_PATTERN, today);
   var calendarOpt = {
      theme : "auto",
      display : "inline",
      selectedValues : [ today ],
      controls : [ "calendar" ],
      lang : "zh",
      selectType : "day",
      closeOnOverlay : "true",
      onDayChange : function(day, inst) {
         me.clearList();
         date = dateUtil.dateFormat(dateUtil.DATE_PATTERN, day.date);
         me.getTimeTableData();
      }
   };
   me.$data.calendar.dom.mobiscroll().calendar(calendarOpt);
};

2.1微信家长端日历的用法（课程表）

<div id="calendar"></div>

TimeTable.prototype.showCalendar = function(today) {
   var me = this;
   var calendarOpt = {
      theme : "auto",
      display : "inline",
      selectedValues:[today],
      controls : [ "calendar" ],
      lang : "zh",
      selectType : "day",
      closeOnOverlay : "true",
      onDayChange : function(day, inst) {
         me.clearList();
         me.renderPage(dateUtil.dateFormat(dateUtil.DATE_PATTERN, day.date));
      }
   };
   $('#calendar').mobiscroll().calendar(calendarOpt);
};

2.2微信家长端日历的用法（课堂评价）

<!--日历-->
<div class="calendar">
    <input id="calendarInquire" type="text" readonly="" placeholder="日期选择特效" data-lcalendar="2016-05-11,2016-05-11"
           value=""/>
</div>

var calendar = new LCalendar();
calendar.init({
    'trigger': '#calendarInquire',
    'type': 'date',
    'minDate': '1970-1-1',
    'maxDate': new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
});

在html页面中引入input标签，通过自定义属性data-lcalendar控制最小日期和最大日期，写法如下：

...
<input type="text" readonly="" name="input_date" placeholder="请输入日期" data-lcalendar="2000-01-01,2018-01-29" />
...

将样式文件引入到页面中：

...
<link rel="stylesheet" href="LCalendar.css">
...

同时引入js文件到页面中：

...
<script src="LCalendar.js"></script>
...

初始化插件：

...
var calendar = new LCalendar();
calendar.init({'trigger': '#demo1',//标签id'type': 'date',//date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择'minDate':'1900-1-1',//最小日期 注意：该值会覆盖标签内定义的日期范围'maxDate':'2016-3-18'//最大日期 注意：该值会覆盖标签内定义的日期范围
});
...

3.学校pc端日历的用法

<div name="calendar"></div>

//日历插件
Timetable.prototype.showCalendar = function(){
   var me=this;
   var today = new Date();
   date = dateUtil.dateFormat(dateUtil.DATE_PATTERN, today);
   me.$html.find("[name=calendar]").mobiscroll().calendar({
   theme: 'mobiscroll',
   lang: 'zh',
   display: 'inline',
   showOnFocus: true,
   onDayChange : function(day, inst) {
      date = dateUtil.dateFormat(dateUtil.DATE_PATTERN, day.date);
      me.changeHeaderButton();
       }
   });
}

Calendar日历插件的介绍使用说明：需要引入插件calendar.js/calendar.min.js须要引入calendar.css 样式表，可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用：

复制代码代码如下:

xvDate({
'targetId':'date1',//时间写入对象的id
'triggerId':['date1','dateBtn1'],//触发事件的对象id
'alignId':'datesWrap1',//日历对齐对象
'format':'-',//时间格式默认'YYYY-MM-DD HH:MM:SS'
'min':'2014-09-20 10:00:00',//最大时间
'max':'2014-10-30 10:00:00'//最小时间
});


参数说明：targetId ：日期写入对象的id，不能为空triggerId ：触发事件的对象id，如果不设置则默认为targetId alignId ： 日历盒子的对齐基准，如果不设置则默认为targetId hms ： 时分秒是否开启，默认值为'on'则表示开启时分秒(2014-09-20 10:00:00),'off'则表示关闭时分秒模式(2014-09-20) format ：为日期格式 默认值为'-' (2014-09-20),'/'则表示(2014/09/20) min ：最小时间限制，min 的时间格式和前面的时间格式保持一直max ：最大时间限制，max 的时间格式和前面的时间格式保持一直zIndex ：最大时间限制，日历盒子的层级，默认9999如果需要使用模块化在需要依赖的模块用引入即可如：

复制代码代码如下:

define('mod1',[],function(require, exports, module){
var xvDate = require("xvDate");
})


下载地址

日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）相关推荐

Vue插件报错：Vue.js is detected on this page.
Vue插件报错:Vue.js is detected on this pag 下载Vue插件解决:Vue.js not detected 解决:Vue.js is detected on this ...
js jquery 实现排班,轮班，日历，日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接一.下载及简单配置 1.这 ...
vue.js 天气插件_天气检查我的项目以学习Vue.js
vue.js 天气插件天气 (vue-weather) Weather checking me project for learning Vue.js. 天气检查我的项目以学习Vue.js. Vie ...
mobiscroll js 日期插件
2019独角兽企业重金招聘Python工程师标准>>> mobiscroll js: 日期插件,一般用于移动开发界面 <!--mobiscroll会将表单控件的value属性 ...
js判断是否支持webgl_基于WebGL无插件虚拟场景漫游关键技术（完全版）ThingJS
#三维可视化##3D开发# WebGL, ThingJS及3DSMAX 虚拟场馆漫游技术构建基础组件加载三维模型实现虚拟漫游渲染优化如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3 ...
vue 项目中使用mobiscroll calendar
快速跳转在vue 项目中使用 mobiscroll calendar 准备初始化组件修改组件样式在vue 项目中使用 mobiscroll calendar 准备 1. 首先在项目中引入jqu ...
jseclipse 是eclipse插件，让你编写js代码感觉更爽
一直以来都没有客意的去找一下eclipse下面的javascript开发插件,今天在网上无意发现了一个,回去试了一下,感觉不错.写JS代码根写PHP代码差不多感觉挺爽的. JSEclipse是个Ecl ...
可用资源不足excel无法完成任务_项目资源管理包括哪些内容？
项目管理不只是管理交付项目所需要的任务,如何计划.组织和管理团队对项目产生巨大的影响,项目资源管理对于项目的成败起着至关重要的作用.如果你是项目管理新手,你很容易会对资源规划.分配.调度等术语和随之而 ...
在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
摘要: 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建刚开始打算进行前后端分离开发,后来发现在使用JSP或者Freemarker做动态页面时,想发挥这些自动化构建工具 ...

日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）

日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）相关推荐

最新文章

热门文章