当前位置:Gxlcms > JavaScript > 基于jquery日历价格、库存等设置插件

基于jquery日历价格、库存等设置插件

时间:2021-07-01 10:21:17 帮助过:55人阅读

Commodity calendar, price, inventory and other settings of jQuery plug-in

基于jquery的日历价格、库存等设置插件。需要设置的参数(字段)需自定义,详见(demo)使用方法…

源码地址:https://github.com/capricorncd/calendar-price-jquery

Create by capricorncd / 2017-06-11

使用方法

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Capricorncd Calendar-Price-jQuery</title>
  6. <!-- 引入日历样式文件 -->
  7. <link rel="stylesheet" href="../build/calendar-price-jquery.css" rel="external nofollow" >
  8. </head>
  9. <body>
  10. <!-- 日历显示的容器 -->
  11. <div class="container"></div>
  12. <!-- 引入jQuery.js文件 -->
  13. <script src="jquery-1.12.4.min.js"></script>
  14. <!-- 引入日历价格设置插件js文件 -->
  15. <script src="../build/calendar-price-jquery.min.js"></script>
  16. <script>
  17. $(function () {
  18. // 以下mockData是模拟JSON数据,一般情况是从后端(服务器端)获取
  19. // 对象中'date'字段必须,且格式一定要为0000-00-00
  20. // 除'date'以为的字段需自定义,然后必须在config:[]中配置
  21. // 需要在日历中显示参数,需在show:[]中配置
  22. var mockData = [
  23. {
  24. date: "2017-06-21",
  25. stock: "9000",
  26. buyNumMax: "50",
  27. buyNumMin: "1",
  28. price: "0.12",
  29. priceMarket: "100.00",
  30. priceSettlement: "90.00",
  31. priceRetail: "99.00"
  32. },{
  33. date: "2017-07-12",
  34. stock: "9000",
  35. buyNumMax: "50",
  36. buyNumMin: "1",
  37. price: "12.00",
  38. priceMarket: "100.00",
  39. priceSettlement: "90.00",
  40. priceRetail: "99.00"
  41. }
  42. ];
  43. // 插件使用
  44. $.CalendarPrice({
  45. // 显示日历的容器
  46. el: '.container',
  47. // 设置开始日期
  48. startDate: '2017-08-02',
  49. // 设置日历显示结束日期
  50. endDate: '2017-09',
  51. // 初始数据
  52. data: mockData,
  53. // 配置需要设置的字段名称,请与你传入的数据对象对应
  54. config: [
  55. {
  56. key: 'buyNumMax',
  57. name: '最多购买数'
  58. },
  59. {
  60. key: 'buyNumMin',
  61. name: '最少购买数'
  62. },
  63. {
  64. key: 'price',
  65. name: '分销售价'
  66. },
  67. {
  68. key: 'priceMarket',
  69. name: '景区挂牌价'
  70. },
  71. {
  72. key: 'priceSettlement',
  73. name: '分销结算价'
  74. },
  75. {
  76. key: 'priceRetail',
  77. name: '建议零售价'
  78. },
  79. {
  80. key: 'cashback',
  81. name: '返现'
  82. },
  83. {
  84. key: 'stock',
  85. name: '当天库存'
  86. }
  87. ],
  88. // 配置在日历中要显示的字段
  89. show: [
  90. {
  91. key: 'price',
  92. name: '分:¥'
  93. },
  94. {
  95. key: 'priceSettlement',
  96. name: '采:¥'
  97. },
  98. {
  99. key: 'stock',
  100. name: '库:'
  101. }
  102. ],
  103. // 点击'确定'按钮,返回设置完成的所有数据
  104. callback: function (data) {
  105. console.log('callback ....');
  106. console.log(data);
  107. },
  108. // 点击'取消'按钮的回调函数
  109. cancel: function () {
  110. console.log('取消设置 ....');
  111. // 取消设置
  112. // 这里可以触发关闭设置窗口等操作
  113. // ...
  114. },
  115. // 错误等提示信息回调函数
  116. error: function (err) {
  117. console.error(err.msg);
  118. }
  119. });
  120. });
  121. </script>
  122. </body>
  123. </html>

使用效果图

Options 参数

 •el: .Container (必须),显示日历的容器,jquery选择器均可(#id, [属性], .classs等)。

•startDate: 2017-06-20 (可选),开始日期。可设置数据的开始日期,该日期以前的月份将不能设置或操作,支持某月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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行