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


Posted in jQuery onJuly 05, 2020

基于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" >
</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>

使用效果图

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

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

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

jQuery 相关文章推荐
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
jquery加载单文件vue组件的方法
Jun 20 #jQuery
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
jQuery实现简单的手风琴效果
Apr 17 #jQuery
jQuery自定义多选下拉框效果
Jun 19 #jQuery
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
You might like
德生H-501的评价与改造
2021/03/02 无线电
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
基于Python的OCR实现示例
2020/04/03 Python
python实现三种随机请求头方式
2021/01/05 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
linux面试题参考答案(3)
2012/09/13 面试题
介绍一下如何优化MySql
2016/12/20 面试题
文员自我评价怎么写
2013/09/19 职场文书
软件工程师岗位职责
2013/11/16 职场文书
打架检讨书400字
2014/01/17 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
辞职离别感言
2015/08/04 职场文书
MySQL之DML语言
2021/04/05 MySQL
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript