# Calendar-price-jquery
基于Jquery的日历价格、库存等设置插件，也可以作为前台显示日期、价格用。需要设置的参数(字段)需自定义，详见(demo)使用方法...
> 浏览器兼容：ie9+
<p align="left">
<a href="https://npmcharts.com/compare/calendar-price-jquery?minimal=true"><img src="https://img.shields.io/npm/dm/calendar-price-jquery.svg?sanitize=true" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/calendar-price-jquery"><img src="https://img.shields.io/npm/v/calendar-price-jquery.svg?sanitize=true" alt="Version"></a>
<a href="https://www.npmjs.com/package/calendar-price-jquery"><img src="https://img.shields.io/npm/l/calendar-price-jquery.svg?sanitize=true" alt="License"></a>
</p>
#### 主要功能
* 自定义日历显示参数
* 自定义需要设置的参数
* 自定义插件的样式风格(颜色)
#### npm
```bash
npm install calendar-pirce-jquery --save-dev
```
#### yarn
```bash
yarn add calendar-price-jquery
```
## 使用效果图
PC端
移动端
## 日历范围处理流程
## 使用方法
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Capricorncd Calendar-Price-jQuery</title>
<!-- 引入日历样式文件 -->
<link rel="stylesheet" href="../dist/css/calendar-price-jquery.min.css">
</head>
<body>
<!-- 日历显示的容器 -->
<div class="container"></div>
<!-- 引入jQuery.js文件 -->
<script src="jquery-1.12.4.min.js"></script>
<!-- 引入日历价格设置插件js文件 -->
<script src="../dist/js/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 () {
// 日历设置参数配置
var calendarConfig = [
{
key: 'buyNumMax',
name: '最多购买数',
type: 'number',
placeholder: '请输入最多购买数量',
// 可被编辑字段，即会显示对于input
editable: true
},
{
key: 'price',
name: '分销售价',
type: 'text',
placeholder: '请输入',
// 不能编辑，不会显示该项input
editable: false
},
{
key: 'priceMarket',
name: '景区挂牌价',
type: 'text',
placeholder: '请输入',
// input为禁用状态
disabled: true
},
...
]
// 日历中显示配置
var showConfig = [
{
key: 'price',
name: '分:￥'
},
{
key: 'priceSettlement',
name: '采:￥'
},
{
key: 'buyNumMax',
name: '采:￥'
},
...
]
var zxCalendar = $.CalendarPrice({
// 显示日历的容器
el: '.container',
// 设置开始日期
// 可选参数，默认为系统当前日期
startDate: '2017-08-02',
// 可选参数，默认为开始日期相同的1年后的日期
// 设置日历显示结束日期
endDate: '2017-09',
// 初始数据
data: mockData,
// 配置需要设置的字段名称，请与你传入的数据对象对应
config: calendarConfig,
// 配置在日历中要显示的字段
show: showConfig,
// 自定义风格(颜色)
style: {
// 详见参数说明
// ...
// 头部背景色
//headerBgColor: '#f00',
// 头部文字颜色
//headerTextColor: '#fff'
}
});
});
</script>
</body>
</html>
```
事件监听
```javascript
var zxCalendar = $.CalendarPrice({'配置参数'});
// 监听设置表单提交
// 将阻止默认流程执行
// 继续执行默认流程，请执行参数next()
zxCalendar.$on('submit-form', function (data, next) {
// data 设置的数据
console.log('$(submit-form)表单数据 ================')
console.log(data)
// 此处可以验证表单
// 验证表单逻辑....
// ....
// 继续执行下一步
next()
})
// 执行过程中错误回调
zxCalendar.$on('error', function (err) {
// 执行中的错误提示
console.error('$on(error)Error:')
console.log(err)
alert(err.msg);
})
// 切换月份
zxCalendar.$on('month-change', function (data) {
log('$on(month-change) 数据：');
log(data);
})
// 点击有效的某一天通知
zxCalendar.$on('valid-day', function (day, data, next) {
log('$on(valid-day)当前点击的(有效)日期为: ' + day + ', 数据：');
log(data);
// 继续执行默认流程
next();
})
// 设置数据变化
zxCalendar.$on('setup-value-change', function (data) {
log('$on(setup-value-change)设置窗口被修改数据....');
log(data);
// 取消设置
// 这里可以触发关闭设置窗口
})
// 点击重置按钮回调
zxCalendar.$on('reset', function () {
log('$on(reset)数据重置成功！');
})
// 点击确定按钮回调，返回当前设置数据
zxCalendar.$on('confirm', function (data) {
log('$on(confirm)点击确定按钮通知！');
log(data);
})
// 点击取消按钮回调
zxCalendar.$on('cancel', function () {
log('$on(cancel)取消设置 ....');
// 取消设置
// 这里可以触发关闭设置窗口
})
```
## Options 参数
* cancel(): `Function` (可选)， 点击`取消`按钮的回调函数。
* callback(data): `Function` (可选)， 点击`确定`按钮，返回设置完成的所有数据。
* config: `Array` (必须)，与data中的数据参数(属性)对应，该配置里的配置项，即可设置的参数字段，`key` 为需要设置的字段，`name`为输入框前面显示的名称。
|元素字段|类型|必须|说明|
|:--|:--|:--|:--|
|disabled|boolean|否|是否禁用input输入，默认为`false`|
|editable|boolean|否|是否显示该项input，默认为`true`|
* data: `Object` (可选)，初始时日历上显示的数据，详见使用方法。
* disableSetup: `Boolean` (可选)禁用设置窗口显示。当该插件在前台web页面中作为展示时，不需要弹出设置窗口操作，则可以禁用设置窗口。默认值为`false`。
* el: `String` (必须)，显示日历的容器，jquery选择器均可(#id, \[属性], .class等)。
* endDate: `String` (可选)，结束日期。日历中可设置数据的结束日期，该日期以后的月份将不能显示或操作，同`startDate`，支持某月(默认去该月最后一天)或某天。若未配置此项，系统默认为1年后的今日，即日期范围为1年。
* error(errObject): `Function` (可选)， 配置或操作中的错误、提示信息等回调函数。
* everyday(dayData): `Function` (可选)， 点击有效的`某日`，返回当天的数据。注意：配置了此参数，设置窗口无效，即不能针对日期做参数设置。
* hideFooterButton: `Boolean` (可选)， 隐藏底部按钮（重置、确定、取消）。前台使用该插件时，则需要隐藏底部按钮，只做日历/价格显示。默认值`false`。
* monthChange(monthData): `Function` (可选) 月份切换时，返回切换前日历数据
* show: `Array` (可选)， 日历中需要显示的参数(属性)，与data中
Calendar-price-jquery日历价格插件
需积分: 27 26 浏览量
2022-06-30
09:36:42
上传
评论
收藏 128KB ZIP 举报
calendar-price-jquery-master.zip （19个子文件） 
calendar-price-jquery-master 
gulpfile-lock.js 1KB package.json 831B gulpfile.js 1KB dist css calendar-price-jquery.min.css 15KB js calendar-price-jquery.min.js 20KB src img 
arrow.png 1KB bg-black.png 922B close.png 1KB js calendar-price-jquery.js 40KB stylus calendar-price-jquery.styl 8KB .gitignore 47B demo process.png 25KB preview-mobile.png 20KB
index.html 6KB js mock-data.js 852B jquery-1.12.4.min.js 95KB preview-pc.png 16KB README.md 11KB .editorconfig 147B
评论0