實用外掛(九)手機日曆外掛——Mobiscroll
阿新 • • 發佈:2019-01-29
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() 從當前年,當前月,當前日開始}