html价格日历控件
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
css
images
js
README.md
change.json
data.json
index.html
show.gif

README.md

DatePicker 价格日历控件

效果图

接口数据格式
[
    {
        "day": "2016-07-07",
        "price": "158"
    },
    {
        "day": "2017-07-11",
        "price": "158"
    },
    {
        "day": "2017-07-12",
        "price": "158"
    },
    {
        "day": "2017-07-13",
        "price": "158"
    },
    {
        "day": "2017-07-14",
        "price": "158"
    },
    {
        "day": "2017-07-15",
        "price": "158"
    }
]

第一步:引入这三个文件

<link href="css/datepicker.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/zlDate.js"></script>

第二步:初始化组件

pickerEvent.setPriceArr(data);
pickerEvent.Init(e);

第三步:全局实现修改价格方法

/**
 * 修改价格
 * @param date           // 日期
 * @param newPrice       // 新价格
 * @param calendarPrice  // 日历控件对象
 */
function changePrice(date, newPrice, calendarPrice) {
    
    alert('修改价格' + date + "天的价格为" + newPrice);
    
    /*
       在这里实现修改,也就是在这里用调用你的修改接口
       修改成功 则执行 calendarPrice.show();
     */
     
}

控件位置

location="right" 其中值有top,right,bottom,left 分别居于按钮的上,右,下,左

<input style="width: 124px" location="right" class="calendar_btn" name="calendar" readonly="readonly"
           onclick="showCalendar(this,'232');" placeholder="酒店价格日历"/>

该代码是从大型项目中抽取出来的,如果您觉得我的此项目对您有些帮助,您的star就是对我最大的鼓励!