Giter VIP home page Giter VIP logo

datepicker's Introduction

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="酒店价格日历"/>

有部分同学反映无法运行,请不要用浏览器直接打开index.html,请在服务器环境下访问该程序!
该代码是从大型项目中抽取出来的,如果您觉得我的此项目对您有些帮助,您的star就是对我最大的鼓励!

datepicker's People

Contributors

melodyne avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.