类似途牛的价格日历的简单实现

版权声明：本文为博主原创文章，希望能与大家共享。 https://blog.csdn.net/dunegao/article/details/78999658

1、引入插件

<!--价格日历插件-->
<link rel="stylesheet" href="../../css/common/calendar-price-jquery.min.css" />
<!--价格日历插件-->
<script src="../../js/common/calendar-price-jquery.min.js"></script>

2、html代码

<div class="calendar_price"></div>

3、js代码

var mockData = [
  {
	date: "2018-01-03",
	price: "0.12"
  },{
	date: "2018-01-04",
	price: "12.00"
  },{
	date: "2018-01-20",
	price: "12000"
  }
];

var nowdate = new Date();
var year = nowdate.getFullYear();
var month = nowdate.getMonth() + 1;
var day = nowdate.getDay();
var begindate = year + '-' + month + '-' + day;

$.CalendarPrice({
  el: '.calendar_price',
  startDate: begindate,		// 开始日期
  data: mockData,					// 日历初始显示的数据
  // 配置需要设置的字段名称
  config: [],
  // 配置在日历中要显示的字段
  show: [{key: 'price',name: '¥'}],
  // 自定义颜色
  style: {
	// 头部背景色
	headerBgColor: '#5CC1DE',
	// 头部文字颜色
	headerTextColor: '#fff',
	// 周一至周日背景色，及文字颜色
	weekBgColor: '#5CC1DE',
	weekTextColor: '#fff',
	// 有效日期颜色
	validDateTextColor: '#333',
	validDateBgColor: '#fff',
	validDateBorderColor: '#eee',
	// Hover
	validDateHoverBgColor: '#5CC1DE',
	validDateHoverTextColor: '#fff',
	// 无效日期颜色
	invalidDateTextColor: '#ccc',
	invalidDateBgColor: '#fff',
	invalidDateBorderColor: '#eee'
  },
  // 点击有效的某一触发的回调函数,覆盖掉默认的弹窗
  everyday: function () {},
  // 隐藏底部按钮（重置、确定、取消）
  hideFooterButton: true
});