基于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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jquery树形插件zTree高级使用详解
Aug 16 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
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
小程序实现多列选择器
2019/02/15 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
客服工作职责
2013/12/11 职场文书
销售冠军获奖感言
2014/02/03 职场文书
静心口服夜广告词
2014/03/20 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
投资意向书
2014/07/30 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
消防验收申请报告
2015/05/15 职场文书
新学期开学寄语2016
2015/12/04 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis