基于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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Jquery Fade用法详解
Nov 06 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
浅析is_writable的php实现
2013/06/18 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
小程序实现投票进度条
2019/11/20 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python中字典映射类型的学习教程
2015/08/20 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Django实现快速分页的方法实例
2017/10/22 Python
python2 与python3的print区别小结
2018/01/16 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python logging添加filter教程
2019/12/24 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
Vrbo英国:预订度假屋
2020/08/19 全球购物
个人现实表现材料
2014/02/04 职场文书
安全责任协议书
2014/04/21 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
学困生转化工作总结
2015/08/13 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技