datepicker/calendar(价格日历|日历|日期选择器)

摘要：基于事件操作的价格日历，适用于端和移动端

基于事件操作的价格日历，适用于PC端和移动端
https://github.com/Fi2zz/date...

Base on event

Easy to display data on html element by using data event

Support double views,flat view and single view

Disabled date can be selected as end date while using setData function

Support Multi selection

</>复制代码 
yarn dev or npm run dev 

</>复制代码 
when `selection` is greater than 2, `bindData` and `doubleSelect` will be set to `false`,
and `option.limit` will be set the same as `selection`

</>复制代码 
   setDates([dates]:tuple);
   //Set  dates to DatePicker
   //dates accept  and 
   setLanguage(language:any);
   //set DatePicker"s language
   setData(callback)
   //set data to DatePicker
   //more detail see [USAGE]
   setDisabled({
        days?:Array[5],
        dates?:Array,
        from?:,
        to?:
    })
   //Set disabled dates to DataPicker
   //dates =>dates accept  and ,  all dates in [dates] will be disabled
   //days => days accept number of [0~6],   all days in [days] will be disabled
   //from => from accept  or , all dates after [from] date will be disabled,
   //        eg: from = 2018-3-31 => disabled from 2018-4-1  
   //to   => to accept  or  all dates before [to] date will be disabled,
   //        eg: to =2018-3-4 => all dates before 2018-3-5 will be disabled
   parse(formattedDate:string,dateFormat:string)
   //Transform date string into date object,return Date object
   //eg: formattedDate ="2018-3-4",format="YYYY-M-D" =>  new Date(2018,2,4)
   format(date:Date,format:string)
   //Transform date object into string,return string  
   //eg: date =new Date(),format="YYYY-MM-DD" => 2018-03-04
   on(event:string,fn:Function)
   //Event listener
   //eg: datePicker.on("event",(result)=>{
                //your logic
   //    })

</>复制代码 
    //es module
    import DatePicker from "/dist/datepicker.esm.js"
    import "/dist/style.css"
    //cjs
    const DatePicker =require("/dist/datepicker.js");
    require("/dist/style.css");
    //umd
    
    
    const date = new Date();
    const dist = {
           year: date.getFullYear(),
           month: date.getMonth(),
           date: date.getDate()
    };
    const from = new Date(dist.year, dist.month, dist.date)
    const to = new Date(dist.year, dist.month + 9, 0);
    const currDate = new Date(dist.year, dist.month, dist.date);
    //setup DatePicker instance
    const app = new DatePicker({
            el: document.getElementById("datepicker"),
            endDate:to,
            startDate:from,
            limit: 7,
            format: "YYYY-M-D",
            doubleSelect: true,
            views: 1,
            selection:4 // if selection not less than 2, doubleSelect will be disabled,
                        //and `data` event and `setData` will not work
    });
    //`update` event fired by click on date cell and DatePicker init
    app.on("update", (result) => {
        // result contains two keys, `value` and `type`
        // value =>  selected dates
        // type  =>  two types => `init` and `selected`
        // place your logic  here
        //eg:
        // document.getElementById("dates").innerText = value
    });
    // `disabled`event fired by `setDisabled`
    app.on("disabled", (result) => {
        // result contains two keys, `dateList` and `nodeList`
        const {dateList, nodeList} = result;
        for (let n = 0; n < nodeList.length; n++) {
            let node = nodeList[n];
            if (dateList[node.getAttribute("data-date")]) {
                node.classList.add("disabled")
            }
        }
    });
    // "data" event fired by `setData`
    app.on("data", (result) => {
        //set HTML nodes states
        // result contains two keys, `data:any` and `nodeList:Array`
            const data = result.data;
            const nodeList = result.nodeList;
            for (let i = 0; i < nodeList.length; i++) {
                let node = nodeList[i];
                let date = node.getAttribute("data-date");
                if (date in data) {
                    if (!node.classList.contains("disabled")) {
                        let itemData = source[date];
                        if (itemData.highlight) {
                            addClass(node, "highlight")
                        }
                        let placeholder = node.querySelector(".placeholder");
                        placeholder.innerHTML = itemData.value
                    }
                } else {
                    addClass(node, "disabled")
                }
            }
        });
       //tuple type,accept  and 
       const selected=["2018-2-21",new Date()];
       //use `setDates` to set init dates to DatePicker instance
       app.setDates(selected);
       // use `setDisabled` to set specified date or day to disabled,
       // `setDisabled` accept an object => {dates,days},
       // dates,accept  and  
       // >days accept 0,1,2,3,4,5,6
       app.setDisabled({
                dates: [
                    "2018-2-18",
                    "2018-2-19",
                    "2018-2-22",
                    new Date
                ],
                days: [1, 5, 2, 6],
                from:new Date(2018,2,10)
                to:"2018-7-15"
            });
        // To display your data,like price info on date cell,
        // use `setData` to pass data to `DatePicker` instance
        // `setData` function will dispatch `data` event
        // setup a listener to handle it
       app.setData(() => {
                    const data ={};
                    /*data accept Object like
                     {
                       "2018-1-31":{/*your codes * },
                       "2018-2-21":123,
                        }
                    */
                    //your logic here
                    //return data when your logic done
                    return data
        });
       //set DatePicker"s language
       //language options
       const language={
                 days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
                 months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                 year: ""
       };
       app.setLanguage(language)