calendar-price-jquery
Commodity calendar, price, inventory and other settings of jQuery plug-in
Set up plug-ins based on Jquery's calendar price, inventory, etc. The parameters (fields) that need to be set need to be customized. See demo for details.
Source address: https://github.com/capricorncd/calendar-price-jquery
Create by capricorncd / 2017-06-11
Usage method
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Capricorncd Calendar-Price-jQuery</title>
<!-- Introducing Calendar Style Files -->
<link rel="stylesheet" href="../build/calendar-price-jquery.css">
</head>
<body>
<!-- Calendar Display Container -->
<div class="container"></div>
<!-- Introduce jQuery.js file -->
<script src="jquery-1.12.4.min.js"></script>
<!-- Introducing Calendar Price Setting Plug-in js file -->
<script src="../build/calendar-price-jquery.min.js"></script>
<script>
$(function () {
// The following mockData is simulated JSON data, generally retrieved from the back end (server side)
// The'date'field in the object must be in a format of 0000-00-00
// Except for the fields considered by'date', they need to be customized, and then they must be configured in config:[]
// You need to display parameters in the calendar and configure them in 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"
}
];
// Plug-in use
$.CalendarPrice({
// Containers for displaying calendars
el: '.container',
// Setting the Start Date
startDate: '2017-08-02',
// Set calendar to display end date
endDate: '2017-09',
// Initial data
data: mockData,
// Configure the name of the field you need to set, corresponding to the data object you pass in
config: [
{
key: 'buyNumMax',
name: 'Maximum number of purchases'
},
{
key: 'buyNumMin',
name: 'Minimum purchase'
},
{
key: 'price',
name: 'Distribution Price'
},
{
key: 'priceMarket',
name: 'Listing Price of Scenic Spots'
},
{
key: 'priceSettlement',
name: 'Distribution settlement price'
},
{
key: 'priceRetail',
name: 'Recommended retail price'
},
{
key: 'cashback',
name: 'Return to cash'
},
{
key: 'stock',
name: 'Day stock'
}
],
// Configure the fields to be displayed in the calendar
show: [
{
key: 'price',
name: 'branch:￥'
},
{
key: 'priceSettlement',
name: 'Mining:￥'
},
{
key: 'stock',
name: 'library:'
}
],
// Click on the'OK'button to return all data set up
callback: function (data) {
console.log('callback ....');
console.log(data);
},
// Click the'Cancel'button on the callback function
cancel: function () {
console.log('Cancel Settings ....');
// Cancel Settings
// Here you can trigger operations such as closing the settings window, etc.
// ...
},
// Error and other prompt information callback function
error: function (err) {
console.error(err.msg);
}
});
});
</script>
</body>
</html>
Use effect map
Options parameter
El:.Container (must), container for displaying calendar, jquery selector (# id, [attribute],. Classes, etc.).
startDate: 2017-06-20 (optional), start date. The start date of data can be set, and the month before that date will not be able to set or operate, supporting a month 2017-06 or a day. If the start date is not configured or less than the current system time, the start date is today.
endDate: 2017-09-20 (optional), end date. Calendar can set the end date of data, the month after that date will not be able to display or operate, with startDate, support a month (default to the last day of the month) or a day. If this item is not configured, the system defaults to 1 year later today, that is, the date range is 1 year.
data: mockData (optional), data displayed on the initial calendar, see how to use it.
config: array (must), corresponding to the data parameters (attributes) in the data. The configuration items in this configuration can set the parameter fields, key is the field to be set, and name is the name shown before the input box.
show: array (optional), the parameters (attributes) that need to be displayed in the calendar, correspond to the data parameters (attributes) in the data. The key is the field name to be set and the name is the name to be displayed in the calendar.
callback: function (must), click the OK button, and return all data that has been set up.
cancel: function (optional), click the callback function of the Cancel button.
error: function (optional), error in configuration or operation, prompt information and other callback functions.
Source address: https://github.com/capricorncd/calendar-price-jquery