Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
css
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

README.md

DatePicker 价格日历控件

体验地址(这里演示只是静态数据修改不会生效,实际功能需要结合你业务接口) https://melodyne.github.io/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就是对我最大的鼓励!

You can’t perform that action at this time.