基于jquery日歷價格、庫存等設(shè)置插件

更新時間：2021年04月27日 11:45:16 作者：Yagizacd

這篇文章主要為大家詳細介紹了基于jquery日歷價格、庫存等設(shè)置插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

基于jquery的日歷價格、庫存等設(shè)置插件。需要設(shè)置的參數(shù)(字段)需自定義，詳見(demo)使用方法…

源碼地址

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" >
</head>
<body>

<!-- 日歷顯示的容器 -->
<div class="container"></div>

<!-- 引入jQuery.js文件 -->
<script src="jquery-1.12.4.min.js"></script>
<!-- 引入日歷價格設(shè)置插件js文件 -->
<script src="../build/calendar-price-jquery.min.js"></script>
<script>
$(function () {

 // 以下mockData是模擬JSON數(shù)據(jù)，一般情況是從后端(服務(wù)器端)獲取
 // 對象中'date'字段必須，且格式一定要為0000-00-00
 // 除'date'以為的字段需自定義，然后必須在config:[]中配置
 // 需要在日歷中顯示參數(shù)，需在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',
  // 設(shè)置開始日期
  startDate: '2017-08-02',
  // 設(shè)置日歷顯示結(jié)束日期
  endDate: '2017-09',
  // 初始數(shù)據(jù)
  data: mockData,
  // 配置需要設(shè)置的字段名稱，請與你傳入的數(shù)據(jù)對象對應(yīng)
  config: [
   {
    key: 'buyNumMax',
    name: '最多購買數(shù)'
   },
   {
    key: 'buyNumMin',
    name: '最少購買數(shù)'
   },
   {
    key: 'price',
    name: '分銷售價'
   },
   {
    key: 'priceMarket',
    name: '景區(qū)掛牌價'
   },
   {
    key: 'priceSettlement',
    name: '分銷結(jié)算價'
   },
   {
    key: 'priceRetail',
    name: '建議零售價'
   },
   {
    key: 'cashback',
    name: '返現(xiàn)'
   },
   {
    key: 'stock',
    name: '當天庫存'
   }
  ],
  // 配置在日歷中要顯示的字段
  show: [
   {
    key: 'price',
    name: '分:￥'
   },
   {
    key: 'priceSettlement',
    name: '采:￥'
   },
   {
    key: 'stock',
    name: '庫:'
   }
  ],
  // 點擊'確定'按鈕，返回設(shè)置完成的所有數(shù)據(jù)
  callback: function (data) {
   console.log('callback ....');
   console.log(data);
  },
  // 點擊'取消'按鈕的回調(diào)函數(shù)
  cancel: function () {
   console.log('取消設(shè)置 ....');
   // 取消設(shè)置
   // 這里可以觸發(fā)關(guān)閉設(shè)置窗口等操作
   // ...
  },
  // 錯誤等提示信息回調(diào)函數(shù)
  error: function (err) {
   console.error(err.msg);
  }
 });

});

</script>

</body>
</html>

使用效果圖

Options 參數(shù)

•el: .Container (必須)，顯示日歷的容器，jquery選擇器均可(#id, [屬性], .classs等)。

•startDate: 2017-06-20 (可選)，開始日期?？稍O(shè)置數(shù)據(jù)的開始日期，該日期以前的月份將不能設(shè)置或操作，支持某月2017-06或某天。開始日期開始日期未配置或小于當前系統(tǒng)時間，則開始日期取今日。

•endDate: 2017-09-20 (可選)，結(jié)束日期。日歷中可設(shè)置數(shù)據(jù)的結(jié)束日期，該日期以后的月份將不能顯示或操作，同startDate，支持某月(默認去該月最后一天)或某天。若未配置此項，系統(tǒng)默認為1年后的今日，即日期范圍為1年。

•data: mockData (可選)，初始時日歷上顯示的數(shù)據(jù)，詳見使用方法。

•config: array (必須)，與data中的數(shù)據(jù)參數(shù)(屬性)對應(yīng)，該配置里的配置項，即可設(shè)置的參數(shù)字段，key 為需要設(shè)置的字段，name為輸入框前面顯示的名稱。

•show: array (可選)，日歷中需要顯示的參數(shù)(屬性)，與data中的數(shù)據(jù)參數(shù)(屬性)對應(yīng)。key 為需要設(shè)置的字段名，name為顯示在日歷中的名稱(簡稱)。

•callback: function (必須)，點擊確定按鈕，返回設(shè)置完成的所有數(shù)據(jù)。

•cancel: function (可選)，點擊取消按鈕的回調(diào)函數(shù)。

•error: function (可選)，配置或操作中的錯誤、提示信息等回調(diào)函數(shù)。

源碼地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: