基于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 Validate 校验多个相同name的方法
May 18 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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自动加载方式集合
2016/04/04 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
JS判断数组那点事
2017/10/10 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
深入理解Python对Json的解析
2017/02/14 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python实现井字棋小游戏
2020/03/04 Python
Python容器类型公共方法总结
2020/08/19 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
工地安全检查制度
2014/02/04 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
表扬稿格式范文
2015/01/16 职场文书
幽默导游词开场白
2015/05/29 职场文书
聘用合同范本
2015/09/21 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技