日历插件的总结，由于在项目中经常用到日历，所以需要总结一下日历插件的用法
日历初始化
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/cancel
console.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);
};
<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");
})
下载地址
