jquery日历价格、库存等插件设置实例

来源：懂视网责编：小采时间：2020-11-27 20:07:11

jquery日历价格、库存等插件设置实例

jquery日历价格、库存等插件设置实例:本文主要介绍了基于jquery日历价格、库存等设置插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。Commodity calendar, price, inventory and other settings of jQuery plug-in基于jquery的日历价格、库存等

推荐度：

点击下载本文 文档为doc格式

导读jquery日历价格、库存等插件设置实例:本文主要介绍了基于jquery日历价格、库存等设置插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。Commodity calendar, price, inventory and other settings of jQuery plug-in基于jquery的日历价格、库存等

本文主要介绍了基于jquery日历价格、库存等设置插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

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

使用方法

<!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>

<!-- 日历显示的容器 -->
<p class="container"></p>

<!-- 引入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>

使用效果图