摘要:基于事件操作的價(jià)格日歷,適用于端和移動(dòng)端
基于事件操作的價(jià)格日歷,適用于PC端和移動(dòng)端
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
RUN DEMOyarn dev or npm run devOPTIONS
OPTION | RERUIRED | TYPE | DESC | DEFAULT VALUE |
---|---|---|---|---|
el | YES | string,HTMLElement | Element or selector to mount DatePcker | |
startDate | NO | Date | Start date of DatePicker | new Date |
endDate | NO | Date | End date of DatePicker | new Date() + 6 months |
doubleSelect | NO | boolean | Enable pick two dates | false |
limit | NO | number | Limitation between two dates while doubleSelect is on | |
views | NO | number,string | Display views of DatePicker | auto,1,2 |
selection | NO | number | Size of dates can be picked ,value must be not less than 2 | 1 |
when `selection` is greater than 2, `bindData` and `doubleSelect` will be set to `false`, and `option.limit` will be set the same as `selection`API
setDates([dates]:tuple); //Set dates to DatePicker //dates acceptUSAGEand 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)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/89726.html
摘要:默認(rèn)可選回調(diào)函數(shù),綁定業(yè)務(wù)數(shù)據(jù)。例如某天有日程,則會(huì)在對(duì)應(yīng)日期上標(biāo)識(shí)出一個(gè)小紅點(diǎn)或者其他標(biāo)識(shí),默認(rèn)傳入數(shù)據(jù)格式必選回調(diào)函數(shù),當(dāng)你點(diǎn)擊或輕觸某日期后執(zhí)行。 文檔維護(hù)者:孫尊路 喜歡的話,記得star 一下噢! 適用場(chǎng)景 該組件目前僅適用于移動(dòng)端H5頁面展示,后期高級(jí)用法中會(huì)講述到如何基于日歷基類實(shí)現(xiàn)自定義模板傳入。(即:開發(fā)者只需要傳入自己的模板即可實(shí)現(xiàn)出自己的優(yōu)美的日歷出來。) 本篇...
摘要:百度前端技術(shù)學(xué)院上有一個(gè)任務(wù),要實(shí)現(xiàn)一個(gè)日期選擇組件,本文由此而來看看需求組件默認(rèn)一直呈顯示狀態(tài)通過某種方式選擇年月,選擇了年月后,日期列表做相應(yīng)切換通過單擊某個(gè)具體的日期進(jìn)行日期選擇組件初始化時(shí),可配置可選日期的上下限。 百度前端技術(shù)學(xué)院上有一個(gè)任務(wù),要實(shí)現(xiàn)一個(gè)日期選擇組件,本文由此而來~ 看看需求 組件默認(rèn)一直呈顯示狀態(tài) 通過某種方式選擇年、月,選擇了年月后,日期列表做相應(yīng)切換 ...
摘要:百度前端技術(shù)學(xué)院上有一個(gè)任務(wù),要實(shí)現(xiàn)一個(gè)日期選擇組件,本文由此而來看看需求組件默認(rèn)一直呈顯示狀態(tài)通過某種方式選擇年月,選擇了年月后,日期列表做相應(yīng)切換通過單擊某個(gè)具體的日期進(jìn)行日期選擇組件初始化時(shí),可配置可選日期的上下限。 百度前端技術(shù)學(xué)院上有一個(gè)任務(wù),要實(shí)現(xiàn)一個(gè)日期選擇組件,本文由此而來~ 看看需求 組件默認(rèn)一直呈顯示狀態(tài) 通過某種方式選擇年、月,選擇了年月后,日期列表做相應(yīng)切換 ...
摘要:實(shí)現(xiàn)代碼于文章末尾處構(gòu)思頁面結(jié)構(gòu)組件由輸入框和日歷面板組成,寫好頁面主體結(jié)構(gòu)。輸入框點(diǎn)擊顯示或隱藏日歷面板方法改變布爾值控制日歷面板的顯示隱藏。同時(shí),當(dāng)組件銷毀時(shí),也要及時(shí)清除該監(jiān)聽器。 最近研究了 DatePicker 的實(shí)現(xiàn)原理后做了一個(gè) vue 的 DatePicker 組件,今天帶大家一步一步實(shí)現(xiàn) DatePicker 的 vue 組件。 原理 DatePicker 的原理是—...
閱讀 1814·2021-10-20 13:49
閱讀 1356·2019-08-30 15:52
閱讀 2863·2019-08-29 16:37
閱讀 1033·2019-08-29 10:55
閱讀 3064·2019-08-26 12:14
閱讀 1649·2019-08-23 17:06
閱讀 3235·2019-08-23 16:59
閱讀 2543·2019-08-23 15:42