一款基於移動端的日曆控件iantooDate

原文連接

使用

引入文件:

./build/css/iantooDate.css
./build/js/iantooDate.js

並在頁面上調用:

iantoo.date()

詳細使用方法見page/iantooDate/index.html

[========]

兼容性

ios 8.0+
Android 4.0+

預覽

github

API

el

type:string 默認 body class | id

日曆控件被渲染的地方,element 。

date

type:string 默認 當前時間

yyyy-mm-dd hh:mm:ss  |  yyyy-mm-dd

初始化時間的,不設置爲初始化系統當前的時間。

setSystemDate

type:string 默認系統時間

yyyy-mm-dd hh:mm:ss  |  yyyy-mm-dd  | 時間戳

手動設置系統時間,一般狀況不適用該功能。
主要是爲了不用戶修改了手機日曆以後，獲取的本地與服務器時間不統一,能夠經過獲取服務器時間進行手動設置。將不在獲取本地時間

lang

type:string 默認 'cn' cn | en

選擇日曆的語言,支持中英文,默認中文

rollDirection

type:string 默認 'UD' UD | LR

日曆控件滾動的方向,默認縱向滾動,LR爲橫向滾動;注:字母爲大寫。

header

type:boolean 默認 true

是否顯示頭信息。

week

type:boolean 默認 true

是否顯示星期欄

mask

遮罩層設置

mask.show

type:boolean 默認 true

是否顯示遮罩層。

mask.closePage

type:boolean 默認 true

點擊遮罩層是否關閉日曆控件。

elastic

type:number 默認 0.3 0~1

彈性值,是指滑動的距離佔整個日曆高度的百分比，超過必定百分比以後才能夠滾動,不然彈回。

theme

主題顏色配置

theme.selectGB

type:string 默認 不一樣版本顏色值不一樣。

被選擇的某一天的背景顏色,設置方式能夠是 十六進制 #ff8800、rgb、rgba、最終以element.style.background = color的形式設置。

theme.selectFontColor

type:string 默認 #ffffff

被選擇的某一天的惡文字顏色,設置方式同theme.selectGB

theme.systemBG

type:string

系統對應的時間背景顏色。

例如：今天的時間是2018-06-20,經過上面的參數date:'2018-06-22',那麼06-22爲選中的某一天,06-20爲系統時間。當選中的某一天雨系統時間重合時，會以選中的時間theme.selectGB優先顯示。

theme.systemFontColor

type:string

系統時間對應的文字顏色。

theme.overdueRemindingColor (已被移除)

type:string

過期的提醒時間的顏色。該效果以後再設置了提醒時間sign以後纔會生效。

例如:

iantoo.date({
    el:'.newCalendar',
    date:'2018-06-22',
    theme:{
        selectGB:'#33b5e5',
        overdueRemindingColor:'#ececec'
    },
    sign:['2018-06-21','2018-06-23']
})

則當前的初始化時間是2018-06-22,提醒時間中分別有2018-06-21 | 2018-06-23 ,21日是初始化時間以前的時間,爲過時時間,提示的背景色會以theme.overdueRemindingColor的顏色顯示,23日爲還未發生的提示,顏色背景則以theme.selectGB顯示。

move

type:boolean 默認 true

當日歷控件滑動的時候,是否實時更新日曆控件的位置,主要是對部分低端機型作性能處理。
核心代碼：禁用以後,主要是對 touchmove事件不在監聽和執行渲染。

sign

type:Array 默認 [] ['yyyy-mm-dd','yyyy-mm-dd']

提醒事件,添加以後會在對應的天下面添加一個圓點提醒。

clickDay

`type:Function`    `callback : date,close`

點擊某一天的時候回調方法。

date：返回當前的時間,
close：調用該方法關閉日曆控件。

使用方法：

iantoo.date({
    render:function(date,close){
        //....
        console.info(date)  // {Y: 2018, M: 6, D: 29}

        close()  //關閉日曆控件
    }
})

render

type:Function callback : opction

每次打開日曆控件的時候調用一次。

iantoo.date({
    render:function(opction){
        /*
        {
            date:date,                 //初始化的時間
            systemDate:systemDate     //    系統時間
        }
        */
    }
})

slide

type:Function callback : date

每次滾動日曆以後回調,注:是指日曆發生了月份滾動,而不是被回彈回去。

date:當前顯示的年、月

clickFooter

type:Function callback : systemDate,close

點擊底部的查看今天按鈕回調方法。

systemDate:系統時間
close : 關閉日曆方法

close

type:Function

日曆控件被關閉 以後調用,沒有回調參數。

擴展

iantoo.date.close()

在頁面調用該方法會直接關閉日曆控件

iantoo.data.fmtDate()

傳入不一樣格式的時間能夠轉換爲以下的形式返回,入參形式參考dayjs;一般YYYY-MM-DD | YYYY-MM-DD HH-MM-SS。傳入空會返回系統當前時間。

return {
    Y:年,
    M:月,
    D:日,
    h:時,
    m:分,
    s:秒,
    w:星期
}