基于Jquery的日历价格、库存等设置插件，也可以作为前台显示日期、价格用。需要设置的参数(字段)需自定义，详见(demo)使用方法...
浏览器兼容：ie9+
-
自定义日历显示参数
-
自定义需要设置的参数
-
自定义插件的样式风格(颜色)
npm install calendar-pirce-jquery --save-devyarn add calendar-price-jqueryPC端
移动端
<!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>事件监听
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)取消设置 ....');
// 取消设置
// 这里可以触发关闭设置窗口
})-
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中的数据参数(属性)对应。key为需要设置的字段名，name为显示在日历中的名称(简称)。 -
startDate:
2017-06-20(可选)，开始日期。可设置数据的开始日期，该日期以前的月份将不能设置或操作，支持某月2017-06或某天。开始日期开始日期未配置或小于当前系统时间，则开始日期取今日。 -
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'
}- $on('event-name', callback)
| 事件名 | 参数 | 说明 |
|---|---|---|
| cancel | undefiend | 点击取消按钮通知/回调 |
| confirm | (data) | 点击确定按钮通知/回调 |
data Object |
设置的所有数据对象 | |
| error | (errData) | 执行过程中的错误通知/回调 |
errData Object |
错误码，及错误消息对象 | |
| month-change | (data) | 切换月份前触发，返回该月设置数据 |
data Object |
该月设置数据 | |
| reset | undefiend | 点击重置按钮通知/回调 |
| setup-close | undefiend | 设置窗口关闭通知/回调 |
| setup-value-change | (data) | 设置窗口，设置数据被修改触发的通知/回调 |
data Object |
返回当前被修改对象的{name: 'objectName', value: '被修改后的值'}, $el: '当前被修改元素jQuery对象' |
|
| submit-form | (data, next) | 设置窗口点击确定时通知/回调，返回设置的数据data |
data Object |
当前设置窗口中设置的数据 | |
next() Function |
继续执行下一步函数；注意不执行该函数将阻止默认流程继续执行 |
|
| valid-day | (day, data, next) | 点击有效的某一天，触发的事件通知/回调 |
day String |
当前点击日期，格式yyyy-MM-dd | |
data Object |
当前点击日期对应设置的数据 | |
next() Function |
继续执行下一步函数，不执行该函数将阻止默认流程继续执行；注意不调用该函数将阻止默认流程执行！ |
-
getMonthData() 获取当前显示月份的数据
-
update(newArrayData) 更新日历数据；参数为新的数据。
https://github.com/capricorncd
Code and documentation copyright 2018. capricorncd. Code released under the MIT License.