头像

jQuery设置商品价格库存日历提示插件

来源:http://www.sucaihuo.com/js/3459 素材火管理员 2018-02-08 21:05浏览(527) 收藏

一款非常实用的jQuery设置商品价格库存日历提示插件,可以设置商品每天的价格和库存信息提示,还适应于手机端的交互式日历提醒代码。
jQuery设置商品价格库存日历提示插件
分类:日期时间 > 日历 难易:初级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 15

手机扫码访问:

下载资源 下载积分: 30 积分

js代码

<script src="dist/js/calendar-price-jquery.min.js"></script>
<script>
  $(function () {

    var mockData = [
      {
        date: "2017-11-21",
        stock: 9000,
        buyNumMax: 50,
        buyNumMin: 1,
        price: "0.12",
        priceMarket: "100.00",
        priceSettlement: "90.00",
        priceRetail: "99.00"
      },{
        date: "2017-12-12",
        stock: 900,
        buyNumMax: 50,
        buyNumMin: 1,
        price: "12.00",
        priceMarket: "100.00",
        priceSettlement: "90.00",
        priceRetail: "99.00"
      }
    ];

    for (var i = 0; i < 100; i++) {
      mockData.push({
        date: '2018-'+ fd(i%8 + 1) +'-' + fd(randNum(30)),
        stock: i*21,
        buyNumMax: "50",
        buyNumMin: "1",
        price: randNum(i) + '.00',
        priceMarket: "100.00",
        priceSettlement: "90.00",
        priceRetail: "99.00"
      });
    }

    $.CalendarPrice({
      el: '.container',
//        startDate: '2017-08-02',
      endDate: '2018-2-20',
      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('取消设置 ....');
        // 取消设置
        // 这里可以触发关闭设置窗口
        // ...
      },
      reset: function () {
        console.log('数据重置成功!');
      },
      error: function (err) {
        console.error(err.msg);
        alert(err.msg);
      },
      // 自定义颜色
      style: {
        // 头部背景色
        headerBgColor: '#098cc2',
        // 头部文字颜色
        headerTextColor: '#fff',
        // 周一至周日背景色,及文字颜色
        weekBgColor: '#098cc2',
        weekTextColor: '#fff',
        // 周末背景色,及文字颜色
        weekendBgColor: '#098cc2',
        weekendTextColor: '#fff',
        // 有效日期颜色
        validDateTextColor: '#333',
        validDateBgColor: '#fff',
        validDateBorderColor: '#eee',
        // Hover
        validDateHoverBgColor: '#098cc2',
        validDateHoverTextColor: '#fff',
        // 无效日期颜色
        invalidDateTextColor: '#ccc',
        invalidDateBgColor: '#fff',
        invalidDateBorderColor: '#eee',
        // 底部背景颜色
        footerBgColor: '#fff',
        // 重置按钮颜色
        resetBtnBgColor: '#77c351',
        resetBtnTextColor: '#fff',
        resetBtnHoverBgColor: '#55b526',
        resetBtnHoverTextColor: '#fff',
        // 确定按钮
        confirmBtnBgColor: '#098cc2',
        confirmBtnTextColor: '#fff',
        confirmBtnHoverBgColor: '#00649a',
        confirmBtnHoverTextColor: '#fff',
        // 取消按钮
        cancelBtnBgColor: '#fff',
        cancelBtnBorderColor: '#bbb',
        cancelBtnTextColor: '#999',
        cancelBtnHoverBgColor: '#fff',
        cancelBtnHoverBorderColor: '#bbb',
        cancelBtnHoverTextColor: '#666'
      }
      // 点击有效的某一触发的回调函数
      // 注意:配置了此参数,设置窗口无效,即不能针对日期做参数设置
      // 返回每天的数据
//        everyday: function (dayData) {
//            console.log('点击某日,返回当天的数据');
//            console.log(dayData);
//        },
      // 隐藏底部按钮(重置、确定、取消),前台使用该插件时,则需要隐藏底部按钮
//        hideFooterButton: true
    });

  });

  function randNum(max) {
    return Math.round(Math.random() * max);
  }

  function fd(n) {
    n = n.toString();
    return n[1] ? n : '0' + n;
  }
</script>
评论7
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 6楼
    04-26 09:22
    ☆ ***微凉
    怎么动态的刷新data啊
  • 头像 5楼
    02-28 21:31
    我***哥
    这个还不错,我当时要完成一个日历的功能模块,实在不会写,下了这个模板,改改,变成我要用的。真的很不错这个
  • 头像 4楼
    02-24 16:17
    邱***明
    很好的东西,可以学习
  • 头像 3楼
    02-17 11:34
    黎***族
    正好需要,感谢分享,再接再厉
  • 头像 板凳
    02-10 20:42
    狂***牛
    还不错 值的学习
    看看
  • 头像 椅子
    02-10 11:41
    舒***畅
    这个带事件的日历比较实用,可扩展性也大。
  • 头像 沙发
    02-10 09:04
    胡***胡
    相当不错的功能,感谢分享!~
1 2