文章參考
http://demo.mobiscroll.com/calendar
http://docs.mobiscroll.com/2-16-0/calendar#!method-hide?
?
?
? ? 這兩天要做一個(gè)效果 ——? 指定一周的某幾天可以選擇，其余的日期是不讓選擇的，并且要從手機(jī)底部彈出效果 。最終選擇了mobiscroll_calendar插件作為解決方案
?
? ? 但是由于mobiscroll控件是收費(fèi)的，一個(gè)calendar插件需要$95，因此下載了一個(gè)試用版，自己做了一個(gè)修改，保證能夠正常的使用了。
?
例子：
?
<!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,
//設(shè)置為false，則點(diǎn)擊空白地方不會(huì)關(guān)閉彈出層，默認(rèn)為true
closeOnOverlay:true,
//設(shè)置最小日期
// minDate: new Date(2015, 3, 27),
// minDate: new Date(),
// onShow:removeSign,
//表示禮拜天，禮拜六，5月1號(hào)，12月24號(hào)，12月25號(hào)是不能選擇的
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;
}
??
?
附件中有從官網(wǎng)下載的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'],
//設(shè)置100%在android 手機(jī)中顯示不正常，因此計(jì)算出顯示寬度
// calendarWidth:"100%",
calendarWidth:calendar_width_,
//不允許滑動(dòng)，默認(rèn)是允許滑動(dòng)來切換月份的
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
//設(shè)置為false，則點(diǎn)擊空白地方不會(huì)關(guān)閉彈出層，默認(rèn)為true
// closeOnOverlay:true,
//設(shè)置最小日期
// 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"));
//設(shè)置一個(gè)遮罩層讓其完全透明，不讓其點(diǎn)擊 和 選擇日期
$("#huangbiao").append('<div class="sqh_absolute all_width sqh_opacity_0 sqh_position_top_left_0" id="zhezhao_div" dsafdsaf</div>');
//計(jì)算出遮罩層的高度
$("#zhezhao_div").css("height",$("#huangbiao").css("height"));
},
//表示禮拜天，禮拜六，5月1號(hào)，12月24號(hào)，12月25號(hào)是不能選擇的
// invalid: ['w0', 'w6', '5/1', '12/24', '12/25'],
//當(dāng)前月份改變
onMonthChange: function (year, month, inst) {
// console.log(year);
// console.log(month);
}
});
}
init();
});
?
?
另外我自己做了修改的， 請(qǐng)點(diǎn)擊這里 。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
