不說多的,直接看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Mobiscroll</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<!--Includes-->
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var opt = {
preset: 'date', //日期
theme: 'sense-ui', //皮膚樣式
display: 'modal', //顯示方式
mode: 'scroller', //日期選擇模式
dateFormat: 'yy-mm-dd', // 日期格式
setText: '確定', //確認按鈕名稱
cancelText: '取消',//取消按鈕名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
endYear:2020 //結束年份
};
$("#scroller").mobiscroll(opt).date(opt);
//之前給群里共享發錯了。記得之前寫過一個,估計丟了。現在重寫一個。並完善一下,下面注釋部分是上面的參數可以替換改變它的樣式
//希望一起研究插件的朋友加我個人QQ也可以,本人也建個群 291464597 歡迎進群交流。哈哈。這個不能算廣告。
// 直接寫參數方法
//$("#scroller").mobiscroll(opt).date();
// Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
//具體參數定義如下
//{
//preset: 'date', //日期類型--datatime,
//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}
});
</script>
</head>
<body>
<input id="scroller" name="scroller" />
親們,覺得日期界面不漂亮,看代碼。我都寫上每個參數的具體注釋了。再看不懂,我也沒辦法了。
</body>
</html>
插件文檔參考地址:https://docs.mobiscroll.com/2-5-2/calendar#opt-marked
附上代碼:
mobiscroll-2.5.2-IncreasedChineseSupport.zip
PluginDatetime.zip