基于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+pjax简单示例汇总
Apr 21 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 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
基于mysql的论坛(1)
2006/10/09 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
DOM 事件流详解
2015/01/20 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Django框架实现的简单分页功能示例
2018/12/04 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
自查自纠工作总结
2014/10/15 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python