jQuery日历价格、库存设置Web组件2,前后台适用,可自定义字段及颜色风格

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载

calendar-price-jquery

基于Jquery的日历价格、库存等设置插件,也可以作为前台显示日期、价格用。需要设置的参数(字段)需自定义,详见(demo)使用方法...

主要功能

  • 自定义日历显示参数
  • 自定义需要设置的参数
  • 自定义插件的样式风格(颜色)

源码地址: https://github.com/capricorncd/calendar-price-jquery

使用方法

<!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>
// 以下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"
    }
];

// 使用插件
$(function () {

    $.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);
        },
        // 自定义风格(颜色)
        style: {
            // 详见参数说明
            // ...
            // 头部背景色
            //headerBgColor: '#f00',
            // 头部文字颜色
            //headerTextColor: '#fff'
        }
    });

});

</script>

</body>
</html>

使用效果图

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 (可选), 配置或操作中的错误、提示信息等回调函数。
  • everyday: function (可选), 点击有效的某日,返回当天的数据。注意:配置了此参数,设置窗口无效,即不能针对日期做参数设置。
  • hideFooterButton: false (可选), 隐藏底部按钮(重置、确定、取消)。前台使用该插件时,则需要隐藏底部按钮,只做日历/价格显示。
  • style: 自定义颜色
    // 自定义颜色属性
    {
            // 头部背景色
            headerBgColor: '#098cc2',
            // 头部文字颜色
            headerTextColor: '#fff',
            // 周一至周日背景色,及文字颜色
            weekBgColor: '#098cc2',
            weekTextColor: '#fff',
            // 周末背景色,及文字颜色
            weekendBgColor: '#098cc2',
            weekendTextColor: '#fff',
            // 有效日期颜色
            validDateTextColor: '#333',
            validDateBgColor: '#fff',
            validDateBorderColor: '#eee',
            // Hover
            validDateHoverBgColor: '#098cc2',
            validDateHoverTextColor: '#fff',
            // 无效日期颜色
            invalidDateTextColor: '#ccc',
            invalidDateBgColor: '#fff',
            invalidDateBorderColor: '#eee',
            // 底部背景颜色
            footerBgColor: '#fff',
            // 重置按钮颜色
            resetBtnBgColor: '#77c351',
            resetBtnTextColor: '#fff',
            resetBtnHoverBgColor: '#55b526',
            resetBtnHoverTextColor: '#fff',
            // 确定按钮
            confirmBtnBgColor: '#098cc2',
            confirmBtnTextColor: '#fff',
            confirmBtnHoverBgColor: '#00649a',
            confirmBtnHoverTextColor: '#fff',
            // 取消按钮
            cancelBtnBgColor: '#fff',
            cancelBtnBorderColor: '#bbb',
            cancelBtnTextColor: '#999',
            cancelBtnHoverBgColor: '#fff',
            cancelBtnHoverBorderColor: '#bbb',
            cancelBtnHoverTextColor: '#666'
        }

源码地址: https://github.com/capricorncd/calendar-price-jquery

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

CSS入门1-认识html之标签

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1072
来自专栏疯狂的小程序

关于微信小程序内置组件swiper,circular使用分享

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技...

64510
来自专栏大前端开发

微信小程序之图片选择、预览与上传

所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升...

6355
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

37411
来自专栏惶心 - 技术博客

为博客标题自定义字体

最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。(其实我的博客也弄了只不过他们不看而已)。

4084
来自专栏惶心 - 技术博客

Grouper.html: 分享群组的最佳方式

之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个...

1656
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3365
来自专栏从零开始学自动化测试

Selenium+python自动化83-chrome手机wap模式

一、前言 这里是群里(QQ群:226296743)风神出60大洋悬赏的问题,学会这篇就是赚了60大洋了! 我的环境: - chrome 62 - chrome...

4444
来自专栏技术总结

setNeedsLayout和layoutIfNeeded看我就懂!

2649
来自专栏高爽的专栏

HTML DOM(一):认识DOM

什么是DOM?        通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,Java...

2280

扫码关注云+社区

领取腾讯云代金券