摘要:,歡迎使用中文文檔在后面自我介紹是為了滿足移動端對各種場景的需求而生的,兼容性強,靈活度高。如空數組默認設置成當月日數組的每一位分別是年月日。
Calendar - A Flexible Calendar for Mobile Intro
Calendar was born for several product requirements in the mobile. It’s free, cute and customized.
The Calendar was builded by protogenic JavaScript. So you can use it with jQuery,Vue, React, and so on.
Calendar - 自我介紹github --- https://github.com/AppianZ/calendar, 歡迎使用
中文文檔在后面~
Calendar是為了滿足移動端對各種場景的需求而生的,兼容性強,靈活度高。
原生插件,可以與任何框架配合使用。
特色功能?? 限制時間范圍,精確到【日期】
?? 有【直接布局】和【彈層顯示】兩種不同調用樣式
?? 自由設置【月份和星期的中英文顯示】、【星期天的排序位置】和【切換操作】
?? 利用回調控制【每一個日期】的不同樣式
?? 可以【選中】時間點,或【時間范圍】
?? 可以根據實際需要,【調整預判手勢的靈敏度】
親自體驗一下demo:??????
Demo & NPMCalendar Demo
Calendar NPM
How To Use1. html中:
我是一個點擊區域,大家快來點我
2. js中:
// 方式一, 直接引用 // 方式二, 引入npm包 import Calendar from "mob-calendar";
如何正確生成實例,請看參數列表:??????
參數列表參數名稱 | 作用 | 類型 | 取值 | 是否必須 |
---|---|---|---|---|
clickTarget | 觸發彈層的dom元素ID | {String} | - | × |
container | 日歷容器的dom元素ID | {String} | - | √ |
angle | 調整預判手勢的靈敏度 | {Number} | 建議5-20 | × |
isMask | 布局是否使用彈層樣式 | {Boolean} | true:彈層顯示, false:正常布局 | √ |
beginTime | 開始時間點 | {Array(Number)} | 數組的每一位分別是年月日,空數組默認1970年1月1日 | √ |
endTime | 結束時間點 | {Array(Number)} | 數組的每一位分別是年月日,空數組默認次年12月31日 | √ |
recentTime | 當前時間點 | {Array(Number)} | 數組的每一位分別是年月日,空數組默認當前月1日 | √ |
isSundayFirst | 星期天是否要放在第一列 | {Boolean} | true:星期日在第一列, false:星期日在最后一列 | √ |
isShowNeighbor | 是否展示相鄰月份的月尾和月頭 | {Boolean} | true:顯示相鄰月份的月尾和月頭, false:不顯示 | √ |
isToggleBtn | 是否展示左右切換按鈕 | {Boolean} | true:顯示左右切換按鈕, false:不顯示 | √ |
isChinese | 是否展示中文星期 | {Boolean} | true:顯示中文星期簡寫,false:顯示英文星期簡寫 | √ |
monthType | 月份的展示字符 | {Number 0-3} | 0:1月, 1:一月, 2:Jan, 3: January | √ |
canViewDisabled | 是否可以閱讀不在范圍內的月份 | {Boolean} | true:無限滑動,false:只查看時間范圍內的月份 | √ |
beforeRenderArr | 初次渲染時給特殊日期指定樣式 | {無序Array(Object)} | 數組元素有兩個參數 指定時間戳stamp{Number} 和 指定樣式名字className {String},詳見下文 | √ |
success | 點擊某個日期的回調 | {Fuction(item, array,cal)} | 返回3個自帶參數,item表示當前點擊的時間戳,array表示連續兩次點擊的兩個時間戳,cal 指向實例 | √ |
switchRender | 日歷切換后的回調 | {Fuction(year, month, cal)} | 返回3個自帶參數,year表示新生成的年份,month表示新生成的月份(從0開始), cal 指向實例 | √ |
js中:
// 渲染時給特殊日期指定樣式的數據格式 beforeRenderArr: [{ stamp: 1512057600000, // 指定某個時間戳 className: "disable", //指定該時間戳渲染的樣式 }]
html中:
// 渲染后的效果如下 // li 是一個矩形,i 是圓形
原型鏈暴露的函數 | 作用 | 示例 |
---|---|---|
renderCallbackArr | 渲染傳入的數組data,用于指定特定日期的特定樣式, 數組data和 beforeRenderArr 的數據格式一致 | cal.renderCallbackArr(data) |
prevent | 方便在回調中阻止默認事件 | cal.prevent() |
hideBackground | 在彈窗模式中,可能需要用到的隱藏彈層的函數 | cal.hideBackground() |
Authors正式發布第一版日歷
如果你遇到了什么神bug,請發起ISSUE聯系我 ~
我是嘉寶Appian,一個賣萌出家的算法妹紙。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112058.html
摘要:比的更好用,并且完美兼容的時間點此訪問用戶向導地址當前最新版本地址基本對象日期時間輸出結果本地日期時間輸出結果本地日期輸出結果本地時間輸出結果與相互轉換輸出結果與相互轉換 Joda Time : 比JDK的Date,Calendar更好用,并且完美兼容的時間API. 點此訪問Joda Time User Guide 用戶向導地址 joda-time joda-time ...
摘要:如何將類型插入數據庫中,成為好多人的一個不小的障礙。當然,并不一定要在外部插入時間,因為在數據庫中,可以讓它自動插入,比如里面,用來插入當前時間,而在時,便可以不用管它了。但有的時候還是避免不了,要手工插入時間,以更新數據庫。 在JDK 1.1后,java.util.Date 類型的大多數方法已經不推薦使用了。代替它的是Calendar。 而在java.sql.Date 和 java...
摘要:實際需求中如何運用實現過濾重復這里的重復不一定是某個字段一樣的,而且時間點不重疊這里需要校驗不重疊的字段有員工所在部門,出發點,目的點,生效日期,失效日期,出發時點,到達時點,出發分鐘,到達分鐘是需要校驗的對象。 在我們的印象中,Map k,v 映射,一對一的比較多,下面主要講一對多的關系映射,主要需求在于,需要把很多的,雜亂的數據 按照不同的類型進行分類處理,A,B,C類型的數據進行...
我遇到的問題是啟動定時器,然后在跟數據庫交互的地方報錯,Exception in thread Timer-1 java.lang.NullPointerException。后來檢查了一下是因為,dataAcquisitionVoMapper沒有正常注入,原始代碼如下: package com.hqgd.pms.controller.Timer; import java.text.SimpleD...
閱讀 3951·2021-11-24 09:38
閱讀 1421·2021-11-19 09:40
閱讀 2777·2021-11-18 10:02
閱讀 3691·2021-11-09 09:46
閱讀 1764·2021-09-22 15:27
閱讀 3109·2019-08-29 15:24
閱讀 997·2019-08-29 12:40
閱讀 1682·2019-08-28 18:24