JQuery plug-in for setting com
基于Jquery的日历价格、库存等设置插件，也可以作为前台显示日期、价格用。需要设置的参数(字段)需自定义，详见(demo)使用方法...
浏览器兼容：ie9+
自定义日历显示参数
自定义需要设置的参数
自定义插件的样式风格(颜色)
npmnpm install calendar-pirce-jquery --save-dev yarn
yarn add calendar-price-jquery 使用效果图
PC端
移动端
<!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)取消设置 ....'); // 取消设置 // 这里可以触发关闭设置窗口 }) 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中的数据参数(属性)对应。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' } Method 方法 $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) 更新日历数据；参数为新的数据。
Copyright and licensehttps://github.com/capricorncd
Code and documentation copyright 2018. capricorncd. Code released under the MIT License.
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
