文章参考
http://demo.mobiscroll.com/calendar
http://docs.mobiscroll.com/2-16-0/calendar#!method-hide
这两天要做一个效果 —— 指定一周的某几天可以选择，其余的日期是不让选择的，并且要从手机底部弹出效果 。最终选择了mobiscroll_calendar插件作为解决方案
但是由于mobiscroll控件是收费的，一个calendar插件需要$95，因此下载了一个试用版，自己做了一个修改，保证能够正常的使用了。
例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap v3.3.4 核心 CSS 文件 -->
<script src="../js/jquery.min.js"></script>
<script src="../js/sqh_wap.js"></script>
<title>蔬菜订单详情</title>
</head>
<body class="sqh_bg_fafafa">
<div id="huangbiao">
<input id="calendar_date" placeholder="Please Select ..." />
</div>
<button onclick="showActive()">显示控件</button>
<button onclick="hideActive()">隐藏控件</button>
<p>
<p>
<button onclick="showCalendar()">显示日历</button>
<button onclick="hideCalendar()">隐藏日历</button>
</body>
</html>
<script src="_processItem.js"></script>
<!--<script src="_processItem.js"></script>-->
<link rel="stylesheet" href="../css/mobiscroll.custom-2.15.1.min.css">
<script src="../package/mobiscroll/js/i18n/mobiscroll.i18n.zh.js"></script>
<script>
//定义控件的全局变量
var mobiscrllObj = null;
//显示控件
function showActive(){
mobiscrllObj.show();
}
//隐藏控件
function hideActive(){
mobiscrllObj.hide();
}
//显示日历DIV
function showCalendar(){
$('#calendar_date').mobiscroll("show");
alert();
hideCalendar();
}
//隐藏日历DIV
function hideCalendar(){
$('#calendar_date').mobiscroll("hide");
}
$(function(){
function init() {
mobiscrllObj = $('#calendar_date').mobiscroll().calendar({
theme: 'mobiscroll',
lang: 'zh',
display: 'bottom',
controls: ['calendar'],
buttons: [],
closeOnSelect: true,
//设置为false，则点击空白地方不会关闭弹出层，默认为true
closeOnOverlay:true,
//设置最小日期
// minDate: new Date(2015, 3, 27),
// minDate: new Date(),
// onShow:removeSign,
//表示礼拜天，礼拜六，5月1号，12月24号，12月25号是不能选择的
invalid: ['w0', 'w6', '5/1', '12/24', '12/25']
});
console.dir(mobiscrllObj);
}
init();
});
</script>
效果图
自定义样式的修改
//选中的字体
.mbsc-mobiscroll .dw-cal .dw-sel .dw-i {
background: none repeat scroll 0 0 #565656;
color: #fff;
}
//日期的显示字体
.mbsc-mobiscroll .dw-cal-days {
color: #565656;
}
.mbsc-mobiscroll .dw-cal-days {
color: #4eccc4;
}
.mbsc-mobiscroll .dw-cal-days {
border-bottom: 1px solid #4eccc4;
color: #4eccc4;
}
//年月与具体日期的分割线
.mbsc-mobiscroll .dw-cal-days {
border-bottom: 1px solid #565656;
color: #565656;
}
附件中有从官网下载的demo，提供给大家
$(function(){
function init() {
// alert(document.documentElement.scrollWidth);
var calendar_width_ = document.documentElement.scrollWidth-12;
// alert(calendar_width_);
$('#calendar_date').mobiscroll().calendar({
theme: 'mobiscroll',
lang: 'zh',
//在页面中显示，不是以弹出的方式显示
display: 'inline',
controls: ['calendar'],
//设置100%在android 手机中显示不正常，因此计算出显示宽度
// calendarWidth:"100%",
calendarWidth:calendar_width_,
//不允许滑动，默认是允许滑动来切换月份的
swipe:false,
closeOnSelect: true,
//是否允许多选
multiSelect: true, // Enable multi-selection
//2015-6-9 2015-6-8 2015-6-15
selectedValues: [ new Date(2015,5,9), new Date(2015,5,8), new Date(2015,5,14) ], // Initial selected days
//设置为false，则点击空白地方不会关闭弹出层，默认为true
// closeOnOverlay:true,
//设置最小日期
// minDate: new Date(2015, 6, 1),
// maxDate: new Date(2015, 7, 30),
onShow:function mobiscroll_show(html, valueText, inst){
// console.log(html);
// console.log(valueText);
// console.log(inst);
//隐藏input表单
$(this).hide();
// 去除年 和 月份的选择
$(".dw-cal-header").remove();
// console.log('$("#huangbiao").css("height") : ' + $("#huangbiao").css("height"));
//设置一个遮罩层让其完全透明，不让其点击 和 选择日期
$("#huangbiao").append('<div class="sqh_absolute all_width sqh_opacity_0 sqh_position_top_left_0" id="zhezhao_div" dsafdsaf</div>');
//计算出遮罩层的高度
$("#zhezhao_div").css("height",$("#huangbiao").css("height"));
},
//表示礼拜天，礼拜六，5月1号，12月24号，12月25号是不能选择的
// invalid: ['w0', 'w6', '5/1', '12/24', '12/25'],
//当前月份改变
onMonthChange: function (year, month, inst) {
// console.log(year);
// console.log(month);
}
});
}
init();
});
另外我自己做了修改的， 请点击这里 。
