這篇文章將為大家詳細講解有關基于jquery日歷價格、庫存等設置插件的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
源碼地址：https://github.com/capricorncd/calendar-price-jquery
Create by capricorncd / 2017-06-11
使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Capricorncd Calendar-Price-jQuery</title>
<!-- 引入日歷樣式文件 -->
<link rel="stylesheet" href="../build/calendar-price-jquery.css" rel="external nofollow" >
</head>
<body>
<!-- 日歷顯示的容器 -->
<div class="container"></div>
<!-- 引入jQuery.js文件 -->
<script src="jquery-1.12.4.min.js"></script>
<!-- 引入日歷價格設置插件js文件 -->
<script src="../build/calendar-price-jquery.min.js"></script>
<script>
$(function () {
// 以下mockData是模擬JSON數據，一般情況是從后端(服務器端)獲取
// 對象中'date'字段必須，且格式一定要為0000-00-00
// 除'date'以為的字段需自定義，然后必須在config:[]中配置
// 需要在日歷中顯示參數，需在show:[]中配置
var mockData = [
{
date: "2017-06-21",
stock: "9000",
buyNumMax: "50",
buyNumMin: "1",
price: "0.12",
priceMarket: "100.00",
priceSettlement: "90.00",
priceRetail: "99.00"
},{
date: "2017-07-12",
stock: "9000",
buyNumMax: "50",
buyNumMin: "1",
price: "12.00",
priceMarket: "100.00",
priceSettlement: "90.00",
priceRetail: "99.00"
}
];
// 插件使用
$.CalendarPrice({
// 顯示日歷的容器
el: '.container',
// 設置開始日期
startDate: '2017-08-02',
// 設置日歷顯示結束日期
endDate: '2017-09',
// 初始數據
data: mockData,
// 配置需要設置的字段名稱，請與你傳入的數據對象對應
config: [
{
key: 'buyNumMax',
name: '最多購買數'
},
{
key: 'buyNumMin',
name: '最少購買數'
},
{
key: 'price',
name: '分銷售價'
},
{
key: 'priceMarket',
name: '景區掛牌價'
},
{
key: 'priceSettlement',
name: '分銷結算價'
},
{
key: 'priceRetail',
name: '建議零售價'
},
{
key: 'cashback',
name: '返現'
},
{
key: 'stock',
name: '當天庫存'
}
],
// 配置在日歷中要顯示的字段
show: [
{
key: 'price',
name: '分:￥'
},
{
key: 'priceSettlement',
name: '采:￥'
},
{
key: 'stock',
name: '庫:'
}
],
// 點擊'確定'按鈕，返回設置完成的所有數據
callback: function (data) {
console.log('callback ....');
console.log(data);
},
// 點擊'取消'按鈕的回調函數
cancel: function () {
console.log('取消設置 ....');
// 取消設置
// 這里可以觸發關閉設置窗口等操作
// ...
},
// 錯誤等提示信息回調函數
error: function (err) {
console.error(err.msg);
}
});
});
</script>
</body>
</html>使用效果圖
Options 參數
?el: .Container (必須)，顯示日歷的容器，jquery選擇器均可(#id, [屬性], .classs等)。
?startDate: 2017-06-20 (可選)，開始日期?？稍O置數據的開始日期，該日期以前的月份將不能設置或操作，支持某月2017-06或某天。開始日期開始日期未配置或小于當前系統時間，則開始日期取今日。
?endDate: 2017-09-20 (可選)，結束日期。日歷中可設置數據的結束日期，該日期以后的月份將不能顯示或操作，同startDate，支持某月(默認去該月最后一天)或某天。若未配置此項，系統默認為1年后的今日，即日期范圍為1年。
?data: mockData (可選)，初始時日歷上顯示的數據，詳見使用方法。
?config: array (必須)，與data中的數據參數(屬性)對應，該配置里的配置項，即可設置的參數字段，key 為需要設置的字段，name為輸入框前面顯示的名稱。
?show: array (可選)， 日歷中需要顯示的參數(屬性)，與data中的數據參數(屬性)對應。key 為需要設置的字段名，name為顯示在日歷中的名稱(簡稱)。
?callback: function (必須)， 點擊確定按鈕，返回設置完成的所有數據。
?cancel: function (可選)， 點擊取消按鈕的回調函數。
?error: function (可選)， 配置或操作中的錯誤、提示信息等回調函數。
源碼地址：https://github.com/capricorncd/calendar-price-jquery
關于“基于jquery日歷價格、庫存等設置插件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
